import { defineComponent as S, ref as i, watch as $, createElementBlock as c, openBlock as l, normalizeStyle as b, unref as p, Fragment as D, renderList as O, withModifiers as T, normalizeClass as _, toDisplayString as R } from "vue";
import { cloneDeep as z, isEqual as B, isArray as h } from "lodash";
import { autoInstallFont as f, jsonToCssStyle as d } from "../../commons/utils/json2css.mjs";
const F = ["onClick"], H = S({ name: "zv-interaction-tabs" }), W = /* @__PURE__ */ S({
  ...H,
  props: {
    basicOption: {},
    sceneOption: {},
    useEvents: {}
  },
  emits: ["on-click-item", "on-change"],
  setup(v, { emit: w }) {
    const s = w, o = v, g = () => {
      const t = i(), a = (e) => e && !e.startsWith("http") && !e.startsWith("//") ? "../" + e : e;
      return {
        rendererTabDomStyle: (e) => t.value ? {
          ...d(e)
        } : {},
        rendererTabItemDomStyle: (e) => {
          if (t.value) {
            f(e.fontFamily), f(e.selected.fontFamily);
            const E = e.backgroundImage !== "" ? `url(${e.backgroundImage})` : e.backgroundColor, I = e.selected.backgroundImage !== "" ? `url(${a(e.selected.backgroundImage)})` : e.selected.backgroundColor;
            return {
              ...d(e),
              ...d(e.selected, "selected"),
              ...e.textShadow && e.textShadow.show ? { "--text-shadow": `${e.textShadow.x}px ${e.textShadow.y}px ${e.textShadow.value}px ${e.textShadow.color}` } : {},
              ...e.selected.textShadow && e.selected.textShadow.show ? { "--selected-text-shadow": `${e.selected.textShadow.x}px ${e.selected.textShadow.y}px ${e.selected.textShadow.value}px ${e.selected.textShadow.color}` } : {},
              "--item-background": E,
              "--selected-background": I
            };
          }
          return {};
        },
        tabsRef: t
      };
    }, r = i(o.basicOption.value), x = (t) => {
      r.value.map((a) => a.selected = !1), t.selected = !0, s("on-click-item", t), o.useEvents && h(o.useEvents) && window.SHJParseEvent(o.useEvents.filter((a) => a.clickname === t.id), "on-click-item"), s("on-change", t), o.useEvents && h(o.useEvents) && window.SHJParseEvent(o.useEvents, "on-change", {
        data: t.label
      });
    }, {
      rendererTabDomStyle: k,
      rendererTabItemDomStyle: y,
      tabsRef: m
    } = g();
    return $(() => z(o.basicOption), (t, a) => {
      B(t, a) || (r.value = o.basicOption.value);
    }, { deep: !0 }), (t, a) => (l(), c("div", {
      ref_key: "tabsRef",
      ref: m,
      class: "zerov-widget-tabs",
      style: b({
        ...p(k)(t.basicOption.css.tab)
      })
    }, [
      (l(!0), c(D, null, O(r.value, (n, u) => (l(), c("div", {
        key: u,
        class: _(["tab-item", { selected: n.selected }]),
        style: b({
          ...p(y)(t.basicOption.css.item),
          borderRadius: t.basicOption.css.tab.borderRadius + "px"
        }),
        onClick: T((e) => x(n), ["stop"])
      }, R(n.label), 15, F))), 128))
    ], 4));
  }
});
export {
  W as default
};
