/**
 * tdesign v0.39.1-alpha.1
 * (c) 2022 tdesign
 * @license MIT
 */

'use strict';

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

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var VueCompositionAPI = require('@vue/composition-api');
var config = require('../config.js');
var menu_submenuProps = require('./submenu-props.js');
var utils_renderTnode = require('../utils/render-tnode.js');
var commonComponents_fakeArrow = require('../common-components/fake-arrow.js');
var utils_ripple = require('../utils/ripple.js');
var configProvider_configReceiver = require('../config-provider/config-receiver.js');
require('@babel/runtime/helpers/typeof');
require('vue');
require('lodash/isObject');
require('../_common/js/utils/set-style.js');
require('lodash/mergeWith');
require('../config-provider/context.js');
require('lodash/merge');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/zh_CN.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);

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__default["default"](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 = configProvider_configReceiver.getKeepAnimationMixins();
var _Submenu = VueCompositionAPI.defineComponent({
  name: "TSubmenu",
  components: {
    FakeArrow: commonComponents_fakeArrow["default"]
  },
  mixins: [keepAnimationMixins],
  directives: {
    ripple: utils_ripple["default"]
  },
  props: menu_submenuProps["default"],
  setup: function setup(props2, ctx) {
    var menu = VueCompositionAPI.inject("TdMenu");
    var theme = menu.theme,
        activeValues = menu.activeValues,
        expandValues = menu.expandValues,
        mode = menu.mode,
        isHead = menu.isHead,
        open = menu.open;
    var submenu = VueCompositionAPI.inject("TdSubmenu", null);
    var isActive = VueCompositionAPI.computed(function () {
      return activeValues.value.indexOf(props2.value) > -1;
    });
    var popupVisible = VueCompositionAPI.ref(false);
    var rippleColor = VueCompositionAPI.computed(function () {
      return theme.value === "light" ? "#E7E7E7" : "#383838";
    });
    var isOpen = VueCompositionAPI.computed(function () {
      if (mode.value === "popup") {
        return popupVisible.value;
      }

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

      return ["".concat(config.prefix, "-submenu"), (_ref = {}, _defineProperty__default["default"](_ref, "".concat(config.prefix, "-is-disabled"), props2.disabled), _defineProperty__default["default"](_ref, "".concat(config.prefix, "-is-opened"), isOpen.value), _ref)];
    });
    var popupClass = VueCompositionAPI.computed(function () {
      var _ref2;

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

      return ["".concat(config.prefix, "-menu__item"), (_ref3 = {}, _defineProperty__default["default"](_ref3, "".concat(config.prefix, "-is-disabled"), props2.disabled), _defineProperty__default["default"](_ref3, "".concat(config.prefix, "-is-opened"), isOpen.value), _defineProperty__default["default"](_ref3, "".concat(config.prefix, "-is-active"), isActive.value), _ref3)];
    });
    var subClass = VueCompositionAPI.computed(function () {
      return ["".concat(config.prefix, "-menu__sub"), _defineProperty__default["default"]({}, "".concat(config.prefix, "-is-opened"), isOpen.value)];
    });
    var arrowClass = VueCompositionAPI.computed(function () {
      return [_defineProperty__default["default"]({}, "".concat(config.prefix, "-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);
    };

    VueCompositionAPI.watch(popupVisible, function (visible) {
      menu.open(props2.value, visible ? "add" : "remove");
    });
    VueCompositionAPI.provide("TdSubmenu", {
      value: props2.value
    });
    VueCompositionAPI.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 = 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);

      if (ctx.refs.popup) {
        var rect = ctx.refs.popupInner.getBoundingClientRect();
        var $popup = ctx.refs.popup;
        $popup.style.setProperty("--popup-max-height", "".concat(rect.height, "px"));
        $popup.style.setProperty("--popup-width", "".concat(rect.width, "px"));
      }
    });
    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
    };
  },
  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
        }
      }, [utils_renderTnode.renderTNodeJSX(this, "title")]), h("ul", {
        "style": "opacity: 0; width: 0; height: 0; overflow: hidden"
      }, [utils_renderTnode.renderContent(this, "default", "content")])];
      var popupSubmenu = [h("div", {
        "class": this.submenuClass
      }, [utils_renderTnode.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(config.prefix, "-menu__popup-wrapper")
      }, [utils_renderTnode.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 = utils_renderTnode.renderTNodeJSX(this, "icon");
      var child = utils_renderTnode.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" && this.isNested;
      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(config.prefix, "-menu__content")]
      }, [utils_renderTnode.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(config.prefix, "-menu__content")]
      }, [utils_renderTnode.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(config.prefix, "-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]);
  }
});

exports["default"] = _Submenu;
//# sourceMappingURL=submenu.js.map
