'use strict';

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

var vue = require('vue');
require('../../../utils/index.js');
var avatar = require('./avatar.js');
var createNamespace = require('../../../utils/create-namespace.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "LlAvatarGroup" },
  __name: "avatar-group",
  props: avatar.avatarGroupProps,
  emits: ["click", "mouseenter", "mouseleave"],
  setup(__props, { emit: __emit }) {
    const attrs = vue.useAttrs();
    const props = __props;
    const emits = __emit;
    const bem = createNamespace.createNamespace("avatar-group");
    const avatarKey = vue.ref(0);
    const isHovered = vue.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 = vue.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 = vue.computed(() => {
      if (0 < props.maxCount && props.maxCount <= props.groupList.length) {
        return props.maxCount - 1;
      }
      return -1;
    });
    vue.watch([() => attrs.size, () => attrs.shape], () => {
      avatarKey.value++;
    });
    return (_ctx, _cache) => {
      const _component_ll_avatar = vue.resolveComponent("ll-avatar");
      const _component_ll_tooltip = vue.resolveComponent("ll-tooltip");
      const _component_a_avatar_group = vue.resolveComponent("a-avatar-group");
      return vue.openBlock(), vue.createBlock(_component_a_avatar_group, vue.mergeProps(vue.unref(attrs), {
        key: avatarKey.value,
        class: [vue.unref(bem).b()],
        "max-count": _ctx.maxCount,
        "max-style": _ctx.maxStyly ? _ctx.maxStyly : { "background-color": _ctx.moreBg, color: _ctx.moreColor }
      }), {
        default: vue.withCtx(() => [
          vue.renderSlot(_ctx.$slots, "default", {}, () => [
            (vue.openBlock(true), vue.createElementBlock(
              vue.Fragment,
              null,
              vue.renderList(_ctx.groupList, (item, index) => {
                return vue.openBlock(), vue.createElementBlock(
                  vue.Fragment,
                  { key: index },
                  [
                    vue.createCommentVNode(" \u5E26\u6587\u5B57\u63D0\u793A "),
                    item.tooltip ? (vue.openBlock(), vue.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: vue.withCtx(() => [
                        vue.createVNode(_component_ll_avatar, vue.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"])) : (vue.openBlock(), vue.createBlock(_component_ll_avatar, vue.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"]);
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=avatar-group.vue2.js.map
