"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const index$1 = require("../../../hooks/use-locale/index.js");
const index = require("../../../hooks/use-namespace/index.js");
const index$2 = require("../../../hooks/use-id/index.js");
const index$4 = require("../../icon/index.js");
const index$3 = require("../../scrollbar/index.js");
const types = require("./types.js");
const node2 = require("./node2.js");
const index$5 = require("../../../../../@element-plus/icons-vue/dist/index.js");
const Vue = require("vue");
var menu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElCascaderMenu",
  __name: "menu",
  props: {
    nodes: {
      type: Array,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  setup(__props) {
    const props = __props;
    const instance = Vue.getCurrentInstance();
    const ns = index.useNamespace("cascader-menu");
    const { t } = index$1.useLocale();
    const id = index$2.useId();
    let activeNode;
    let hoverTimer;
    const panel = Vue.inject(types.CASCADER_PANEL_INJECTION_KEY);
    const hoverZone = Vue.ref();
    const isEmpty = Vue.computed(() => !props.nodes.length);
    const isLoading = Vue.computed(() => !panel.initialLoaded);
    const menuId = Vue.computed(() => `${id.value}-${props.index}`);
    const handleExpand = (e) => {
      activeNode = e.target;
    };
    const handleMouseMove = (e) => {
      var _a;
      if (!panel.isHoverMenu || !activeNode || !hoverZone.value) return;
      if (activeNode.contains(e.target)) {
        clearHoverTimer();
        const el = instance.vnode.el;
        const { left } = el.getBoundingClientRect();
        const { offsetWidth, offsetHeight } = el;
        const startX = e.clientX - left;
        const top = activeNode.offsetTop;
        const bottom = top + activeNode.offsetHeight;
        const scrollTop = ((_a = el.querySelector(`.${ns.e("wrap")}`)) == null ? void 0 : _a.scrollTop) || 0;
        hoverZone.value.innerHTML = `
          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} ${scrollTop} V${top} Z" />
          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight + scrollTop} V${bottom} Z" />
        `;
      } else if (!hoverTimer) hoverTimer = window.setTimeout(clearHoverZone, panel.config.hoverThreshold);
    };
    const clearHoverTimer = () => {
      if (!hoverTimer) return;
      clearTimeout(hoverTimer);
      hoverTimer = void 0;
    };
    const clearHoverZone = () => {
      if (!hoverZone.value) return;
      hoverZone.value.innerHTML = "";
      clearHoverTimer();
    };
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createBlock(Vue.unref(index$3.ElScrollbar), {
        key: menuId.value,
        tag: "ul",
        role: "menu",
        class: Vue.normalizeClass(Vue.unref(ns).b()),
        "wrap-class": Vue.unref(ns).e("wrap"),
        "view-class": [Vue.unref(ns).e("list"), Vue.unref(ns).is("empty", isEmpty.value)],
        onMousemove: handleMouseMove,
        onMouseleave: clearHoverZone
      }, {
        default: Vue.withCtx(() => {
          var _a;
          return [
            (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(__props.nodes, (node) => {
              return Vue.openBlock(), Vue.createBlock(node2.default, {
                key: node.uid,
                node,
                "menu-id": menuId.value,
                onExpand: handleExpand
              }, null, 8, ["node", "menu-id"]);
            }), 128)),
            isLoading.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
              key: 0,
              class: Vue.normalizeClass(Vue.unref(ns).e("empty-text"))
            }, [Vue.createVNode(Vue.unref(index$4.ElIcon), {
              size: "14",
              class: Vue.normalizeClass(Vue.unref(ns).is("loading"))
            }, {
              default: Vue.withCtx(() => [Vue.createVNode(Vue.unref(index$5.Loading))]),
              _: 1
            }, 8, ["class"]), Vue.createTextVNode(" " + Vue.toDisplayString(Vue.unref(t)("el.cascader.loading")), 1)], 2)) : isEmpty.value ? (Vue.openBlock(), Vue.createElementBlock("div", {
              key: 1,
              class: Vue.normalizeClass(Vue.unref(ns).e("empty-text"))
            }, [Vue.renderSlot(_ctx.$slots, "empty", {}, () => [Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("el.cascader.noData")), 1)])], 2)) : ((_a = Vue.unref(panel)) == null ? void 0 : _a.isHoverMenu) ? (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 2 }, [Vue.createCommentVNode(" eslint-disable vue/html-self-closing "), (Vue.openBlock(), Vue.createElementBlock("svg", {
              ref_key: "hoverZone",
              ref: hoverZone,
              class: Vue.normalizeClass(Vue.unref(ns).e("hover-zone"))
            }, null, 2))], 2112)) : Vue.createCommentVNode("v-if", true),
            Vue.createCommentVNode(" eslint-enable vue/html-self-closing ")
          ];
        }),
        _: 3
      }, 8, [
        "class",
        "wrap-class",
        "view-class"
      ]);
    };
  }
});
exports.default = menu_vue_vue_type_script_setup_true_lang_default;
