/**
 * tdesign v0.46.4
 * (c) 2022 tdesign
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, inject, computed, ref, watch, provide, onMounted, getCurrentInstance } from '@vue/composition-api';
import props from './submenu-props.js';
import { renderTNodeJSX, renderContent } from '../utils/render-tnode.js';
import FakeArrow from '../common-components/fake-arrow.js';
import Ripple from '../utils/ripple.js';
import { getKeepAnimationMixins } from '../config-provider/config-receiver.js';
import { usePrefixClass } from '../hooks/useConfig.js';
import '@babel/runtime/helpers/typeof';
import 'vue';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../utils/mixins.js';
import '../_common/js/utils/set-style.js';
import '../config.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import 'lodash/merge';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../config-provider/type.js';
import '../config-provider/useConfig.js';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var keepAnimationMixins = getKeepAnimationMixins();
var _Submenu = defineComponent({
  name: "TSubmenu",
  components: {
    FakeArrow: FakeArrow
  },
  mixins: [keepAnimationMixins],
  directives: {
    ripple: Ripple
  },
  props: props,
  setup: function setup(props2) {
    var menu = inject("TdMenu");
    var theme = menu.theme,
        activeValues = menu.activeValues,
        expandValues = menu.expandValues,
        mode = menu.mode,
        isHead = menu.isHead,
        open = menu.open;
    var submenu = inject("TdSubmenu", null);
    var classPrefix = usePrefixClass();
    var isActive = computed(function () {
      return activeValues.value.indexOf(props2.value) > -1;
    });
    var popupVisible = ref(false);
    var rippleColor = computed(function () {
      return theme.value === "light" ? "#E7E7E7" : "#383838";
    });
    var isOpen = computed(function () {
      if (mode.value === "popup") {
        return popupVisible.value;
      }

      return expandValues ? expandValues.value.includes(props2.value) : false;
    });
    var isNested = ref(false);
    var classes = computed(function () {
      var _ref;

      return ["".concat(classPrefix.value, "-submenu"), (_ref = {}, _defineProperty(_ref, "".concat(classPrefix.value, "-is-disabled"), props2.disabled), _defineProperty(_ref, "".concat(classPrefix.value, "-is-opened"), isOpen.value), _ref)];
    });
    var popupClass = computed(function () {
      var _ref2;

      return ["".concat(classPrefix.value, "-menu__popup"), (_ref2 = {}, _defineProperty(_ref2, "".concat(classPrefix.value, "-is-opened"), popupVisible.value), _defineProperty(_ref2, "".concat(classPrefix.value, "-is-vertical"), !isHead), _ref2)];
    });
    var submenuClass = computed(function () {
      var _ref3;

      return ["".concat(classPrefix.value, "-menu__item"), (_ref3 = {}, _defineProperty(_ref3, "".concat(classPrefix.value, "-is-disabled"), props2.disabled), _defineProperty(_ref3, "".concat(classPrefix.value, "-is-opened"), isOpen.value), _defineProperty(_ref3, "".concat(classPrefix.value, "-is-active"), isActive.value), _ref3)];
    });
    var subClass = computed(function () {
      return ["".concat(classPrefix.value, "-menu__sub"), _defineProperty({}, "".concat(classPrefix.value, "-is-opened"), isOpen.value)];
    });
    var arrowClass = computed(function () {
      return [_defineProperty({}, "".concat(classPrefix.value, "-fake-arrow--active"), isOpen.value)];
    });

    var handleMouseEnter = function handleMouseEnter() {
      if (props2.disabled) return;
      popupVisible.value = true;
    };

    var handleMouseLeave = function handleMouseLeave() {
      popupVisible.value = false;
    };

    var handleSubmenuItemClick = function handleSubmenuItemClick() {
      if (props2.disabled) return;
      open(props2.value);
    };

    watch(popupVisible, function (visible) {
      menu.open(props2.value, visible ? "add" : "remove");
    });
    provide("TdSubmenu", {
      value: props2.value
    });
    onMounted(function () {
      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
      });
      var 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: mode,
      isHead: isHead,
      isNested: isNested,
      classes: classes,
      subClass: subClass,
      arrowClass: arrowClass,
      popupClass: popupClass,
      submenuClass: submenuClass,
      rippleColor: rippleColor,
      handleMouseEnter: handleMouseEnter,
      handleMouseLeave: handleMouseLeave,
      handleSubmenuItemClick: handleSubmenuItemClick,
      classPrefix: classPrefix
    };
  },
  methods: {
    renderHeadSubmenu: function renderHeadSubmenu() {
      var h = this.$createElement;
      var rippleVal = this.keepAnimation.ripple ? this.rippleColor : false;
      var normalSubmenu = [h("div", {
        "directives": [{
          name: "ripple",
          value: rippleVal
        }],
        "class": this.submenuClass,
        "on": {
          "click": this.handleSubmenuItemClick
        }
      }, [renderTNodeJSX(this, "title")]), h("ul", {
        "style": "opacity: 0; width: 0; height: 0; overflow: hidden"
      }, [renderContent(this, "default", "content")])];
      var popupSubmenu = [h("div", {
        "class": this.submenuClass
      }, [renderTNodeJSX(this, "title"), h("fake-arrow", {
        "attrs": {
          "overlayClassName": this.arrowClass,
          "overlayStyle": {
            transform: "rotate(".concat(this.isNested ? -90 : 0, "deg)")
          }
        }
      })]), h("div", {
        "ref": "popup",
        "class": this.popupClass
      }, [h("ul", {
        "ref": "popupInner",
        "class": "".concat(this.classPrefix, "-menu__popup-wrapper")
      }, [renderContent(this, "default", "content")])])];
      return this.mode === "normal" ? normalSubmenu : popupSubmenu;
    },
    renderSubmenu: function renderSubmenu() {
      var _this$$parent$$vnode;

      var h = this.$createElement;
      var hasContent = this.$slots.content || this.$slots["default"];
      var icon = renderTNodeJSX(this, "icon");
      var child = renderContent(this, "default", "content");
      var 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;
      }

      var needRotate = this.mode === "popup";
      var rippleVal = this.keepAnimation.ripple ? this.rippleColor : false;
      var normalSubmenu = [h("div", {
        "directives": [{
          name: "ripple",
          value: rippleVal
        }],
        "class": this.submenuClass,
        "on": {
          "click": this.handleSubmenuItemClick
        }
      }, [icon, h("span", {
        "class": ["".concat(this.classPrefix, "-menu__content")]
      }, [renderTNodeJSX(this, "title")]), hasContent && h("fake-arrow", {
        "attrs": {
          "overlayClassName": this.arrowClass,
          "overlayStyle": {
            transform: "rotate(".concat(needRotate ? -90 : 0, "deg)")
          }
        }
      })]), h("ul", {
        "attrs": {
          "level": this.level
        },
        "class": this.subClass,
        "style": {
          "--padding-left": "".concat(paddingLeft, "px")
        }
      }, [child])];
      var popupSubmenu = [h("div", {
        "class": this.submenuClass
      }, [icon, h("span", {
        "class": ["".concat(this.classPrefix, "-menu__content")]
      }, [renderTNodeJSX(this, "title")]), h("fake-arrow", {
        "attrs": {
          "overlayClassName": this.arrowClass,
          "overlayStyle": {
            transform: "rotate(".concat(needRotate ? -90 : 0, "deg)")
          }
        }
      })]), h("div", {
        "ref": "popup",
        "class": this.popupClass
      }, [h("ul", {
        "ref": "popupInner",
        "class": "".concat(this.classPrefix, "-menu__popup-wrapper")
      }, [child])])];
      return this.mode === "normal" ? normalSubmenu : popupSubmenu;
    }
  },
  render: function render() {
    var h = arguments[0];
    var child = null;
    var 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": _objectSpread({}, events)
    }, [child]);
  }
});

export { _Submenu as default };
//# sourceMappingURL=submenu.js.map
