/**
 * ldesign v0.2.22
 * (c) 2022/12/7 16:21 built by swimly
 * @license MIT
 */

import { defineComponent, h } from '@vue/composition-api';
import { ChevronRightIcon, ChevronLeftIcon } from '@ldesign/icons-vue';
import isFunction from 'lodash/isFunction';
import { Divider } from '../divider/index.js';
import { usePrefixClass } from '../../hooks/useConfig.js';
import { useGlobalIcon } from '../../hooks/useGlobalIcon.js';
import _DropdownItem from './dropdown-item.js';
import { DropdownProps } from './props.js';
import '../../utils/withInstall.js';
import 'vue';
import 'lodash/capitalize';
import '../../config.js';
import '../divider/divider.js';
import '../../utils/render-node.js';
import 'lodash';
import '../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import 'lodash/merge';
import '../../chunks/zh_CN.js';
import '../config-provider/type.js';
import '../../utils/mixins.js';
import '../divider/props.js';
import '../divider/style';
import '../divider/type.js';
import '../config-provider/useConfig.js';
import '../../hooks/lnode.js';
import 'lodash/isEmpty';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../hooks/render-lnode.js';
import '../../utils/helper.js';
import '../../utils/ripple.js';
import '../../chunks/set-style.js';

var _DropdownMenu = defineComponent({
  name: "LDropdownMenu",
  props: {
    ...DropdownProps
  },
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    const dropdownClass = usePrefixClass("dropdown");
    const dropdownMenuClass = usePrefixClass("dropdown__menu");
    const handleItemClick = (optionItem, options) => {
      if (optionItem.disabled || optionItem.children) return;
      const {
        data,
        context
      } = options;
      data?.onClick?.(data, context);
      props.onClick?.(data, context);
      emit("click", data, context);
    };
    return {
      dropdownClass,
      dropdownMenuClass,
      handleItemClick
    };
  },
  methods: {
    renderOptionContent(content) {
      if (isFunction(content)) return content(h);
      return content;
    },
    renderOptions(data) {
      const h = this.$createElement;
      const {
        ChevronRightIcon: ChevronRightIcon$1,
        ChevronLeftIcon: ChevronLeftIcon$1
      } = useGlobalIcon({
        ChevronRightIcon: ChevronRightIcon,
        ChevronLeftIcon: ChevronLeftIcon
      });
      const arr = [];
      let renderContent;
      data.forEach?.((menu, idx) => {
        const optionItem = {
          ...menu
        };
        if (optionItem.children) {
          optionItem.children = this.renderOptions(optionItem.children);
          renderContent = h("div", {
            "key": idx
          }, [h(_DropdownItem, {
            "class": [`${this.dropdownClass}__item`, `${this.dropdownClass}__item--suffix`, optionItem.class],
            "props": {
              ...{
                value: optionItem.value,
                theme: optionItem.theme,
                active: optionItem.active,
                prefixIcon: optionItem.prefixIcon,
                disabled: optionItem.disabled,
                minColumnWidth: this.minColumnWidth,
                maxColumnWidth: this.maxColumnWidth,
                isSubmenu: true
              }
            }
          }, [this.direction === "right" ? h("div", {
            "class": `${this.dropdownClass}__item-content`
          }, [h("span", {
            "class": `${this.dropdownClass}__item-text`
          }, [this.renderOptionContent(optionItem.content)]), h(ChevronRightIcon$1, {
            "class": `${this.dropdownClass}__item-direction`,
            "attrs": {
              "size": "16"
            }
          })]) : h("div", {
            "class": `${this.dropdownClass}__item-content`
          }, [h(ChevronLeftIcon$1, {
            "class": `${this.dropdownClass}__item-direction`,
            "attrs": {
              "size": "16"
            }
          }), h("span", {
            "class": `${this.dropdownClass}__item-text`
          }, [this.renderOptionContent(optionItem.content)])]), h("div", {
            "class": [`${this.dropdownClass}__submenu`, {
              [`${this.dropdownClass}__submenu--disabled`]: optionItem.disabled,
              [`${this.dropdownClass}__submenu--${this.direction}`]: this.direction
            }],
            "style": {
              top: `${idx * 30}px`
            }
          }, [h("ul", [optionItem.children])])]), optionItem.divider ? h(Divider) : null]);
        } else {
          renderContent = h("div", {
            "key": idx
          }, [h(_DropdownItem, {
            "class": [`${this.dropdownClass}__item`, optionItem.class],
            "props": {
              ...{
                value: optionItem.value,
                theme: optionItem.theme,
                active: optionItem.active,
                prefixIcon: optionItem.prefixIcon,
                disabled: optionItem.disabled,
                minColumnWidth: this.minColumnWidth,
                maxColumnWidth: this.maxColumnWidth,
                onClick: (value, context) => this.handleItemClick({
                  disabled: optionItem.disabled,
                  children: optionItem.children
                }, {
                  data: optionItem,
                  context
                })
              }
            }
          }, [h("span", {
            "class": `${this.dropdownClass}__item-text`
          }, [this.renderOptionContent(optionItem.content)])]), optionItem.divider ? h(Divider) : null]);
        }
        arr.push(renderContent);
      });
      return arr;
    }
  },
  render() {
    const h = arguments[0];
    return h("div", {
      "class": [this.dropdownMenuClass, `${this.dropdownMenuClass}--${this.direction}`],
      "style": {
        maxHeight: `${this.maxHeight}px`
      }
    }, [this.renderOptions(this.options)]);
  }
});

export { _DropdownMenu as default };
//# sourceMappingURL=dropdown-menu.js.map
