<!--
 * @Description: 删除标签的确认弹出框组件
 * @Author: liusheng
 * @Date: 2024-07-03 16:30:56
-->
<template>
  <el-popover :visible.sync="visible" v-model="showPopup" placement="bottom-start" width="200" 
    trigger="click" @show="handleShow" @hide="handleHide">
    <div class="text"><i class="el-icon-question" style="color:coral;"></i> 确定删除此标签？</div>
    <div style="text-align:right; margin:0">
      <el-button type="text" size="mini" @click="handleCancel">取消</el-button>
      <el-button type="primary" size="mini" @click="handleConfirm">确定</el-button>
    </div>
    <i class="el-icon-close mouse-pointer" slot="reference"></i>
  </el-popover>
</template>

<script>
export default {
  name: 'DeleteConfirmPopup',
  props: ['visible'],

  data() {
    return {
      showPopup: false,
    }
  },

  methods: {
    handleConfirm() {
      this.showPopup = false;
      this.$emit("confirm");
      this.handleHide();
    },
    
    handleCancel() {
      this.showPopup = false;
    },

    handleShow() {
      this.$emit("update:visible", true);
    },

    handleHide() {
      this.$emit("update:visible", false);
    },
  }
}
</script>

<style scoped>
.text {
  padding: 12px 0 15px 5px;
  font-size: 15px;
}
</style>
