<template>
  <el-dialog
    class="el-manager-dialog"
    v-bind="$attrs"
    :visible.sync="dialogVisible"
    :divider="divider"
    :width="width"
    :fullscreen="fullscreen"
    :destroy-on-close="destroyOnClose"
    :before-close="beforeClose"
    :append-to-body="appendToBody"
    @open="$emit('open')"
    @opened="$emit('opened')"
    @close="$emit('close')"
    @closed="$emit('closed')"
  >
    <span slot="title">
      <slot name="title">
        <i v-if="icon" :class="[icon]" style="color:#59a6ff"></i>
        {{ title }}
      </slot>
    </span>
    <slot> </slot>
    <span v-if="showFooter" slot="footer">
      <slot name="footer">
        <el-button v-if="showResetBtn" @click="$emit('reset')">重 置</el-button>
        <el-button v-if="showSubmitBtn" @click="$emit('submit')" type="primary"
          >提 交</el-button
        >
      </slot>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'ManagerDialog',
  componentName: 'ManagerDialog',
  props: {
    appendToBody: {// 是否嵌套dialog
      type: Boolean,
      default: false
    },
    divider: {// 是否显示分割线
      type: Boolean,
      default: true
    },
    showResetBtn: {// 是否显示重置按钮
      type: Boolean,
      default: true
    },
    showSubmitBtn: {// 是否显示提交按钮
      type: Boolean,
      default: true
    },
    destroyOnClose: {// 关闭时销毁 Dialog 中的元素
      type: Boolean,
      default: false
    },
    fullscreen: {// 是否全屏
      type: Boolean,
      default: false
    },
    width: {// Dialog 的宽度
      type: String,
      default: '50%'
    },
    visible: {// 是否显示 Dialog，支持 .sync 修饰符
      type: Boolean,
      default: false
    },
    title: {// Dialog 的标题，也可通过具名 slot （见下表）传入
      type: String,
      default: ''
    },
    showFooter: {// 是否显示Dialog 按钮操作区的内容
      type: Boolean,
      default: true
    },
    icon: String, // 传入的icon名，仅支持element-icon
    beforeClose: Function// 关闭前的回调，会暂停 Dialog 的关闭
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      this.$emit('update:visible', val);
    }
  }
};
</script>