<template>
  <el-drawer
    class="dg-drawer"
    :modal="modal"
    :append-to-body="appendToBody"
    :modal-append-to-body="modalAppendToBody"
    :direction="direction"
    :wrapper-closable="wrapperClosable"
    :show-close="showClose"
    :title="title"
    :visible.sync="sonVisible"
    :destroy-on-close="destroyOnClose"
    :size="size"
    :with-header="withHeader"
    @closed="closed"
    @close="close"
  >
    <!-- 整体flex布局 -->
    <div class="dg-drawer-main">
      <!-- 顶部tip -->
      <div v-if="headerTip.title && sonVisible" class="drawer-header">
        <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>
      <!-- 中间自定义内容 -->
      <div class="dg-drawer-content">
        <slot></slot>
      </div>
      <!-- 底部按钮栏 -->
      <div v-if="showFooterButton" class="dg-drawer-footer">
        <!-- 自定义按钮 -->
        <div v-if="footerButtons.length" class="dg-drawer-button">
          <template v-for="(item, index) in footerButtons">
            <el-button
              v-if="item.editer === 'cancel'"
              :key="index"
              :style="item.style"
              :type="item.type || 'secondary'"
              :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-if="!item.isShowButton"
              :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 class="dg-drawer-button">
          <el-button type="secondary" @click="sonVisible = false">取 消</el-button>
          <el-button v-if="showConfirmButton" type="primary" @click="confirm">确 定</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'DgDrawer',
  props: {
    /** 与elementUi完全一致的drawer属性 */
    modal: {
      type: Boolean,
      default: () => true,
    },
    appendToBody: {
      type: Boolean,
      default: () => false,
    },
    modalAppendToBody: {
      type: Boolean,
      default: () => true,
    },
    direction: {
      type: String,
      default: () => 'rtl',
    },
    wrapperClosable: {
      type: Boolean,
      default: () => true,
    },
    showClose: {
      type: Boolean,
      default: () => true,
    },
    title: {
      type: String,
      default: () => '',
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
    destroyOnClose: {
      type: Boolean,
      default: () => true,
    },
    size: {
      type: [String, Number],
      default: () => '30%',
    },
    withHeader: {
      type: Boolean,
      default: () => true,
    },
    /** 特殊属性 */
    footerButtons: {
      // 滑窗底部操作按钮
      type: Array,
      default: () => [],
    },
    headerTip: {
      // 滑窗顶部提示
      type: Object,
      default: () => {
        return {}
      },
    },
    showFooterButton: {
      // 是否显示滑窗底部按钮栏
      type: Boolean,
      default: () => true,
    },
    showConfirmButton: {
      // 是否显示滑窗底部确认按钮
      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>
