<template>
  <el-dialog
    :visible.sync="visible"
    :title="title"
    :append-to-body="appendToBody"
    :destroy-on-close="destroyOnClose"
    :width="width"
    :before-close="handleBeforeClose"
    :closeOnClickModal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
  >
    <div class="render-dialog-body">
      <slot name="default"></slot>
    </div>
    <div slot="footer" v-if="isShowFooter">
      <slot name="footer">
        <el-button size="medium" @click="cancel">{{
          cancelButtonText
        }}</el-button>
        <el-button size="medium" type="primary" @click="confirm">{{
          confirmButtonText
        }}</el-button>
      </slot>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'index',
  data() {
    return {}
  },
  props: {
    width: {
      type: String,
      default: '30%'
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    beforeClose: {
      type: Function,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    confirmButtonText: {
      type: String,
      default: '确定'
    },
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    isShowFooter: {
      type: Boolean,
      default: true
    }
  },
  watch: {},
  components: {},
  filters: {},
  methods: {
    cancel() {
      this.$emit('cancel')
      this.$emit('update:visible', false)
    },
    confirm() {
      this.$emit('confirm')
      // this.$emit('update:visible', false)
    },
    close() {
      this.cancel()
    },
    handleBeforeClose() {
      this.beforeClose ? this.beforeClose() : this.cancel()
    }
  },
  created() {},
  mounted() {},
  computed: {}
}
</script>
