<template>
  <div>
    <el-dialog
      v-loading="loading"
      v-bind="$attrs"
      :visible.sync="show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      @closed="close"
    >
      <slot />
      <div slot="footer" class="dialog-footer">
        <el-button v-if="showCancel" @click="close">{{ cancelText }}</el-button>
        <el-button v-if="showConfirm" type="primary" :loading="loading" @click="confirm">
          {{ confirmText }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showCancel: {
      type: Boolean,
      default: false
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    visible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false
    }
  },
  watch: {
    visible(val) {
      this.show = val
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    confirm() {
      this.$emit('confirm')
    }
  }
}
</script>
