import { defineComponent as E, ref as k, watch as h, createElementBlock as i, openBlock as o, normalizeStyle as l, unref as r, Fragment as O, renderList as y, withModifiers as _, normalizeClass as g, toDisplayString as j } from "vue";
import { cloneDeep as z, isEqual as C, isArray as p } from "lodash";
import { Utils as u } from "../../../commons/utils/utils.mjs";
import { SHJParseEvent as v } from "../../../commons/plugins/event/index.mjs";
const S = ["onClick"], A = /* @__PURE__ */ E({
  __name: "base",
  props: {
    basicOption: {},
    useEvents: {}
  },
  emits: ["on-click-item", "on-change"],
  setup(m, { emit: b }) {
    const c = b, s = m, n = k(s.basicOption.value), d = (e) => {
      n.value.map((t) => t.selected = !1), e.selected = !0, c("on-click-item", e), s.useEvents && p(s.useEvents) && v.parseEvents(s.useEvents.filter((t) => t.clickname === e.id), "on-click-item"), c("on-change", e), s.useEvents && p(s.useEvents) && v.parseEvents(s.useEvents, "on-change", {
        data: e.label
      });
    };
    return h(() => z(s.basicOption), (e, t) => {
      C(e, t) || (n.value = s.basicOption.value);
    }, { deep: !0 }), (e, t) => (o(), i("div", {
      class: "zv-tab",
      style: l(r(u).json2cssObject(e.basicOption.css.tab))
    }, [
      (o(!0), i(O, null, y(n.value, (a, f) => (o(), i("div", {
        key: f,
        class: g(["zv-tab-item", { selected: a.selected }]),
        style: l(r(u).json2cssObject(e.basicOption.css.item)),
        onClick: _((w) => d(a), ["stop"])
      }, j(a.label), 15, S))), 128))
    ], 4));
  }
});
export {
  A as default
};
