<template>
  <div class="vue-portal-target" style="top: 30px; right: 10px" d>
    <div class="v-btn-dropdown">
      <div
        tabindex="-1"
        role="listbox"
        class="v-menu"
        syno-id="components-header-menu-1"
        style="height: auto; width: auto; right: 4px; top: 0px; z-index: 15000"
        :style="{ display: portalDetail.display }"
      >
        <div tabindex="0" class="v-trap-focus-indicator"></div>
        <div class="v-trap-focus-body">
          <div
            role="menuitem"
            tabindex="0"
            class="v-menu-item"
            syno-id="components-header-menu-item-0"
            v-for="(
              detailMessage, detailMessageIndex
            ) in portalDetail.detailMessageList"
            :key="detailMessage.id"
            :class="detailMessage.cls"
            @mouseenter.stop="mouseenterMenuItem(detailMessageIndex)"
            @mouseleave.stop="mouseleaveMenuItem(detailMessageIndex)"
            @click.stop="clickPosition(detailMessageIndex)"
          >
            <i class="v-icon v-icon--select"></i>
            <span class="title">{{ detailMessage.title }}</span>
          </div>
          <!-- <div
            role="menuitem"
            tabindex="0"
            class="v-menu-item v-menu-item-select"
            syno-id="components-header-menu-item-1"
          >
            <i class="v-icon v-icon--select"></i>
            <span class="title">右下角</span>
          </div>
          <div
            role="menuitem"
            tabindex="0"
            class="v-menu-item v-menu-item-select"
            syno-id="components-header-menu-item-2"
          >
            <i class="v-icon v-icon--select"></i>
            <span class="title">左上角</span>
          </div>
          <div
            role="menuitem"
            tabindex="0"
            class="v-menu-item v-menu-item-select"
            syno-id="components-header-menu-item-3"
          >
            <i class="v-icon v-icon--select"></i>
            <span class="title">左下角</span>
          </div> -->
        </div>
        <div tabindex="0" class="v-trap-focus-indicator"></div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      portalDetail: {
        display: "none",
        selectedNum: 0,
        detailMessageList: [
          {
            id: 0,
            title: "右上角",
            cls: "active",
            top: "47px",
            bottom: 0,
            left: 0,
            right: "10px",
          },
          {
            id: 1,
            title: "右下角",
            cls: "v-menu-item-select-selected selected",
            top: 0,
            bottom: "10px",
            left: 0,
            right: "10px",
          },
          {
            id: 2,
            title: "左上角",
            top: "47px",
            bottom: 0,
            right: 0,
            left: "10px",
            cls: "",
          },
          {
            id: 3,
            title: "左下角",
            top: 0,
            bottom: "10px",
            left: "10px",
            right: 0,
            cls: "",
          },
        ],
      },
    };
  },
  methods: {
    // 鼠标移入选择框的每一项
    mouseenterMenuItem(detailMessageIndex) {
      let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
      this.clearOtherPositionClassA();
      if (cls && cls.includes("v-menu-item-select-selected selected")) {
        this.portalDetail.detailMessageList[detailMessageIndex].cls =
          "v-menu-item-select-selected selected active";
      } else {
        this.portalDetail.detailMessageList[detailMessageIndex].cls = "active";
      }
    },
    // 鼠标移出选择框的每一项
    mouseleaveMenuItem(detailMessageIndex) {
      let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
      if (cls && cls.includes("active")) {
        this.portalDetail.detailMessageList[detailMessageIndex].cls =
          cls.replace("active", "");
      }
    },
    // 点击选择框的每一项
    clickPosition(detailMessageIndex) {
      this.clearOtherPositionClassA();
      let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
      if (cls && cls.includes("v-menu-item-select-selected selected")) {
      } else {
        this.countSelectedMenuItem();
        if (this.portalDetail.selectedNum) {
          this.portalDetail.detailMessageList.forEach((item, index) => {
            if (
              item.cls &&
              item.cls.includes("v-menu-item-select-selected selected")
            ) {
              if (index != detailMessageIndex) {
                item.cls = item.cls.replace(
                  "v-menu-item-select-selected selected",
                  ""
                );
              }
            }
          });
        }
        this.portalDetail.detailMessageList[detailMessageIndex].cls =
          "v-menu-item-select-selected selected active";
        let obj = {
          detailMessageList: this.portalDetail.detailMessageList,
          index: detailMessageIndex,
        };
        this.$bus.emit("changeOrHiddenWidgetPosition", obj);
      }
      this.portalDetail.display = "none";
      this.countSelectedMenuItem();
    },
    //统计已选择的个数
    countSelectedMenuItem() {
      this.portalDetail.selectedNum = 0;
      this.portalDetail.detailMessageList.forEach((item) => {
        if (
          item.cls &&
          item.cls.includes("v-menu-item-select-selected selected")
        ) {
          this.portalDetail.selectedNum++;
        }
      });
    },
    // 显示或隐藏选择框
    showOrHiddenSelectWidgetPosition(obj) {
      if (obj.detailMessageList) {
        this.portalDetail.detailMessageList = JSON.parse(
          JSON.stringify(obj.detailMessageList)
        );

        if (this.portalDetail.display === "none") {
          this.portalDetail.display = "block";
          this.$bus.emit("showOrHiddenSelectWidgetItem", "none");
        } else if (this.portalDetail.display === "block") {
          this.portalDetail.display = "none";
        }
      } else {
        this.portalDetail.display = "none";
      }
    },
    //清空其他的选择项active类名
    clearOtherPositionClassA() {
      this.portalDetail.detailMessageList.forEach((item) => {
        if (item.cls && item.cls.includes("active")) {
          item.cls = item.cls.replace("active", "");
        }
      });
    },
  },
  mounted() {
    this.$bus.on(
      "showOrHiddenSelectWidgetPosition",
      this.showOrHiddenSelectWidgetPosition
    );
  },
  components: {},
  name: "portalTarget",
};
</script>