import { defineComponent as ee, ref as L, reactive as C, computed as M, onMounted as te, nextTick as b, watch as B, resolveComponent as ne, openBlock as r, createElementBlock as u, normalizeClass as w, createElementVNode as p, Fragment as R, renderList as T, withDirectives as _, renderSlot as E, createTextVNode as D, toDisplayString as O, createCommentVNode as y, vShow as F, unref as ae, normalizeStyle as se, createBlock as oe } from "vue";
import { C as o } from "../Shared/base-PQGakkrl.js";
import { u as ie } from "../Shared/language-DxTlvFs2.js";
const le = { key: 0 }, de = ["id", "onClick"], ce = ["onClick"], me = /* @__PURE__ */ ee({
  name: "ClTabs",
  __name: "Index",
  props: {
    className: {
      type: String,
      default: ""
    },
    classContent: {
      type: String,
      default: ""
    },
    theme: {
      type: String,
      default: "default"
      // default | line | card | button
    },
    active: String,
    list: {
      type: Array,
      default: () => []
    },
    disabledData: {
      type: Array,
      default: () => []
    },
    hideData: {
      type: Array,
      default: () => []
    },
    prefixName: String,
    isShowRemove: {
      type: Boolean,
      default: !1
    },
    removeReserve: {
      type: Number,
      default: 1
    },
    isShowAdd: {
      type: Boolean,
      default: !1
    },
    addBtnText: String,
    tabMinNum: {
      type: Number,
      default: 1
    },
    tabMaxNum: {
      type: Number,
      default: 0
    },
    isHideTabHead: {
      type: Boolean,
      default: !1
    },
    getAddInfo: Function,
    checkChangeBefore: Function
  },
  emits: ["onChange", "onInit", "onAdd", "onRemove", "onErrMsg"],
  setup(l, { expose: W, emit: V }) {
    const a = l, h = V, { optPageLanguage: m, getPageLanguage: H } = ie();
    H("common");
    const I = L(null), i = C({
      keyIndex: `${o.getRandom(8)}`,
      showId: a.active
    }), c = L([]), x = C({
      left: 0,
      width: 0
    }), v = C({
      isShow: !1,
      width: "",
      init: ""
    }), g = {
      currentTabsAutoIndex: 0,
      isFirstInit: !1
    }, X = M(() => {
      const e = {
        "panel-tabs": !0
      };
      return e[`tabs-${a.theme}`] = !0, a.className && !o.isEmpty(a.className) && a.className.split(" ").forEach((t) => {
        o.isEmpty(t) || (e[t] = !0);
      }), e;
    }), j = M(() => {
      const e = {
        "tabs-content": !0
      };
      return a.classContent && !o.isEmpty(a.classContent) && a.classContent.split(" ").forEach((t) => {
        o.isEmpty(t) || (e[t] = !0);
      }), e;
    }), J = () => {
      const e = [], t = i.showId ? i.showId.toString() : "";
      let s = {};
      c.value.forEach((n) => {
        if (n.id.toString() === t) {
          const d = o.getJsonClone(n);
          s = d, e.push(d);
        }
      }), h("onInit", i.showId, s, e);
    }, P = (e, t) => {
      b(() => {
        h("onChange", e, t);
      });
    }, U = (e) => {
      h("onAdd", e);
    }, z = (e) => {
      h("onRemove", e);
    }, N = (e) => {
      h("onErrMsg", e);
    }, q = (e) => {
      if (a.theme === "line") {
        const t = document.getElementById(`tab_${i.keyIndex}_${e}`);
        let s = 0, n = 0;
        o.isUndefined(t) || (s = t.parentElement.offsetLeft + 10, n = t.parentElement.offsetWidth - 20), x.left = s, x.width = n;
      }
    }, S = () => {
      if (I.value) {
        const e = I.value.offsetWidth;
        let t = 0;
        const s = I.value.children, n = s.length;
        for (let f = 0; f < n; f++) {
          const k = s[f];
          k.className.indexOf("tab-indicator") === -1 && (f === 0 && (t += k.offsetLeft), t += k.offsetWidth);
        }
        const d = t > e;
        v.isShow = d, v.width = `${t}px`;
      }
    }, G = (e) => {
      const t = [];
      return e.forEach((s, n) => {
        const d = o.getJsonClone(s), f = o.isEmpty(d.id) ? "-1" : d.id.toString();
        d.tabId = f === "-1" ? o.getRandom(8) : f, d.value = f, o.isEmpty(d.name) && (d.name = a.prefixName + (n + 1).toString()), t.push(d);
      }), t;
    }, $ = (e, t) => {
      let s = "";
      return t && !o.isEmpty(t) && e.forEach((n) => {
        n.tabId === t && (s = t);
      }), o.isEmpty(s) && e.length > 0 && (s = e[0].tabId), s;
    }, A = () => {
      const e = G(a.list);
      c.value = e, g.currentTabsAutoIndex = e.length, b(() => {
        i.showId = $(e, a.active), S(), !g.isFirstInit && e.length > 0 && (g.isFirstInit = !0, J());
      });
    };
    te(() => {
      b(() => {
        A();
      });
    }), B([() => a.active, () => a.list], () => {
      A();
    }), B(
      () => i.showId,
      (e, t) => {
        e !== t && q(i.showId);
      }
    );
    const K = async (e) => {
      if (a.disabledData.indexOf(e.tabId) === -1 && e.tabId !== i.showId) {
        let t = !0;
        a.checkChangeBefore && (t = await a.checkChangeBefore(e.tabId, i.showId), t = o.isBoolean(t) ? t : !0), t && (i.showId = e.tabId, P(e.tabId, e));
      }
    }, Q = (e) => {
      if (a.disabledData.indexOf(e.tabId) === -1 && c.value.length > a.tabMinNum) {
        const t = [];
        c.value.forEach((s) => {
          s.tabId !== e.tabId && t.push(s);
        }), c.value = t, b(() => {
          S(), i.showId = $(t, i.showId);
        }), z(o.getJsonClone(e));
      } else
        N(`${m.value.checkAddMin}${a.tabMinNum}${m.value.count}`);
    }, Y = () => {
      if (c.value.length < a.tabMaxNum || a.tabMaxNum <= 0) {
        let e = {};
        a.getAddInfo && (e = a.getAddInfo(), o.isObject(e) || (e = {}));
        const t = o.isEmpty(e.id) ? "-1" : e.id.toString();
        if (e.tabId = t === "-1" ? o.getRandom(8) : t, e.value = t, o.isEmpty(e.name)) {
          const n = g.currentTabsAutoIndex + 1;
          e.name = a.prefixName + n.toString(), g.currentTabsAutoIndex = n;
        }
        const s = o.getListClone(c.value);
        s.push(e), c.value = s, b(() => {
          S(), i.showId = e.tabId, U(e);
        });
      } else
        N(`${m.value.checkAddMax}${a.tabMaxNum}${m.value.count}`);
    }, Z = (e) => {
      I.value.scrollLeft = e.target.scrollLeft;
    };
    return W({
      getValue: () => i.showId
    }), (e, t) => {
      const s = ne("cl-scrollx-fence");
      return r(), u("div", {
        class: w(X.value)
      }, [
        l.isHideTabHead ? y("", !0) : (r(), u("div", le, [
          p("ul", {
            class: "tabs-nav",
            ref_key: "refElNavUl",
            ref: I
          }, [
            (r(!0), u(R, null, T(c.value, (n) => _((r(), u("li", {
              key: `tabs_${i.keyIndex}_nav_${n.tabId}`,
              class: w({ "tab-nav": !0, "tab-active": n.tabId === i.showId, "tab-disabled": l.disabledData.indexOf(n.tabId) > -1 })
            }, [
              p("a", {
                id: `tab_${i.keyIndex}_${n.tabId}`,
                class: "nav-link",
                href: "javascript:",
                onClick: (d) => K(n)
              }, [
                E(e.$slots, `nav_${n.tabId}`, { data: n }, () => [
                  D(O(n.name), 1)
                ])
              ], 8, de),
              l.isShowRemove && c.value.length > l.removeReserve && c.value.length > l.tabMinNum && l.disabledData.indexOf(n.tabId) === -1 ? (r(), u("span", {
                key: 0,
                class: "tab-remove",
                onClick: (d) => Q(n)
              }, "x", 8, ce)) : y("", !0)
            ], 2)), [
              [F, l.hideData.indexOf(n.tabId) === -1]
            ])), 128)),
            l.isShowAdd ? (r(), u("li", {
              key: 0,
              class: w({ "tab-add": !0, "tab-disabled": c.value.length >= l.tabMaxNum && l.tabMaxNum > 0 })
            }, [
              p("a", {
                class: "nav-link",
                href: "javascript:",
                onClick: Y
              }, [
                E(e.$slots, "nav_add", {}, () => [
                  D(O(l.addBtnText || ae(m).add), 1)
                ])
              ])
            ], 2)) : y("", !0),
            l.theme === "line" ? (r(), u("li", {
              key: 1,
              class: "tab-indicator",
              style: se({ left: `${x.left}px`, width: `${x.width}px` })
            }, null, 4)) : y("", !0)
          ], 512),
          v.isShow ? (r(), oe(s, {
            key: 0,
            isShowLeft: !1,
            isShowRight: !1,
            centerWidth: v.width,
            initLeft: v.init,
            onOnScrollX: Z
          }, null, 8, ["centerWidth", "initLeft"])) : y("", !0)
        ])),
        p("div", {
          class: w(j.value)
        }, [
          (r(!0), u(R, null, T(c.value, (n) => _((r(), u("div", {
            key: `tabs_${i.keyIndex}_content_${n.tabId}`,
            class: w({ "tab-content": !0, "tab-active": n.tabId === i.showId })
          }, [
            E(e.$slots, `content_${n.tabId}`, { data: n })
          ], 2)), [
            [F, l.hideData.indexOf(n.tabId) === -1]
          ])), 128))
        ], 2)
      ], 2);
    };
  }
});
export {
  me as default
};
//# sourceMappingURL=ClTabs.js.map
