import { defineComponent, ref, computed, watch, resolveComponent, createElementBlock, openBlock, normalizeClass, createCommentVNode, createBlock, Fragment, renderList, unref, mergeProps, withCtx, createElementVNode, createVNode, renderSlot } from 'vue';
import '../../../utils/index.mjs';
import '../../index.mjs';
import { operateIconEmits, operateIconProps } from './operate-icon.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';
import { LlIconBase } from '../../icon-base/index.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "LlOperateIcon"
  },
  __name: "operate-icon",
  props: operateIconProps,
  emits: operateIconEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const showIconList = ref([]);
    const modalIconList = ref([]);
    const dropdownOpen = ref(false);
    const defaultList = ref([
      // 默认的icon列表
      {
        iconType: computed(() => props.iconType || "primary"),
        // default默认为灰色
        isShowContainer: false,
        // 是否显示icon容器
        iconName: "icon-edit",
        tooltipTitle: "\u7F16\u8F91",
        disabled: props.disabled,
        onClick: (e, data) => {
          emits("edit", e, data);
        }
      },
      {
        iconType: computed(() => props.iconType || "primary"),
        // default默认为灰色
        isShowContainer: false,
        // 是否显示icon容器
        iconName: "icon-delete",
        tooltipTitle: "\u5220\u9664",
        disabled: props.disabled,
        onClick: (e, data) => {
          emits("delete", e, data);
        }
      }
    ]);
    const bem = createNamespace("operate-icon");
    const operateIconClass = computed(() => {
      const isHasDropdown = props.showDropdown && modalIconList.value.length;
      return `${bem.b()} ${isHasDropdown ? bem.m("has-dropdown") : bem.m("no-dropdown")}`;
    });
    const marginButtonClass = (index, length) => {
      return index < length ? "margin-tooltip" : "";
    };
    const handleOpenChange = (open) => emits("onDropdownOpenChange", open);
    const handleDropdownOpenChange = (open) => {
      dropdownOpen.value = open;
      handleOpenChange(open);
    };
    const handleDropdownParentClick = () => {
      dropdownOpen.value = false;
      handleOpenChange(false);
    };
    const closeDropdown = () => {
      dropdownOpen.value = false;
    };
    watch(
      () => [props.list, props.showDropdown],
      (data) => {
        const [newList, showDropdown] = data;
        const list = newList && newList.length ? newList.filter(Boolean).filter((item) => {
          const { isShow, disabled } = item;
          const d = typeof disabled === "function" ? disabled(props.data) : disabled;
          const show = typeof isShow === "function" ? isShow(props.data) : isShow;
          item.disabled = d;
          item.isShow = show;
          return show;
        }) : defaultList.value;
        const length = list.length;
        if (length >= props.showIconLimit && showDropdown) {
          showIconList.value = list.slice(0, props.showIconLimit - 1).map((item) => ({ ...item, isShowTooltip: true }));
          const sliceList = list.slice(props.showIconLimit - 1);
          if (sliceList.length === 1) {
            modalIconList.value = sliceList.map((item) => ({
              ...item,
              isShowTitle: false,
              isShowTooltip: true,
              isShowContainer: false
            }));
          } else {
            modalIconList.value = sliceList.map((item) => ({
              ...item,
              isShowTitle: true
            }));
          }
        } else {
          showIconList.value = list.map((item) => ({
            ...item,
            isShowTooltip: true
          }));
        }
      },
      { immediate: true, deep: true }
    );
    __expose({
      closeDropdown
    });
    return (_ctx, _cache) => {
      const _component_ll_tooltip = resolveComponent("ll-tooltip");
      const _component_a_menu_item = resolveComponent("a-menu-item");
      const _component_a_menu = resolveComponent("a-menu");
      const _component_a_dropdown = resolveComponent("a-dropdown");
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(operateIconClass.value)
        },
        [
          createCommentVNode(" \u663E\u793A\u7684icon "),
          (openBlock(true), createElementBlock(
            Fragment,
            null,
            renderList(showIconList.value, (item, index) => {
              return openBlock(), createBlock(unref(LlIconBase), mergeProps({ ref_for: true }, item, {
                key: item.iconName,
                data: _ctx.data,
                "is-show": Object.keys(item).includes("isShow") ? item.isShow : true,
                "tooltip-class": unref(bem).e(marginButtonClass(index, showIconList.value.length - 1)),
                "tooltip-props": _ctx.tooltipProps
              }), null, 16, ["data", "is-show", "tooltip-class", "tooltip-props"]);
            }),
            128
            /* KEYED_FRAGMENT */
          )),
          modalIconList.value.length === 1 ? (openBlock(true), createElementBlock(
            Fragment,
            { key: 0 },
            renderList(modalIconList.value, (item, index) => {
              return openBlock(), createBlock(unref(LlIconBase), mergeProps({ key: index }, { ref_for: true }, item, {
                data: _ctx.data,
                "tooltip-class": `${unref(bem).e("last-icon")}`,
                "tooltip-props": _ctx.tooltipProps
              }), null, 16, ["data", "tooltip-class", "tooltip-props"]);
            }),
            128
            /* KEYED_FRAGMENT */
          )) : createCommentVNode("v-if", true),
          createCommentVNode(" \u4E0B\u62C9\u63D0\u793A\u7684icon "),
          _ctx.showDropdown && modalIconList.value.length > 1 ? (openBlock(), createBlock(_component_a_dropdown, {
            key: 1,
            "overlay-class-name": `${unref(bem).e("dropdown")} ${props.overlayClassName}`,
            open: dropdownOpen.value,
            trigger: _ctx.trigger,
            "get-popup-container": props.getPopupContainer,
            onOpenChange: handleDropdownOpenChange
          }, {
            overlay: withCtx(() => [
              createVNode(_component_a_menu, { onClick: handleDropdownParentClick }, {
                default: withCtx(() => [
                  renderSlot(_ctx.$slots, "default", {}, () => [
                    (openBlock(true), createElementBlock(
                      Fragment,
                      null,
                      renderList(modalIconList.value, (item) => {
                        return openBlock(), createElementBlock(
                          Fragment,
                          null,
                          [
                            (Object.keys(item).includes("isShow") ? item.isShow : true) ? (openBlock(), createBlock(
                              _component_a_menu_item,
                              {
                                key: item.iconName
                              },
                              {
                                default: withCtx(() => [
                                  createVNode(unref(LlIconBase), mergeProps({ ref_for: true }, item, {
                                    data: _ctx.data,
                                    "icon-name": _ctx.showDropdownItemIcon ? item.iconName : ""
                                  }), null, 16, ["data", "icon-name"])
                                ]),
                                _: 2
                                /* DYNAMIC */
                              },
                              1024
                              /* DYNAMIC_SLOTS */
                            )) : createCommentVNode("v-if", true)
                          ],
                          64
                          /* STABLE_FRAGMENT */
                        );
                      }),
                      256
                      /* UNKEYED_FRAGMENT */
                    ))
                  ])
                ]),
                _: 3
                /* FORWARDED */
              })
            ]),
            default: withCtx(() => [
              createElementVNode(
                "div",
                {
                  class: normalizeClass(unref(bem).e("dropdown-container"))
                },
                [
                  createVNode(
                    _component_ll_tooltip,
                    mergeProps({ title: "\u66F4\u591A" }, _ctx.tooltipProps),
                    {
                      default: withCtx(() => [
                        createVNode(unref(LlIconBase), {
                          "is-show-tooltip": false,
                          "is-show-container": showIconList.value[0] ? showIconList.value[0]?.isShowContainer : true,
                          "icon-type": showIconList.value[0] ? showIconList.value[0]?.iconType : "primary",
                          data: _ctx.data,
                          "icon-name": "icon-more",
                          class: normalizeClass(unref(bem).e("icon-more"))
                        }, null, 8, ["is-show-container", "icon-type", "data", "class"])
                      ]),
                      _: 1
                      /* STABLE */
                    },
                    16
                    /* FULL_PROPS */
                  )
                ],
                2
                /* CLASS */
              )
            ]),
            _: 3
            /* FORWARDED */
          }, 8, ["overlay-class-name", "open", "trigger", "get-popup-container"])) : createCommentVNode("v-if", true)
        ],
        2
        /* CLASS */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=operate-icon.vue2.mjs.map
