"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const aria = require("../../../utils/dom/aria.js");
const types = require("../../../utils/types.js");
const error = require("../../../utils/error.js");
const runtime = require("../../../utils/vue/props/runtime.js");
const icon = require("../../../utils/vue/icon.js");
const index = require("../../../hooks/use-namespace/index.js");
const index$2 = require("../../icon/index.js");
const index$3 = require("../../tooltip/index.js");
const index$4 = require("../../collapse-transition/index.js");
const useMenu = require("./use-menu.js");
const useMenuCssVar = require("./use-menu-css-var.js");
const tokens = require("./tokens.js");
const index$1 = require("../../../../../@element-plus/icons-vue/dist/index.js");
const Vue = require("vue");
const shared_esmBundler = require("../../../../../@vue/shared/dist/shared.esm-bundler.js");
const index$5 = require("../../../../node_modules/@vueuse/shared/index.js");
const subMenuProps = runtime.buildProps({
  index: {
    type: String,
    required: true
  },
  showTimeout: Number,
  hideTimeout: Number,
  popperClass: String,
  popperStyle: { type: runtime.definePropType([String, Object]) },
  disabled: Boolean,
  teleported: {
    type: Boolean,
    default: void 0
  },
  popperOffset: Number,
  expandCloseIcon: { type: icon.iconPropType },
  expandOpenIcon: { type: icon.iconPropType },
  collapseCloseIcon: { type: icon.iconPropType },
  collapseOpenIcon: { type: icon.iconPropType }
});
const COMPONENT_NAME = "ElSubMenu";
var sub_menu_default = Vue.defineComponent({
  name: COMPONENT_NAME,
  props: subMenuProps,
  setup(props, { slots, expose }) {
    const instance = Vue.getCurrentInstance();
    const { indexPath, parentMenu } = useMenu.default(instance, Vue.computed(() => props.index));
    const nsMenu = index.useNamespace("menu");
    const nsSubMenu = index.useNamespace("sub-menu");
    const rootMenu = Vue.inject(tokens.MENU_INJECTION_KEY);
    if (!rootMenu) error.throwError(COMPONENT_NAME, "can not inject root menu");
    const subMenu = Vue.inject(`${tokens.SUB_MENU_INJECTION_KEY}${parentMenu.value.uid}`);
    if (!subMenu) error.throwError(COMPONENT_NAME, "can not inject sub menu");
    const items = Vue.ref({});
    const subMenus = Vue.ref({});
    let timeout;
    const mouseInChild = Vue.ref(false);
    const verticalTitleRef = Vue.ref();
    const vPopper = Vue.ref();
    const isFirstLevel = Vue.computed(() => subMenu.level === 0);
    const currentPlacement = Vue.computed(() => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start");
    const subMenuTitleIcon = Vue.computed(() => {
      if (mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse) {
        if (props.expandCloseIcon && props.expandOpenIcon) return opened.value ? props.expandOpenIcon : props.expandCloseIcon;
        return index$1.ArrowDown;
      } else {
        if (props.collapseCloseIcon && props.collapseOpenIcon) return opened.value ? props.collapseOpenIcon : props.collapseCloseIcon;
        return index$1.ArrowRight;
      }
    });
    const appendToBody = Vue.computed(() => {
      const value = props.teleported;
      return types.isUndefined(value) ? isFirstLevel.value : value;
    });
    const menuTransitionName = Vue.computed(() => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`);
    const fallbackPlacements = Vue.computed(() => mode.value === "horizontal" && isFirstLevel.value ? [
      "bottom-start",
      "bottom-end",
      "top-start",
      "top-end",
      "right-start",
      "left-start"
    ] : [
      "right-start",
      "right",
      "right-end",
      "left-start",
      "bottom-start",
      "bottom-end",
      "top-start",
      "top-end"
    ]);
    const opened = Vue.computed(() => rootMenu.openedMenus.includes(props.index));
    const active = Vue.computed(() => [...Object.values(items.value), ...Object.values(subMenus.value)].some(({ active: active2 }) => active2));
    const mode = Vue.computed(() => rootMenu.props.mode);
    const persistent = Vue.computed(() => rootMenu.props.persistent);
    const item = Vue.reactive({
      index: props.index,
      indexPath,
      active
    });
    const ulStyle = useMenuCssVar.useMenuCssVar(rootMenu.props, subMenu.level + 1);
    const subMenuPopperOffset = Vue.computed(() => props.popperOffset ?? rootMenu.props.popperOffset);
    const subMenuPopperClass = Vue.computed(() => props.popperClass ?? rootMenu.props.popperClass);
    const subMenuPopperStyle = Vue.computed(() => props.popperStyle ?? rootMenu.props.popperStyle);
    const subMenuShowTimeout = Vue.computed(() => props.showTimeout ?? rootMenu.props.showTimeout);
    const subMenuHideTimeout = Vue.computed(() => props.hideTimeout ?? rootMenu.props.hideTimeout);
    const doDestroy = () => {
      var _a, _b, _c;
      return (_c = (_b = (_a = vPopper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.popperInstanceRef) == null ? void 0 : _c.destroy();
    };
    const handleCollapseToggle = (value) => {
      if (!value) doDestroy();
    };
    const handleClick = () => {
      if (rootMenu.props.menuTrigger === "hover" && rootMenu.props.mode === "horizontal" || rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) return;
      rootMenu.handleSubMenuClick({
        index: props.index,
        indexPath: indexPath.value,
        active: active.value
      });
    };
    const handleMouseenter = (event, showTimeout = subMenuShowTimeout.value) => {
      var _a;
      if (event.type === "focus") return;
      if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) {
        subMenu.mouseInChild.value = true;
        return;
      }
      subMenu.mouseInChild.value = true;
      timeout == null ? void 0 : timeout();
      ({ stop: timeout } = index$5.useTimeoutFn(() => {
        rootMenu.openMenu(props.index, indexPath.value);
      }, showTimeout));
      if (appendToBody.value) (_a = parentMenu.value.vnode.el) == null ? void 0 : _a.dispatchEvent(new MouseEvent("mouseenter"));
      if (event.type === "mouseenter" && event.target) Vue.nextTick(() => {
        aria.focusElement(event.target, { preventScroll: true });
      });
    };
    const handleMouseleave = (deepDispatch = false) => {
      var _a;
      if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical") {
        subMenu.mouseInChild.value = false;
        return;
      }
      timeout == null ? void 0 : timeout();
      subMenu.mouseInChild.value = false;
      ({ stop: timeout } = index$5.useTimeoutFn(() => !mouseInChild.value && rootMenu.closeMenu(props.index, indexPath.value), subMenuHideTimeout.value));
      if (appendToBody.value && deepDispatch) (_a = subMenu.handleMouseleave) == null ? void 0 : _a.call(subMenu, true);
    };
    Vue.watch(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value)));
    {
      const addSubMenu = (item2) => {
        subMenus.value[item2.index] = item2;
      };
      const removeSubMenu = (item2) => {
        delete subMenus.value[item2.index];
      };
      Vue.provide(`${tokens.SUB_MENU_INJECTION_KEY}${instance.uid}`, {
        addSubMenu,
        removeSubMenu,
        handleMouseleave,
        mouseInChild,
        level: subMenu.level + 1
      });
    }
    expose({ opened });
    Vue.onMounted(() => {
      rootMenu.addSubMenu(item);
      subMenu.addSubMenu(item);
    });
    Vue.onBeforeUnmount(() => {
      subMenu.removeSubMenu(item);
      rootMenu.removeSubMenu(item);
    });
    return () => {
      var _a;
      const titleTag = [(_a = slots.title) == null ? void 0 : _a.call(slots), Vue.h(index$2.ElIcon, {
        class: nsSubMenu.e("icon-arrow"),
        style: { transform: opened.value ? props.expandCloseIcon && props.expandOpenIcon || props.collapseCloseIcon && props.collapseOpenIcon && rootMenu.props.collapse ? "none" : "rotateZ(180deg)" : "none" }
      }, { default: () => shared_esmBundler.isString(subMenuTitleIcon.value) ? Vue.h(instance.appContext.components[subMenuTitleIcon.value]) : Vue.h(subMenuTitleIcon.value) })];
      const child = rootMenu.isMenuPopup ? Vue.h(index$3.ElTooltip, {
        ref: vPopper,
        visible: opened.value,
        effect: "light",
        pure: true,
        offset: subMenuPopperOffset.value,
        showArrow: false,
        persistent: persistent.value,
        popperClass: subMenuPopperClass.value,
        popperStyle: subMenuPopperStyle.value,
        placement: currentPlacement.value,
        teleported: appendToBody.value,
        fallbackPlacements: fallbackPlacements.value,
        transition: menuTransitionName.value,
        gpuAcceleration: false
      }, {
        content: () => {
          var _a2;
          return Vue.h("div", {
            class: [
              nsMenu.m(mode.value),
              nsMenu.m("popup-container"),
              subMenuPopperClass.value
            ],
            onMouseenter: (evt) => handleMouseenter(evt, 100),
            onMouseleave: () => handleMouseleave(true),
            onFocus: (evt) => handleMouseenter(evt, 100)
          }, [Vue.h("ul", {
            class: [
              nsMenu.b(),
              nsMenu.m("popup"),
              nsMenu.m(`popup-${currentPlacement.value}`)
            ],
            style: ulStyle.value
          }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])]);
        },
        default: () => Vue.h("div", {
          class: nsSubMenu.e("title"),
          onClick: handleClick
        }, titleTag)
      }) : Vue.h(Vue.Fragment, {}, [Vue.h("div", {
        class: nsSubMenu.e("title"),
        ref: verticalTitleRef,
        onClick: handleClick
      }, titleTag), Vue.h(index$4.ElCollapseTransition, {}, { default: () => {
        var _a2;
        return Vue.withDirectives(Vue.h("ul", {
          role: "menu",
          class: [nsMenu.b(), nsMenu.m("inline")],
          style: ulStyle.value
        }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]), [[Vue.vShow, opened.value]]);
      } })]);
      return Vue.h("li", {
        class: [
          nsSubMenu.b(),
          nsSubMenu.is("active", active.value),
          nsSubMenu.is("opened", opened.value),
          nsSubMenu.is("disabled", props.disabled)
        ],
        role: "menuitem",
        ariaHaspopup: true,
        ariaExpanded: opened.value,
        onMouseenter: handleMouseenter,
        onMouseleave: () => handleMouseleave(),
        onFocus: handleMouseenter
      }, [child]);
    };
  }
});
exports.default = sub_menu_default;
exports.subMenuProps = subMenuProps;
