import { defineComponent, useAttrs, ref, computed, watch, resolveComponent, createBlock, openBlock, mergeProps, unref, withCtx, renderSlot, createElementBlock, Fragment, renderList, createCommentVNode, createVNode } from 'vue';
import '../../../utils/index.mjs';
import { avatarGroupProps } from './avatar.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlAvatarGroup" },
  __name: "avatar-group",
  props: avatarGroupProps,
  emits: ["click", "mouseenter", "mouseleave"],
  setup(__props, { emit: __emit }) {
    const attrs = useAttrs();
    const props = __props;
    const emits = __emit;
    const bem = createNamespace("avatar-group");
    const avatarKey = ref(0);
    const isHovered = ref(false);
    const handleHover = (v, index) => {
      emits(v ? "mouseenter" : "mouseleave");
      if (getIndex.value !== -1 && index > getIndex.value) {
        return;
      }
      if (props.useHover) {
        isHovered.value = v;
      } else {
        isHovered.value = false;
      }
    };
    const dynamicSpace = computed(() => {
      return isHovered.value ? 0 : props.avatarSpace;
    });
    const handleAvatarClick = (item, value, index) => {
      emits("click", item, value, index);
    };
    const filterAtt = (item) => {
      const newItem = { ...item };
      delete newItem.tooltip;
      delete newItem.backgroundColor;
      delete newItem.value;
      delete newItem.borderColor;
      delete newItem.color;
      return newItem;
    };
    const getIndex = computed(() => {
      if (0 < props.maxCount && props.maxCount <= props.groupList.length) {
        return props.maxCount - 1;
      }
      return -1;
    });
    watch([() => attrs.size, () => attrs.shape], () => {
      avatarKey.value++;
    });
    return (_ctx, _cache) => {
      const _component_ll_avatar = resolveComponent("ll-avatar");
      const _component_ll_tooltip = resolveComponent("ll-tooltip");
      const _component_a_avatar_group = resolveComponent("a-avatar-group");
      return openBlock(), createBlock(_component_a_avatar_group, mergeProps(unref(attrs), {
        key: avatarKey.value,
        class: [unref(bem).b()],
        "max-count": _ctx.maxCount,
        "max-style": _ctx.maxStyly ? _ctx.maxStyly : { "background-color": _ctx.moreBg, color: _ctx.moreColor }
      }), {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, () => [
            (openBlock(true), createElementBlock(
              Fragment,
              null,
              renderList(_ctx.groupList, (item, index) => {
                return openBlock(), createElementBlock(
                  Fragment,
                  { key: index },
                  [
                    createCommentVNode(" \u5E26\u6587\u5B57\u63D0\u793A "),
                    item.tooltip ? (openBlock(), createBlock(_component_ll_tooltip, {
                      key: 0,
                      tip: item.tooltip,
                      "container-style": {
                        ...index !== 0 && (index <= getIndex.value || !props.maxCount || props.maxCount > _ctx.groupList.length) ? { "margin-inline-start": dynamicSpace.value + "px" } : {},
                        ...index === getIndex.value ? { "margin-inline-end": dynamicSpace.value + 8 + "px" } : {}
                      },
                      onMouseenter: ($event) => handleHover(true, index),
                      onMouseleave: _cache[0] || (_cache[0] = ($event) => handleHover(false, -1))
                    }, {
                      default: withCtx(() => [
                        createVNode(_component_ll_avatar, mergeProps({ ref_for: true }, filterAtt(item), {
                          src: item.value,
                          icon: item.value,
                          text: item.value,
                          "icon-color": item.color,
                          style: {
                            "background-color": item.backgroundColor,
                            "border-color": item.borderColor,
                            color: item.color
                          },
                          onClick: ($event) => handleAvatarClick(item, item.value, index)
                        }), null, 16, ["src", "icon", "text", "icon-color", "style", "onClick"])
                      ]),
                      _: 2
                      /* DYNAMIC */
                    }, 1032, ["tip", "container-style", "onMouseenter"])) : (openBlock(), createBlock(_component_ll_avatar, mergeProps({
                      key: 1,
                      ref_for: true
                    }, filterAtt(item), {
                      src: item.value,
                      icon: item.value,
                      text: item.value,
                      "icon-color": item.color,
                      style: {
                        "background-color": item.backgroundColor,
                        "border-color": item.borderColor,
                        color: item.color,
                        ...index !== 0 && (index <= getIndex.value || !props.maxCount || props.maxCount > _ctx.groupList.length) ? { "margin-inline-start": dynamicSpace.value + "px" } : {},
                        ...index === getIndex.value ? { "margin-inline-end": dynamicSpace.value + 8 + "px" } : {}
                      },
                      onClick: ($event) => handleAvatarClick(item, item.value, index),
                      onMouseenter: ($event) => handleHover(true, index),
                      onMouseleave: _cache[1] || (_cache[1] = ($event) => handleHover(false, -1))
                    }), null, 16, ["src", "icon", "text", "icon-color", "style", "onClick", "onMouseenter"]))
                  ],
                  64
                  /* STABLE_FRAGMENT */
                );
              }),
              128
              /* KEYED_FRAGMENT */
            ))
          ])
        ]),
        _: 3
        /* FORWARDED */
      }, 16, ["class", "max-count", "max-style"]);
    };
  }
});

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