'use strict';

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

var vue = require('vue');
require('../../../utils/index.js');
require('../../index.js');
var operateIcon = require('./operate-icon.js');
var createNamespace = require('../../../utils/create-namespace.js');
var index = require('../../icon-base/index.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "LlOperateIcon"
  },
  __name: "operate-icon",
  props: operateIcon.operateIconProps,
  emits: operateIcon.operateIconEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const showIconList = vue.ref([]);
    const modalIconList = vue.ref([]);
    const dropdownOpen = vue.ref(false);
    const defaultList = vue.ref([
      // 默认的icon列表
      {
        iconType: vue.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: vue.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.createNamespace("operate-icon");
    const operateIconClass = vue.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;
    };
    vue.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 = vue.resolveComponent("ll-tooltip");
      const _component_a_menu_item = vue.resolveComponent("a-menu-item");
      const _component_a_menu = vue.resolveComponent("a-menu");
      const _component_a_dropdown = vue.resolveComponent("a-dropdown");
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(operateIconClass.value)
        },
        [
          vue.createCommentVNode(" \u663E\u793A\u7684icon "),
          (vue.openBlock(true), vue.createElementBlock(
            vue.Fragment,
            null,
            vue.renderList(showIconList.value, (item, index$1) => {
              return vue.openBlock(), vue.createBlock(vue.unref(index.LlIconBase), vue.mergeProps({ ref_for: true }, item, {
                key: item.iconName,
                data: _ctx.data,
                "is-show": Object.keys(item).includes("isShow") ? item.isShow : true,
                "tooltip-class": vue.unref(bem).e(marginButtonClass(index$1, showIconList.value.length - 1)),
                "tooltip-props": _ctx.tooltipProps
              }), null, 16, ["data", "is-show", "tooltip-class", "tooltip-props"]);
            }),
            128
            /* KEYED_FRAGMENT */
          )),
          modalIconList.value.length === 1 ? (vue.openBlock(true), vue.createElementBlock(
            vue.Fragment,
            { key: 0 },
            vue.renderList(modalIconList.value, (item, index$1) => {
              return vue.openBlock(), vue.createBlock(vue.unref(index.LlIconBase), vue.mergeProps({ key: index$1 }, { ref_for: true }, item, {
                data: _ctx.data,
                "tooltip-class": `${vue.unref(bem).e("last-icon")}`,
                "tooltip-props": _ctx.tooltipProps
              }), null, 16, ["data", "tooltip-class", "tooltip-props"]);
            }),
            128
            /* KEYED_FRAGMENT */
          )) : vue.createCommentVNode("v-if", true),
          vue.createCommentVNode(" \u4E0B\u62C9\u63D0\u793A\u7684icon "),
          _ctx.showDropdown && modalIconList.value.length > 1 ? (vue.openBlock(), vue.createBlock(_component_a_dropdown, {
            key: 1,
            "overlay-class-name": `${vue.unref(bem).e("dropdown")} ${props.overlayClassName}`,
            open: dropdownOpen.value,
            trigger: _ctx.trigger,
            "get-popup-container": props.getPopupContainer,
            onOpenChange: handleDropdownOpenChange
          }, {
            overlay: vue.withCtx(() => [
              vue.createVNode(_component_a_menu, { onClick: handleDropdownParentClick }, {
                default: vue.withCtx(() => [
                  vue.renderSlot(_ctx.$slots, "default", {}, () => [
                    (vue.openBlock(true), vue.createElementBlock(
                      vue.Fragment,
                      null,
                      vue.renderList(modalIconList.value, (item) => {
                        return vue.openBlock(), vue.createElementBlock(
                          vue.Fragment,
                          null,
                          [
                            (Object.keys(item).includes("isShow") ? item.isShow : true) ? (vue.openBlock(), vue.createBlock(
                              _component_a_menu_item,
                              {
                                key: item.iconName
                              },
                              {
                                default: vue.withCtx(() => [
                                  vue.createVNode(vue.unref(index.LlIconBase), vue.mergeProps({ ref_for: true }, item, {
                                    data: _ctx.data,
                                    "icon-name": _ctx.showDropdownItemIcon ? item.iconName : ""
                                  }), null, 16, ["data", "icon-name"])
                                ]),
                                _: 2
                                /* DYNAMIC */
                              },
                              1024
                              /* DYNAMIC_SLOTS */
                            )) : vue.createCommentVNode("v-if", true)
                          ],
                          64
                          /* STABLE_FRAGMENT */
                        );
                      }),
                      256
                      /* UNKEYED_FRAGMENT */
                    ))
                  ])
                ]),
                _: 3
                /* FORWARDED */
              })
            ]),
            default: vue.withCtx(() => [
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass(vue.unref(bem).e("dropdown-container"))
                },
                [
                  vue.createVNode(
                    _component_ll_tooltip,
                    vue.mergeProps({ title: "\u66F4\u591A" }, _ctx.tooltipProps),
                    {
                      default: vue.withCtx(() => [
                        vue.createVNode(vue.unref(index.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: vue.normalizeClass(vue.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"])) : vue.createCommentVNode("v-if", true)
        ],
        2
        /* CLASS */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=operate-icon.vue2.js.map
