import { defineComponent as F, ref as z, computed as c, unref as u, watch as M, nextTick as U, onMounted as _, onUnmounted as q, openBlock as a, createBlock as f, mergeProps as x, createSlots as H, withCtx as p, createElementVNode as t, normalizeStyle as V, normalizeClass as k, createElementBlock as w, Fragment as B, renderList as J, toDisplayString as g, renderSlot as E, createTextVNode as S, createCommentVNode as K } from "vue";
import O from "@ant-design/icons-vue";
import { Tooltip as D } from "@aplus-frontend/antdv";
import { omit as Q } from "lodash-unified";
import "../../config-provider/index.mjs";
import { useToken as X } from "../../config-provider/hooks/use-token.mjs";
import "../../hooks/index.mjs";
import { useDevWarning as Y } from "../../utils/warning.mjs";
import "./ap-tag.vue2.mjs";
import Z from "./style/group.mjs";
import { getTextWidth as G } from "./utils.mjs";
import { useLocale as ee } from "../../config-provider/hooks/use-locale.mjs";
import { useNamespace as te } from "../../config-provider/hooks/use-namespace.mjs";
import { useResize as le } from "../../hooks/useResize.mjs";
import oe from "./ap-tag.vue.mjs";
const ke = /* @__PURE__ */ F({
  __name: "ap-tag-group",
  props: {
    list: { default: () => [] },
    space: { default: 4 },
    ellipsisColor: {},
    ellipsis: { default: () => ({ isWrapGroup: !0 }) }
  },
  setup(r) {
    const { t: P } = ee(), o = r, { token: $ } = X(), N = Y("ApTagGroup"), { b: v } = te("tag-group"), R = Z("tag-group"), s = z(), { observe: j, unobserve: I } = le(), i = c(() => ({
      ...{
        iconColor: $.value?.textColor1,
        symbol: "icon",
        text: P("ap.common.more")
      },
      ...o.ellipsis
    })), C = c(() => i.value.tooltip && typeof i.value.tooltip == "object" ? Q(i.value.tooltip, ["trigger", "title"]) : {}), d = c(() => u(y) < o.list.length), y = z(0), W = c(() => o.list.map((e) => e.text).join("、")), L = c(() => [v(), R.value].filter(Boolean)), b = () => {
      let e = 0, l = 0;
      if (!s.value) return;
      const m = s.value.offsetWidth;
      for (let n of o.list) {
        const h = n.size === "small" ? 8 : 12, T = G(
          n.size === "large" ? 14 : 12,
          n.text
        ) + h + o.space;
        if (e += T, e > m) {
          e -= T;
          break;
        }
        l++;
      }
      if (l < o.list.length) {
        const h = G(12, i.value.text);
        o.ellipsis.symbol === "icon" ? e += 16 : e += h, e > m && l--;
      }
      y.value = l;
    };
    M(
      () => o.list,
      (e, l) => {
        e !== l && U(() => {
          b();
        });
      },
      {
        immediate: !0
      }
    );
    const A = () => {
      b();
    };
    return _(() => {
      [["ellipsisColor", "ellipse.color"]].forEach(
        ([e, l]) => {
          N.deprecated(
            !o[e],
            e,
            l
          );
        }
      ), s.value && j(s.value, A);
    }), q(() => {
      s.value && I(s.value);
    }), (e, l) => (a(), f(u(D), x({ trigger: "hover" }, C.value), H({
      default: p(() => [
        t("div", {
          ref_key: "container",
          ref: s,
          class: k(L.value),
          style: V({
            pointerEvents: d.value ? "auto" : "none"
            // opacity: isUpdating ? '0' : '1'
          })
        }, [
          (a(!0), w(B, null, J(r.list, (m, n) => (a(), f(oe, x({ ref_for: !0 }, m, {
            key: n,
            style: {
              display: n >= y.value ? "none" : "inline-flex",
              marginRight: `${r.space}px`
            }
          }), null, 16, ["style"]))), 128)),
          d.value && i.value.symbol === "icon" ? (a(), f(u(O), {
            key: 0,
            style: V({
              color: r.ellipsisColor || i.value.iconColor,
              cursor: "pointer"
            })
          }, {
            component: p(() => [...l[0] || (l[0] = [
              t("svg", {
                xmlns: "http://www.w3.org/2000/svg",
                "xmlns:xlink": "http://www.w3.org/1999/xlink",
                fill: "none",
                version: "1.1",
                width: "16",
                height: "16",
                viewBox: "0 0 16 16"
              }, [
                t("defs", null, [
                  t("clipPath", { id: "master_svg0_1133_24991" }, [
                    t("rect", {
                      x: "0",
                      y: "0",
                      width: "16",
                      height: "16",
                      rx: "0"
                    })
                  ])
                ]),
                t("g", { "clip-path": "url(#master_svg0_1133_24991)" }, [
                  t("g", null, [
                    t("ellipse", {
                      cx: "8",
                      cy: "8",
                      rx: "1",
                      ry: "1",
                      fill: "currentColor",
                      "fill-opacity": "1"
                    })
                  ]),
                  t("g", null, [
                    t("ellipse", {
                      cx: "3.25",
                      cy: "8",
                      rx: "1",
                      ry: "1",
                      fill: "currentColor",
                      "fill-opacity": "1"
                    })
                  ]),
                  t("g", null, [
                    t("ellipse", {
                      cx: "12.75",
                      cy: "8",
                      rx: "1",
                      ry: "1",
                      fill: "currentColor",
                      "fill-opacity": "1"
                    })
                  ])
                ])
              ], -1)
            ])]),
            _: 1
          }, 8, ["style"])) : d.value && i.value.symbol === "text" ? (a(), w(B, { key: 1 }, [
            r.ellipsis.isWrapGroup ? (a(), w("span", {
              key: 0,
              class: k(u(v)("ellipsis-text")),
              style: { cursor: "pointer" }
            }, g(i.value.text), 3)) : (a(), f(u(D), x({
              key: 1,
              trigger: "hover"
            }, C.value), {
              title: p(() => [
                E(e.$slots, "tooltip", { tags: r.list }, () => [
                  S(g(W.value), 1)
                ])
              ]),
              default: p(() => [
                t("span", {
                  class: k(u(v)("ellipsis-text")),
                  style: { cursor: "pointer" }
                }, g(i.value.text), 3)
              ]),
              _: 3
            }, 16))
          ], 64)) : K("", !0)
        ], 6)
      ]),
      _: 2
    }, [
      r.ellipsis.isWrapGroup ? {
        name: "title",
        fn: p(() => [
          E(e.$slots, "tooltip", { tags: r.list }, () => [
            S(g(W.value), 1)
          ])
        ]),
        key: "0"
      } : void 0
    ]), 1040));
  }
});
export {
  ke as default
};
