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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var VueCompositionAPI = require('@vue/composition-api');
var utils_renderNode = require('../../utils/render-node.js');
var components_common_fakeArrow = require('../common/fake-arrow.js');
var utils_ripple = require('../../utils/ripple.js');
var components_configProvider_configReceiver = require('../config-provider/config-receiver.js');
var hooks_useConfig = require('../../hooks/use-config.js');
var components_menu_props = require('./props.js');
require('vue');
require('lodash');
require('../../utils/mixins.js');
require('../../chunks/set-style.js');
require('../../config.js');
require('lodash/mergeWith');
require('../config-provider/context.js');
require('../../chunks/zh_CN.js');
require('../config-provider/useConfig.js');

const keepAnimationMixins = components_configProvider_configReceiver.getKeepAnimationMixins();
var _Submenu = VueCompositionAPI.defineComponent({
  name: "LSubmenu",
  components: {
    FakeArrow: components_common_fakeArrow["default"]
  },
  directives: {
    ripple: utils_ripple["default"]
  },
  mixins: [keepAnimationMixins],
  props: components_menu_props.SubMenuProps,
  setup(props2) {
    const menu = VueCompositionAPI.inject("LdMenu");
    const {
      theme,
      activeValues,
      expandValues,
      mode,
      isHead,
      open
    } = menu;
    const submenu = VueCompositionAPI.inject("LdSubmenu", null);
    const classPrefix = hooks_useConfig.usePrefixClass();
    const isActive = VueCompositionAPI.computed(() => activeValues.value.includes(props2.value));
    const popupVisible = VueCompositionAPI.ref(false);
    const rippleColor = VueCompositionAPI.computed(() => theme.value === "light" ? "#E7E7E7" : "#383838");
    const isOpen = VueCompositionAPI.computed(() => {
      if (mode.value === "popup") return popupVisible.value;
      return expandValues ? expandValues.value.includes(props2.value) : false;
    });
    const isNested = VueCompositionAPI.ref(false);
    const classes = VueCompositionAPI.computed(() => [`${classPrefix.value}-submenu`, {
      [`${classPrefix.value}-is-disabled`]: props2.disabled,
      [`${classPrefix.value}-is-opened`]: isOpen.value
    }]);
    const popupClass = VueCompositionAPI.computed(() => [`${classPrefix.value}-menu__popup`, {
      [`${classPrefix.value}-is-opened`]: popupVisible.value,
      [`${classPrefix.value}-is-vertical`]: !isHead
    }]);
    const submenuClass = VueCompositionAPI.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 = VueCompositionAPI.computed(() => [`${classPrefix.value}-menu__sub`, {
      [`${classPrefix.value}-is-opened`]: isOpen.value
    }]);
    const arrowClass = VueCompositionAPI.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);
    };
    VueCompositionAPI.watch(popupVisible, visible => {
      menu.open(props2.value, visible ? "add" : "remove");
    });
    VueCompositionAPI.provide("LdSubmenu", {
      value: props2.value
    });
    VueCompositionAPI.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 = VueCompositionAPI.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
        }
      }, [utils_renderNode.renderLNodeJSX(this, "title")]), h("ul", {
        "style": "opacity: 0; width: 0; height: 0; overflow: hidden"
      }, [utils_renderNode.renderContent(this, "default", "content")])];
      const popupSubmenu = [h("div", {
        "class": this.submenuClass
      }, [utils_renderNode.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`
      }, [utils_renderNode.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 = utils_renderNode.renderLNodeJSX(this, "icon");
      const child = utils_renderNode.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`]
      }, [utils_renderNode.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`]
      }, [utils_renderNode.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]);
  }
});

exports["default"] = _Submenu;
//# sourceMappingURL=sub-menu.js.map
