<template>
  <el-dialog
      :destroy-on-close="true"
      class="base-dialog"
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      :fullscreen="false"
      append-to-body
      top="5vh"
      :close-on-click-modal="false"
      @open="$emit('open')"
      @close="$emit('close')"
  >
    <slot></slot>
    <span slot="footer" class="dialog-footer" v-if="footerShow">
      <el-button @click="closeHandle">取 消</el-button>
      <el-button v-if="resetting">重 置</el-button>
      <el-button
          type="primary"
          v-if="!lookFlag"
          :loading="loading"
          @click="handleConfirmClick"
      >提 交</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    fullscreen: {
      type: Boolean,
      default: false,
    },
    value: Boolean,
    title: String,
    lookFlag: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    resetting: {
      type: Boolean,
      default: false,
    },
    footerShow: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: "90%",
    },
  },
  data() {
    return {};
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    closeHandle() {
      this.$confirm("是否关闭表单?", "提示", {
        confirmButtonText: "关闭",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            this.dialogVisible = false;
            this.$emit("close");
          })
          .catch(() => {
          });
    },
    handleConfirmClick() {
      this.$emit("confirm");
    },
  },
  beforeDestroy() {
  },
};
</script>
<style scoped>
.base-dialog >>> .el-dialog__body {
  max-height: 70vh;
  overflow: auto;
}
::v-deep .el-dialog{
  transition: all .8s;
}
</style>
<style>

</style>
