import { defineComponent as P, ref as I, computed as O, openBlock as o, createElementBlock as h, normalizeStyle as T, normalizeClass as d, unref as i, createVNode as b, withCtx as A, createElementVNode as r, Fragment as V, renderList as N, withModifiers as v, renderSlot as u, createCommentVNode as p, createTextVNode as m, toDisplayString as g, createBlock as z } from "vue";
import { PlusOutlined as L, InfoCircleFilled as j } from "@ant-design/icons-vue";
import { Popover as M } from "@aplus-frontend/antdv";
import { IconApAdLinePoor as q } from "@aplus-frontend/icon";
import "../../config-provider/index.mjs";
import G from "./style/index.mjs";
import { useNamespace as J } from "../../config-provider/hooks/use-namespace.mjs";
const Q = ["onClick"], U = { class: "label" }, W = { class: "value" }, X = ["onClick"], Y = ["onClick"], Z = { class: "label" }, _ = { class: "value" }, ee = { class: "text" }, de = /* @__PURE__ */ P({
  name: "ApValueSelectCard",
  __name: "index",
  props: {
    options: {},
    selectedKeys: { default: () => [] },
    highlightedKeys: { default: () => [] },
    maxSelected: { default: 4 },
    maxRowDisplay: { default: 4 },
    popoverTitle: { default: "" },
    showTitleIcon: { type: Boolean, default: !0 },
    showCloseIcon: { type: Boolean, default: !0 },
    showAddButton: { type: Boolean, default: !0 },
    addButtonText: { default: "" },
    getContainer: { type: Function, default: (l) => l.parentElement || document.body },
    getCardStyle: { type: Function, default: () => ({}) },
    wrapperStyle: { type: [Boolean, null, String, Object, Array] }
  },
  emits: ["update:selectedKeys", "update:highlightedKeys", "change", "select", "remove", "highlight"],
  setup(l, { expose: R, emit: F }) {
    const a = F, s = l, { b: c } = J("ap-value-select-card"), H = G("ap-value-select-card"), D = I(null), y = I(!1), K = O(() => s.options), C = O(() => K.value.filter(
      (e) => s.selectedKeys.includes(e.key)
    )), x = (e) => s.selectedKeys.includes(e), S = (e) => s.highlightedKeys.includes(e), B = (e) => {
      s.selectedKeys.includes(e) ? k(e) : $(e);
    }, $ = (e) => {
      if (s.maxSelected && s.selectedKeys.length >= s.maxSelected)
        return;
      const n = [...s.selectedKeys, e];
      a("update:selectedKeys", n), a("change", n), a("select", e), s.highlightedKeys.includes(e) || w(e);
    }, k = (e) => {
      if (s.selectedKeys.length <= 1 || s.highlightedKeys.length <= 1 && s.highlightedKeys.includes(e))
        return;
      const n = s.selectedKeys.filter((t) => t !== e);
      if (a("update:selectedKeys", n), a("change", n), a("remove", e), s.highlightedKeys.includes(e)) {
        const t = s.highlightedKeys.filter((f) => f !== e);
        a("update:highlightedKeys", t), a("highlight", t);
      }
    }, w = (e) => {
      let n;
      if (s.highlightedKeys.includes(e))
        if (s.highlightedKeys.length > 1)
          n = s.highlightedKeys.filter((t) => t !== e);
        else
          return;
      else
        n = [...s.highlightedKeys, e];
      a("update:highlightedKeys", n), a("highlight", n);
    }, E = (e) => {
      e || (y.value = e);
    };
    return R({
      popoverVisible: y,
      allOptions: K,
      selectedOptions: C,
      isSelected: x,
      isHighlighted: S,
      toggleOption: B,
      addOption: $,
      removeOption: k,
      highlightOption: w
    }), (e, n) => (o(), h("div", {
      class: d([i(c)(), i(H)]),
      style: T({
        ...l.wrapperStyle,
        "--ap-value-select-card-column-count": l.maxRowDisplay
      })
    }, [
      b(i(M), {
        open: y.value,
        trigger: "click",
        placement: "bottomRight",
        arrow: !1,
        "get-popup-container": l.getContainer,
        onOpenChange: E
      }, {
        content: A(() => [
          r("div", {
            class: d(i(c)("popover"))
          }, [
            l.popoverTitle ? (o(), h("div", {
              key: 0,
              class: d(i(c)("title"))
            }, [
              l.showTitleIcon ? (o(), z(i(j), {
                key: 0,
                class: d(i(c)("title-icon"))
              }, null, 8, ["class"])) : p("", !0),
              m(" " + g(l.popoverTitle), 1)
            ], 2)) : p("", !0),
            r("div", {
              class: d(i(c)("list"))
            }, [
              (o(!0), h(V, null, N(K.value, (t) => (o(), h("div", {
                key: t.key,
                class: d([
                  i(c)("list-item"),
                  "all",
                  {
                    select: x(t.key),
                    disabled: l.maxSelected && l.selectedKeys.length >= l.maxSelected
                  }
                ]),
                onClick: v((f) => B(t.key), ["stop"])
              }, [
                r("div", U, [
                  u(e.$slots, "popover-label", { option: t }, () => [
                    m(g(t.label), 1)
                  ])
                ]),
                r("div", W, [
                  u(e.$slots, "popover-value", { option: t }, () => [
                    m(g(t.value), 1)
                  ])
                ])
              ], 10, Q))), 128))
            ], 2)
          ], 2)
        ]),
        default: A(() => [
          r("div", {
            class: d(i(c)("list"))
          }, [
            (o(!0), h(V, null, N(C.value, (t) => (o(), h("div", {
              key: t.key,
              ref_for: !0,
              ref_key: "listItemRef",
              ref: D,
              class: d([
                i(c)("list-item"),
                {
                  select: S(t.key),
                  custom: t.customClass
                },
                t.customClass
              ]),
              style: T(l.getCardStyle(t.key)),
              onClick: v((f) => w(t.key), ["stop"])
            }, [
              l.showCloseIcon && (!(l.highlightedKeys.length === 1 && S(t.key)) && C.value.length > 1) ? (o(), h("div", {
                key: 0,
                class: d(i(c)("list-item-close")),
                onClick: v((f) => k(t.key), ["stop"])
              }, [
                u(e.$slots, "close-icon", {}, () => [
                  b(i(q))
                ])
              ], 10, Y)) : p("", !0),
              r("div", Z, [
                u(e.$slots, "label", { option: t }, () => [
                  m(g(t.label), 1)
                ])
              ]),
              r("div", _, [
                u(e.$slots, "value", { option: t }, () => [
                  m(g(t.value), 1)
                ])
              ])
            ], 14, X))), 128)),
            l.showAddButton && (!l.maxSelected || l.selectedKeys.length < l.maxSelected) ? (o(), h("div", {
              key: 0,
              class: d([i(c)("list-item"), "choose"]),
              onClick: n[0] || (n[0] = v((t) => y.value = !0, ["stop"]))
            }, [
              u(e.$slots, "add-button", {}, () => [
                b(i(L)),
                r("span", ee, g(l.addButtonText), 1)
              ])
            ], 2)) : p("", !0)
          ], 2)
        ]),
        _: 3
      }, 8, ["open", "get-popup-container"])
    ], 6));
  }
});
export {
  de as default
};
