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