<template>
  <el-popover v-bind="$attrs" v-model="visible" trigger="click">
    <div class="el-popconfirm" :style="widthStyle()">
      <div
        class="el-popconfirm__main"
        :class="[popperClass, content && 'el-popover--plain']"
      >
        <i
          v-if="icon"
          :class="icon"
          class="el-popconfirm__icon"
          :style="{ color: iconColor }"
        ></i>
        <div class="el-popconfirm__content">
          <span class="el-popconfirm__title" v-if="title" v-text="title"></span>
          <div class="el-popconfirm__text" v-if="content && title">
            <slot>{{ content }}</slot>
          </div>
          <div class="el-popconfirm__text1" v-if="content && !title">
            <slot>{{ content }}</slot>
          </div>
        </div>
      </div>

      <div class="el-popconfirm__action">
        <el-button size="mini" :type="cancelButtonType" @click="cancel">
          {{ displayCancelButtonText }}
        </el-button>
        <el-button size="mini" :type="confirmButtonType" @click="confirm">
          {{ displayConfirmButtonText }}
        </el-button>
      </div>
    </div>
    <slot name="reference" slot="reference"></slot>
  </el-popover>
</template>

<script>
import ElPopover from "modesign-ui/packages/popover";
import ElButton from "modesign-ui/packages/button";
import { t } from "modesign-ui/src/locale";

export default {
  name: "ElPopconfirm",
  props: {
    title: {
      type: String,
    },
    popperClass: String,
    confirmButtonText: {
      type: String,
    },
    cancelButtonText: {
      type: String,
    },
    confirmButtonType: {
      type: String,
      default: "primary",
    },
    cancelButtonType: {
      type: String,
      default: "secondary",
    },
    content: String,
    icon: {
      type: String,
      default: "",
    },
    iconColor: {
      type: String,
      default: "rgb(var(--orange-6))",
    },
    minWidth: {
      type: Number,
      default: 160
    },
    maxWidth: {
      type: Number,
      default: 720
    },
    width: {
      type: Number,
    },
  },
  components: {
    ElPopover,
    ElButton,
  },
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    displayConfirmButtonText() {
      return this.confirmButtonText || t("el.popconfirm.confirmButtonText");
    },
    displayCancelButtonText() {
      return this.cancelButtonText || t("el.popconfirm.cancelButtonText");
    },
  },
  methods: {
    confirm() {
      this.visible = false;
      this.$emit("confirm");
    },
    cancel() {
      this.visible = false;
      this.$emit("cancel");
    },
    widthStyle() {
      let minWidth = 0, maxWidth = 0;
      if(this.minWidth < 160) {
         minWidth = 160
      } else {
        minWidth = this.minWidth
      }
      if(this.maxWidth > 720) {
        maxWidth = 720
      } else {
        maxWidth = this.maxWidth
      }
      return { minWidth: minWidth - 24 +'px', maxWidth: maxWidth - 24 +'px', width: (this.width ? this.width - 24 : '') + 'px' }
    },
  },
};
</script>
