<template>
  <div
    id="declinkBox"
    class="dec-link-box"
    :style="container"
    @mouseleave="hide"
  >
    <div class="wrap" :style="{ height: scrollHeight }" :selectable="false">
      <a-menu v-model="selectedKey">
        <a-menu-item
          v-for="(item, index) in options"
          :key="index"
          @click="selectChange(item)"
        >
          <a href="javascript:;">{{ item.urlContent }}</a>
        </a-menu-item>
      </a-menu>
    </div>
    <!-- 商品选取-event -->
    <good-modal ref="decLinkGMdRef"></good-modal>
    <!-- 内部地址选取具体页面-event -->
    <link-modal ref="decLinkMdRef"></link-modal>
    <!-- 内部地址选取 -->
    <diy-link-model ref="decDiyLinkMdRef"></diy-link-model>
  </div>
</template>
<script>
import goodModal from "./goodTableModal";
import linkModal from "./tableModal";
import diyLinkModel from "./linkDiyModel";
export default {
  name: "linkBox",
  inject: ["decAxios"],
  components: {
    diyLinkModel,
    linkModal,
    goodModal,
  },
  data() {
    return {
      waiting: false,
      options: [], // 链接下拉框数组
      selectedKey: [],
      linkArg: {},
      display: "block",
      container: {
        top: 0,
        left: 0,
        width: "200px",
      },
      scrollHeight: "",
    };
  },
  created() {
    this.decAxios.getLinkPath().then((res) => {
      console.log(res, "数据");
      this.options = res.code == 200 ? res.result : [];
    });
  },
  mounted() {
    document.body.appendChild(this.$el);
  },
  methods: {
    //选取链接项时触发下拉框
    show(e, className) {
      this.waiting = false;
      this.linkArg = {};
      this.selectedKey = [];
      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] || {};
          if ((path.className || "").indexOf(className) > -1) {
            target = path;
            break;
          } else {
            x = x - path.offsetLeft;
            y = y - path.offsetTop;
          }
        }
      }

      const clientHeight = target.clientHeight;
      const clientWidth = target.clientWidth;
      const windowH = document.getElementById("decMoudleWrap").clientHeight;
      const maxCount = Math.floor((windowH - y - clientHeight - 2) / 32);
      const len =
        this.options.length > maxCount ? maxCount : this.options.length;
      const H = len * 32;

      this.container.left = x + "px";
      this.container.top = y + "px";
      this.container.paddingTop = clientHeight + 2 + "px";
      this.container.display = "block";
      this.scrollHeight = +H + "px";
    },
    hide(e) {
      if (!this.waiting) {
        let dom = document.querySelectorAll("#declinkBox .wrap");
        dom = document.querySelectorAll("#declinkBox .wrap")[dom.length - 1];
        if (dom) dom.scrollTop = 0;

        this.linkArg = {};
        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 });
      }
    },
    selectChange(item) {
      if (item.isOpen == "2") {
        // 打开外链接填写框
        this.linkArg = { pathName: "外链" };
        this.$refs.decDiyLinkMdRef.show();
        this.waiting = true;
        this.$refs.decDiyLinkMdRef.$once("promise", (res) => {
          this.waiting = false;
          if (res.success) {
            this.linkArg = Object.assign({}, this.linkArg, res);
            this.$emit("promise", { ...this.linkArg, success: true });
          } else {
            this.$emit("promise", { success: false });
          }
          this.hide();
        });
      } else if (item.isOpen == "1") {
        // 打开弹窗-含有路由参数
        this.linkArg = {
          pathName: item.urlContent,
          path: item.urlPattern || item.urlType,
        };
        //商品链接选取使用decLinkGMdRef，其他使用decLinkMdRef
        let refName =
          item.urlType == "good-list" ? "decLinkGMdRef" : "decLinkMdRef";
        console.log("item.urlType:", item.urlType, "refName", refName);
        this.$refs[refName].show({
          moulder: "getLinkParams",
          url: item.openUrl,
          column: item.caseName,
          type: item.urlType,
        });
        this.waiting = true;
        this.$refs[refName].$once("promise", (res) => {
          this.waiting = false;
          if (res.success) {
            this.linkArg = Object.assign({}, this.linkArg, res);
            this.$emit("promise", { ...this.linkArg, success: true });
          } else {
            this.$emit("promise", { success: false });
          }
          this.hide();
        });
      } else {
        // 一级链接
        this.linkArg = {
          pathName: item.urlContent,
          path: item.urlPattern || item.urlType,
        };
        this.$emit("promise", { success: true, ...this.linkArg });
        this.hide();
      }
    },
  },
};
</script>
