<template>
  <div id="DgDialog" class="dg-dialog">
    <el-dialog
      :modal="modal"
      :append-to-body="appendToBody"
      :modal-append-to-body="modalAppendToBody"
      :show-close="showClose"
      :title="title"
      :fullscreen="fullscreen"
      :top="top"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :center="center"
      :lock-scroll="lockScroll"
      :visible.sync="sonVisible"
      :destroy-on-close="destroyOnClose"
      :width="width"
      @closed="closed"
      @close="close"
    >
      <!-- 顶部tip -->
      <div v-if="headerTip.title && sonVisible">
        <el-alert
          style="padding: 4px 8px"
          :title="headerTip.title"
          :type="headerTip.type || 'success'"
          :description="headerTip.description"
          :closable="headerTip.closable || true"
          :center="headerTip.center || false"
        >
        </el-alert>
      </div>
      <!-- 父组件传入内容 -->
      <slot></slot>
      <!-- 底部按钮栏 -->
      <template v-if="showFooterButton" slot="footer">
        <!-- 自定义按钮 -->
        <div v-if="footerButtons.length">
          <template v-for="(item, index) in footerButtons">
            <el-button
              v-if="item.editer === 'cancel'"
              :key="index"
              :style="item.style"
              :type="item.type || 'info'"
              :icon="item.icon"
              :size="item.size"
              :plain="item.plain === false ? false : true"
              :round="item.round"
              :circle="item.circle"
              :disabled="item.disabled"
              @click="clickHandle(item)"
            >
              <span>{{ item.title || '取 消' }}</span>
            </el-button>
            <el-button
              v-else-if="item.editer === 'confirm'"
              :key="index"
              :style="item.style"
              :type="item.type || 'primary'"
              :icon="item.icon"
              :size="item.size"
              :plain="item.plain === false ? false : true"
              :round="item.round"
              :circle="item.circle"
              :disabled="item.disabled"
              @click="clickHandle(item)"
            >
              <span>{{ item.title || '确 定' }}</span>
            </el-button>
            <el-button
              v-else
              :key="index"
              :style="item.style"
              :type="item.type"
              :icon="item.icon"
              :size="item.size"
              :plain="item.plain"
              :round="item.round"
              :circle="item.circle"
              :disabled="item.disabled"
              @click="clickHandle(item)"
            >
              <span>{{ item.title }}</span>
            </el-button>
          </template>
        </div>
        <!-- 特定内置按钮 -->
        <div v-else>
          <el-button type="primary" plain @click="confirm">确 定</el-button>
          <el-button type="info" plain @click="sonVisible = false">取 消</el-button>
        </div>
      </template>
      <template v-else slot="footer">
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DgDialog',
  props: {
    /** 与elementUi完全一致的drawer属性 */
    modal: {
      type: Boolean,
      default: () => true,
    },
    appendToBody: {
      type: Boolean,
      default: () => false,
    },
    modalAppendToBody: {
      type: Boolean,
      default: () => true,
    },
    fullscreen: {
      type: Boolean,
      default: () => false,
    },
    top: {
      type: String,
      default: () => '15vh',
    },
    lockScroll: {
      type: Boolean,
      default: () => true,
    },
    closeOnClickModal: {
      type: Boolean,
      default: () => true,
    },
    closeOnPressEscape: {
      type: Boolean,
      default: () => true,
    },
    center: {
      type: Boolean,
      default: () => false,
    },
    showClose: {
      type: Boolean,
      default: () => true,
    },
    title: {
      type: String,
      default: () => '',
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
    destroyOnClose: {
      type: Boolean,
      default: () => false,
    },
    width: {
      type: String,
      default: () => '50%',
    },
    /** 特殊属性 */
    footerButtons: {
      // 滑窗底部操作按钮
      type: Array,
      default: () => [],
    },
    headerTip: {
      // 滑窗顶部提示
      type: Object,
      default: () => {
        return {}
      },
    },
    showFooterButton: {
      // 是否显示滑窗底部按钮栏
      type: Boolean,
      default: () => true,
    },
  },
  data() {
    return {
      sonVisible: false,
    }
  },
  watch: {
    visible(newVal, oldVal) {
      this.sonVisible = newVal
    },
    sonVisible(newVal, oldVal) {
      this.$emit('update:visible', newVal)
    },
  },
  methods: {
    close() {
      this.$emit('close')
    },
    closed() {
      this.$emit('closed')
    },
    // 确定按钮操作事件
    confirm() {
      this.$emit('confirm')
    },
    // 自定义底部按钮操作事件
    clickHandle(item) {
      switch (item.editer) {
        case 'cancel':
          if (item.fn) item.fn()
          else this.sonVisible = false
          break

        case 'confirm':
          if (item.fn) item.fn()
          else this.$emit('confirm')
          break

        default:
          if (item.fn) item.fn()
          break
      }
    },
  },
}
</script>
