<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :custom-class="className"
    :close-on-click-modal="false"
    :before-close="onCancel"
    v-bind="$attrs"
  >
    <slot />
    <template #footer>
      <button
        class="o-button"
        @click="onConfirm"
      >
        确定
      </button>
      <button
        class="o-button cancel"
        @click="onCancel"
      >
        取消
      </button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'ConfirmDialog',
  props: {
    size: {
      type: String,
      default: 'mini'
    }
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  computed: {
    className () {
      return `c-dialog ${this.size}`
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
    },
    onCancel () {
      this.dialogVisible = false
      this.$emit('cancel')
    },
    onConfirm () {
      this.$emit('confirm', () => {
        this.dialogVisible = false
      })
    }
  }
}
</script>
