<template>
  <div class="dec-del-modal" :style="container" @mouseleave="hide">
    <div class="confirm">
      <h5>确定删除？</h5>
      <a-button size="small" id="delModalbtn" type="primary" @click="confirmDel"
        >确认</a-button
      >
      <a-button size="small" @click="hide">取消</a-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      container: {
        top: 0,
        left: 0,
      },
    };
  },
  methods: {
    show(e, className, left = true) {
      let ePath = e.path || (e.composedPath && e.composedPath());
      let target = ePath[0];
      let { x, y } = e;
      x = e.x - e.offsetX;
      y = e.y - e.offsetY;
      if (className) {
        for (let i = 0; i < ePath.length; i++) {
          const path = ePath[i] || {};
          const str = typeof path.className == "string" ? path.className : "";
          if (str.indexOf(className) > -1) {
            target = path;
            break;
          } else if (path.offsetLeft) {
            x = x - path.offsetLeft;
            y = y - path.offsetTop;
          }
        }
      }
      const clientWidth = target.clientWidth;
      const clientHeight = target.clientHeight;
      const windowH = document.getElementById("decMoudleWrap").clientHeight;
      this.container.left = (left ? x : x - 146 + clientWidth) + "px";
      if (y + 100 > windowH) {
        this.container.top = y - 90 + "px";
        this.container.paddingTop = 0 + "px";
        this.container.paddingBottom = clientHeight + 2 + "px";
      } else {
        this.container.top = y + "px";
        this.container.paddingTop = clientHeight + 2 + "px";
      }
      this.container.display = "block";
    },
    hide(e) {
      this.container.top = 0 + "px";
      this.container.left = 0 + "px";
      this.container.paddingTop = 0 + "px";
      this.container.display = "none";
      if (e) this.$emit("promise", { success: false });
    },
    confirmDel() {
      this.$emit("promise", { success: true });
      this.hide();
    },
  },
};
</script>
