import { defineComponent as H, ref as y, reactive as A, computed as $, watch as D, onMounted as M, nextTick as k, openBlock as c, createElementBlock as r, normalizeClass as w, renderSlot as N, createCommentVNode as h, Fragment as z, renderList as J, withModifiers as P, normalizeStyle as V, toDisplayString as K } from "vue";
import { C as n } from "./base-PQGakkrl.js";
const j = ["onClick"], q = ["innerHTML"], G = { key: 1 }, O = ["onClick"], Z = /* @__PURE__ */ H({
  name: "ClTags",
  __name: "Index",
  props: {
    className: String,
    list: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    isRemove: {
      type: Boolean,
      default: !0
    },
    showTextFormat: String,
    // "${id} ${name}"
    isRemoveAll: {
      type: Boolean,
      default: !1
    },
    theme: {
      type: String,
      default: "default"
      // default | code
    },
    isFormatHtml: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["onRemove", "onClickTag"],
  setup(u, { expose: C, emit: I }) {
    const a = u, d = I, S = `tag-${n.getRandom(8)}`, v = y(a.disabled), o = y([]), l = A({
      status: 0,
      // 1:初始，2:过渡中 0:结束
      startColor: "#FFFF80",
      endColor: "rgba(0, 0, 0, 0)",
      hID: ""
    }), T = $(() => {
      const { className: e, theme: s } = a, t = {
        "panel-tags": !0
      };
      return s !== "default" && (t[`tags-${s}`] = !0), a.isRemoveAll && o.value.length > 0 && (t["tags-region"] = !0), n.isEmpty(e) || e.split(" ").forEach((i) => {
        n.isEmpty(i) || (t[i] = !0);
      }), t;
    }), F = (e) => {
      const { theme: s } = a;
      let t = {};
      return s === "default" ? (t = {
        tag: !0,
        "tag-disabled": e.isShowDisabled,
        "tag-remove": a.isRemove && !e.isShowDisabled
      }, t["tag-hlight"] = e.id.toString() === l.hID && l.status === 2) : s === "code" && (t["tag-code"] = !0), t;
    }, R = (e) => {
      const s = {};
      if (e.id.toString() === l.hID)
        switch (l.status) {
          case 1:
            s["background-color"] = l.startColor;
            break;
          case 2:
            s["background-color"] = l.endColor;
            break;
        }
      return s;
    }, p = (e) => n.isEmpty(a.showTextFormat) ? e.name : n.convertStringFormat(a.showTextFormat, e), b = (e) => {
      const s = v.value;
      let t = !1;
      s ? t = !0 : t = n.isBoolean(e.isDisabled) ? e.isDisabled : !1, e.isShowDisabled = t;
    }, m = (e) => {
      const s = [];
      return e.forEach((t) => {
        const i = n.getJsonClone(t);
        b(i), s.push(i);
      }), s;
    }, f = (e) => {
      v.value = e;
      const s = m(o.value);
      o.value = s;
    }, L = (e) => {
      l.hID = e.toString(), l.status = 1, k(() => {
        setTimeout(() => {
          l.status = 2;
        }, 10), setTimeout(() => {
          l.status = 0, l.hID = "";
        }, 1500);
      });
    }, _ = () => {
      const e = m(a.list);
      o.value = e;
    };
    D(
      () => a.disabled,
      (e) => {
        f(e);
      }
    ), D(
      () => a.list,
      (e) => {
        const s = m(e);
        o.value = s;
      },
      { deep: !0 }
    ), M(() => {
      k(() => {
        _();
      });
    });
    const x = (e, s) => {
      d("onClickTag", s);
    }, B = (e, s, t) => {
      e.preventDefault(), e.stopPropagation(), a.isRemove && !s.isShowDisabled && (o.value.splice(t, 1), d("onRemove", s.id.toString()));
    }, E = () => {
      o.value = [], d("onRemove", "");
    };
    return C({
      setDisabled: (e = !0) => {
        f(e);
      },
      addInfo: (e) => {
        const s = n.getListExistValue(o.value, e.name, "name");
        if (n.isEmpty(s)) {
          const t = n.getJsonClone(e);
          b(t), o.value.push(t);
        } else
          L(s.info.id);
      },
      getData: () => o.value
    }), (e, s) => (c(), r("div", {
      class: w(T.value)
    }, [
      o.value.length > 0 ? N(e.$slots, "head", { key: 0 }) : h("", !0),
      (c(!0), r(z, null, J(o.value, (t, i) => (c(), r("span", {
        key: `${S}-list-${i}-${t.id}`,
        class: w(F(t)),
        style: V(R(t)),
        onClick: P((g) => x(g, t), ["stop"])
      }, [
        t.isHtml || u.isFormatHtml ? (c(), r("span", {
          key: 0,
          innerHTML: p(t)
        }, null, 8, q)) : (c(), r("span", G, K(p(t)), 1)),
        u.isRemove && !t.isShowDisabled ? (c(), r("i", {
          key: 2,
          class: "tag-close clIconFont clIcon-close",
          onClick: (g) => B(g, t, i)
        }, null, 8, O)) : h("", !0)
      ], 14, j))), 128)),
      u.isRemoveAll && o.value.length > 0 && !u.disabled ? (c(), r("i", {
        key: 1,
        class: "tag-closeAll clIconFont clIcon-close",
        onClick: E
      })) : h("", !0)
    ], 2));
  }
});
export {
  Z as _
};
//# sourceMappingURL=Index.vue_vue_type_script_setup_true_lang-C4rRquU-.js.map
