/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

import { defineComponent, inject, computed, ref, watch, provide, onMounted, getCurrentInstance } from '@vue/composition-api';
import { renderLNodeJSX, renderContent } from '../../utils/render-node.js';
import FakeArrow from '../common/fake-arrow.js';
import Ripple from '../../utils/ripple.js';
import { getKeepAnimationMixins } from '../config-provider/config-receiver.js';
import { usePrefixClass } from '../../hooks/use-config.js';
import { SubMenuProps } from './props.js';
import 'vue';
import 'lodash';
import '../../utils/mixins.js';
import '../../_chunks/dep-cf772670.js';
import '../../config.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import '../../_chunks/dep-def4c2ce.js';
import '../config-provider/useConfig.js';

const keepAnimationMixins = getKeepAnimationMixins();
var _Submenu = defineComponent({
  name: "LSubmenu",
  components: {
    FakeArrow
  },
  directives: {
    ripple: Ripple
  },
  mixins: [keepAnimationMixins],
  props: SubMenuProps,
  setup(props2) {
    const menu = inject("LdMenu");
    const {
      theme,
      activeValues,
      expandValues,
      mode,
      isHead,
      open
    } = menu;
    const submenu = inject("LdSubmenu", null);
    const classPrefix = usePrefixClass();
    const isActive = computed(() => activeValues.value.includes(props2.value));
    const popupVisible = ref(false);
    const rippleColor = computed(() => theme.value === "light" ? "#E7E7E7" : "#383838");
    const isOpen = computed(() => {
      if (mode.value === "popup") return popupVisible.value;
      return expandValues ? expandValues.value.includes(props2.value) : false;
    });
    const isNested = ref(false);
    const classes = computed(() => [`${classPrefix.value}-submenu`, {
      [`${classPrefix.value}-is-disabled`]: props2.disabled,
      [`${classPrefix.value}-is-opened`]: isOpen.value
    }]);
    const popupClass = computed(() => [`${classPrefix.value}-menu__popup`, {
      [`${classPrefix.value}-is-opened`]: popupVisible.value,
      [`${classPrefix.value}-is-vertical`]: !isHead
    }]);
    const submenuClass = computed(() => [`${classPrefix.value}-menu__item`, {
      [`${classPrefix.value}-is-disabled`]: props2.disabled,
      [`${classPrefix.value}-is-opened`]: isOpen.value,
      [`${classPrefix.value}-is-active`]: isActive.value
    }]);
    const subClass = computed(() => [`${classPrefix.value}-menu__sub`, {
      [`${classPrefix.value}-is-opened`]: isOpen.value
    }]);
    const arrowClass = computed(() => [{
      [`${classPrefix.value}-fake-arrow--active`]: isOpen.value
    }]);
    const handleMouseEnter = () => {
      if (props2.disabled) return;
      popupVisible.value = true;
    };
    const handleMouseLeave = () => {
      popupVisible.value = false;
    };
    const handleSubmenuItemClick = () => {
      if (props2.disabled) return;
      open(props2.value);
    };
    watch(popupVisible, visible => {
      menu.open(props2.value, visible ? "add" : "remove");
    });
    provide("LdSubmenu", {
      value: props2.value
    });
    onMounted(() => {
      var _menu$vMenu, _instance$parent$vnod;
      menu === null || menu === void 0 ? void 0 : (_menu$vMenu = menu.vMenu) === null || _menu$vMenu === void 0 ? void 0 : _menu$vMenu.add({
        value: props2.value,
        parent: submenu === null || submenu === void 0 ? void 0 : submenu.value
      });
      const instance = getCurrentInstance();
      isNested.value = /submenu/i.test((_instance$parent$vnod = instance.parent.vnode) === null || _instance$parent$vnod === void 0 ? void 0 : _instance$parent$vnod.tag);
    });
    return {
      mode,
      isHead,
      isNested,
      classes,
      subClass,
      arrowClass,
      popupClass,
      submenuClass,
      rippleColor,
      handleMouseEnter,
      handleMouseLeave,
      handleSubmenuItemClick,
      classPrefix
    };
  },
  methods: {
    renderHeadSubmenu() {
      const h = this.$createElement;
      const rippleVal = this.keepAnimation.ripple ? this.rippleColor : false;
      const normalSubmenu = [h("div", {
        "directives": [{
          name: "ripple",
          value: rippleVal
        }],
        "class": this.submenuClass,
        "on": {
          "click": this.handleSubmenuItemClick
        }
      }, [renderLNodeJSX(this, "title")]), h("ul", {
        "style": "opacity: 0; width: 0; height: 0; overflow: hidden"
      }, [renderContent(this, "default", "content")])];
      const popupSubmenu = [h("div", {
        "class": this.submenuClass
      }, [renderLNodeJSX(this, "title"), h("fake-arrow", {
        "attrs": {
          "overlayClassName": this.arrowClass,
          "overlayStyle": {
            transform: `rotate(${this.isNested ? -90 : 0}deg)`
          }
        }
      })]), h("div", {
        "ref": "popup",
        "class": this.popupClass
      }, [h("ul", {
        "ref": "popupInner",
        "class": `${this.classPrefix}-menu__popup-wrapper`
      }, [renderContent(this, "default", "content")])])];
      return this.mode === "normal" ? normalSubmenu : popupSubmenu;
    },
    renderSubmenu() {
      var _this$$parent$$vnode;
      const h = this.$createElement;
      const hasContent = this.$slots.content || this.$slots.default;
      const icon = renderLNodeJSX(this, "icon");
      const child = renderContent(this, "default", "content");
      let paddingLeft = 44;
      if (/submenu/i.test((_this$$parent$$vnode = this.$parent.$vnode) === null || _this$$parent$$vnode === void 0 ? void 0 : _this$$parent$$vnode.tag)) paddingLeft += 16;
      const needRotate = this.mode === "popup";
      const rippleVal = this.keepAnimation.ripple ? this.rippleColor : false;
      const normalSubmenu = [h("div", {
        "directives": [{
          name: "ripple",
          value: rippleVal
        }],
        "class": this.submenuClass,
        "on": {
          "click": this.handleSubmenuItemClick
        }
      }, [icon, h("span", {
        "class": [`${this.classPrefix}-menu__content`]
      }, [renderLNodeJSX(this, "title")]), hasContent && h("fake-arrow", {
        "attrs": {
          "overlayClassName": this.arrowClass,
          "overlayStyle": {
            transform: `rotate(${needRotate ? -90 : 0}deg)`
          }
        }
      })]), h("ul", {
        "attrs": {
          "level": this.level
        },
        "class": this.subClass,
        "style": {
          "--padding-left": `${paddingLeft}px`
        }
      }, [child])];
      const popupSubmenu = [h("div", {
        "class": this.submenuClass
      }, [icon, h("span", {
        "class": [`${this.classPrefix}-menu__content`]
      }, [renderLNodeJSX(this, "title")]), h("fake-arrow", {
        "attrs": {
          "overlayClassName": this.arrowClass,
          "overlayStyle": {
            transform: `rotate(${needRotate ? -90 : 0}deg)`
          }
        }
      })]), h("div", {
        "ref": "popup",
        "class": this.popupClass
      }, [h("ul", {
        "ref": "popupInner",
        "class": `${this.classPrefix}-menu__popup-wrapper`
      }, [child])])];
      return this.mode === "normal" ? normalSubmenu : popupSubmenu;
    }
  },
  render() {
    const h = arguments[0];
    let child = null;
    let events = {};
    if (this.mode === "popup") {
      events = {
        mouseenter: this.handleMouseEnter,
        mouseleave: this.handleMouseLeave
      };
    }
    if (Object.keys(this.$slots).length > 0) child = this.isHead ? this.renderHeadSubmenu() : this.renderSubmenu();
    return h("li", {
      "class": this.classes,
      "on": {
        ...events
      }
    }, [child]);
  }
});

export { _Submenu as default };
//# sourceMappingURL=sub-menu.js.map
