<style rel="stylesheet/scss" lang="scss">
.eagle-confirm-icon {
  margin-right: 5px;
  font-size: 16px;
  color: #faad14;
}
.eagle-confirm-title {
  font-size: 14px;
  margin: 0px 0px 5px 0px;
}
.eagle-confirm-button-panel {
  margin: 0;
  text-align: right;
}
</style>

<template>
  <el-popover class="eagle-confirm" :placement="placement" :trigger="trigger" v-model="visible">
    <div>
      <p class="eagle-confirm-title">
        <i class="el-icon-info eagle-confirm-icon"></i>
        <span>{{ title || i18n('eagle.confirm.title') || '是否执行当前操作？' }}</span>
      </p>
      <p class="eagle-confirm-button-panel">
        <el-button size="mini" plain @click="cancel">{{ i18n('eagle.confirm.no') || '否' }}</el-button>
        <el-button size="mini" type="primary" style="margin-left: 5px" @click="confirm">{{ i18n('eagle.confirm.yes') || '是' }}</el-button>
      </p>
    </div>
    <span @click.stop slot="reference">
      <slot></slot>
    </span>
  </el-popover>
</template>
<script>
export default {
  name: "Confirm",
  props: {
    title: {
      type: String,
    },
    placement: {
      type: String,
      default: "top"
    },
    trigger: String
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    cancel() {
      this.visible = false
      this.$emit("cancel")
    },
    confirm() {
      this.visible = false
      this.$emit("confirm")
    }
  }
}
</script>
