<template>
  <div class="error-container">
    <el-dialog
      :width="width"
      :title="title"
      :center="center"
      :visible.sync="dialogVisible"
      :close-on-click-modal="onModalClickClose"
      @open="dialogOpenEvent"
      @close="dialogCloseEvent"
    >
      <slot></slot>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">{{
          confirmBtnName
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "50%",
    },
    title: {
      type: String,
      default: "标题",
    },
    center: {
      type: String,
      default: "center",
    },
    confirmBtnName: {
      type: String,
      default: "确 定",
    },
    onModalClickClose: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    dialogOpenEvent(data) {
      if (data && data.length) {
        console.log(data);
      }
      this.dialogVisible = true;
      this.$emit("open");
    },
    dialogCloseEvent() {
      this.dialogVisible = false;
      this.$emit("close");
    },
    // 确认事件
    confirm() {
      this.dialogVisible = false;
      this.$emit("confirm");
    },
    // 取消事件
    cancel() {
      this.dialogVisible = false;
      this.$emit("cancel");
    },
  },
};
</script>
<style lang='scss' scoped>

</style>