<template>
  <el-popover v-model="visible">
    <p>{{ message }}</p>
    <div class="text-right">
      <el-button size="mini" type="text" @click="cancel">{{ cancelText }}</el-button>
      <el-button type="primary" size="mini" @click="confirm">{{ confirmText }}</el-button>
    </div>
    <template slot="reference">
      <slot>
        <el-button
          v-hasPermi="hasPermi"
          type="text"
          icon="el-icon-delete"
          class="text-danger"
        >删除</el-button>
      </slot>
    </template>
  </el-popover>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: '是否继续您的操作？'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    buttonText: {
      type: String,
      default: '删除'
    },
    hasPermi: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    confirm() {
      this.visible = false
      this.$emit('confirm')
    },
    cancel() {
      this.visible = false
      this.$emit('cancel')
    }
  }
}
</script>

<style>
</style>
