<template>
  <div class="zd-dialog-box">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      :before-close="handleClose"
      :modal="modal"
      :lock-scroll="lockScroll"
      :destroy-on-close="destoryClose"
      @closed="closed"
    >
      <div slot="title"></div>
      <slot></slot>
      <div slot="content"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">{{ cancelText }}</el-button>
        <el-button
          class="zd-dialog__footer--confirm"
          type="primary"
          @click="confirmBtn"
        >
          {{ confirmText }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ElDialog from "modesign-ui/packages/dialog";
import ElButton from "modesign-ui/packages/button";

export default {
  name: "zdDialog",
  components: {
    ElDialog,
    ElButton
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false // 默认隐藏
    },
    handleClose: {
      // 表格数据
      type: Function,
      default: (done = () => {}) => {
        done();
      },
    },
    title: {
      type: String,
      default: '提 示'
    },
    // 取消按钮文本
    cancelText: {
      type: String,
      default: '取 消'
    },
    // 确定按钮文本
    confirmText: {
      type: String,
      default: '确 定'
    },
    width: {
      type: String,
      default: '30%'
    },
    // 是否锁定滚动
    lockScroll: {
      type: Boolean,
      default: true
    },
    // 是否遮罩
    modal: {
      type: Boolean,
      default: true
    },
    // 关闭时是否销毁元素
    destoryClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 点击确定
    confirmBtn() {
      this.$emit('handleConfirm')
    },
    // 点击取消
    cancelBtn() {
      this.$emit('handleCancel')
    },
    // 点击关闭
    closed() {
      this.$emit('handleClose')
    }
  },
};
</script>

<style lang="scss" scoped>
.zd-dialog-box {
  :deep(.el-dialog__body) {
    border-bottom: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
    padding: 0 20px;
  }
}
</style>
