<template>
  <onestop-dialog
    :visible.sync="show"
    :width="width"
    :appendToBody="appendToBody"
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="onestop-modal">
    <div slot="title" class="onestop-modal__header" v-if="names || title">
      <onestop-icon class="onestop-modal__header__img" :iconName="names"></onestop-icon>
      <span v-if="title" class="onestop-modal__header__title">{{ title }}</span>
    </div>
    <div class="onestop-modal__content">
      <slot></slot>
    </div>
    <div slot="footer" v-if="showConfirmBtn || showCancelBtn" class="onestop-modal__footer">
      <onestop-button v-if="showCancelBtn" @click="cancel" :disabled="cancelDisabled">{{ cancelText }}</onestop-button>
      <onestop-button v-if="showConfirmBtn" type="primary" :disabled="confirmDisabled" @click="confirm">{{ confirmText }}</onestop-button>
    </div>
  </onestop-dialog>
</template>
<script>
import { CONFIG } from './index';
import OnestopDialog from 'packages/dialog';
import OnestopButton from 'packages/button';
import OnestopIcon from 'packages/icon';

export default {
  name: 'OnestopModal',
  components: {
    OnestopDialog,
    OnestopButton,
    OnestopIcon
  },
  props: {
    width: {
      type: String,
      default: '410px'
    },
    // 类型: warning/success/information/error
    warning: {
      type: Boolean,
      default: false
    },
    success: {
      type: Boolean,
      default: false
    },
    information: {
      type: Boolean,
      default: false
    },
    error: {
      type: Boolean,
      default: false
    },
    // header title
    headerTitle: {
      type: String,
      default: '标题'
    },
    // 中间内容区
    content: {
      type: String,
      default: ''
    },
    // 是否展示确定按钮
    showConfirmBtn: {
      type: Boolean,
      default: true
    },
    // 是否展示取消按钮
    showCancelBtn: {
      type: Boolean,
      default: true
    },
    // 确定按钮文案
    confirmText: {
      type: String,
      default: 'OK'
    },
    // 取消按钮文案
    cancelText: {
      type: String,
      default: 'Cancel'
    },
    // 是否可见
    visible: {
      type: Boolean,
      default: false
    },
    // 是否显示关闭按钮
    showCloseBtn: {
      type: Boolean,
      default: true
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    // 取消按钮是否disabled
    cancelDisabled: {
      type: Boolean,
      default: false
    },
    // confirm按钮是否disabled
    confirmDisabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    names () {
      return this.getCurConfig().class
    },
    title () {
      return this.headerTitle || this.getCurConfig().title
    }
  },
  watch: {
    visible (val) {
      this.toggle(val)
    }
  },
  data () {
    return {
      show: false
    }
  },
  created () {
    this.show = this.visible
  },
  methods: {
    getCurConfig () {
      return CONFIG.find(config => this[config.key]) || {}
    },
    toggle (val = false) {
      this.show = val
    },
    cancel () {
      this.toggle(false)
      this.$emit('cancel')
    },
    confirm () {
      this.toggle(false)
      this.$emit('confirm')
    }
  }
}
</script>