import { defineComponent as J, useCssVars as I, ref as g, onMounted as R, watch as C, openBlock as r, createElementBlock as c, normalizeStyle as d, Fragment as h, renderList as m, normalizeClass as E, createElementVNode as S, toDisplayString as w, createCommentVNode as z } from "vue";
import { cloneDeep as v, isEqual as H } from "lodash";
import { nanoid as O } from "nanoid";
const j = { class: "table-body" }, A = ["onClick", "onMouseenter", "onMouseout"], N = ["onClick"], q = { key: 1 }, T = J({ name: "zv-text-table-basic" }), X = /* @__PURE__ */ J({
  ...T,
  props: {
    basicOption: {},
    useEvents: {},
    sources: {},
    uuid: {}
  },
  emits: ["on-click-item", "on-click-row", "on-mouseenter-row", "on-mouseout-row"],
  setup(M, { expose: W, emit: P }) {
    I((e) => ({
      "5d5333b0": e.basicOption.css.table.borderWidth + "px",
      "5810d628": e.basicOption.css.table.borderStyle,
      "572ce7da": e.basicOption.css.table.borderColor,
      "7fbfe732": e.basicOption.css.table.paddingLeft + "px",
      ad7433d0: e.basicOption.css.table.alignItems,
      "63a6d3a6": e.basicOption.css.table.justifyContent,
      "0301cadc": e.basicOption.css.header.background,
      "0cda44bc": e.basicOption.css.header.height + "px",
      "6d6b9b7f": e.basicOption.css.header.color,
      "014a92b9": e.basicOption.css.header.fontSize + "px",
      "2220490b": e.basicOption.css.header.fontWeight,
      "7cc778be": e.basicOption.css.header.fontStyle,
      "5e71f737": e.basicOption.css.body.height + "px",
      "24111dc6": e.basicOption.css.body.background,
      "45704ca0": e.basicOption.css.oddBackground,
      "8057cbd8": e.basicOption.css.body.color,
      aa6cc9e4: e.basicOption.css.body.fontSize + "px",
      "11989f96": e.basicOption.css.body.fontWeight,
      "52f4a4d3": e.basicOption.css.body.fontStyle
    }));
    const b = P, p = g(O()), u = g([]), s = M, l = () => {
      window.SHJDatasourceV2({
        tId: s.uuid,
        sources: s.sources,
        callback: (e) => {
          try {
            window.SHJParseEvent(s.useEvents, "dataListener", u), p.value = O(), u.value = v(e.data[0].data) || [];
          } catch {
            window.SHJParseEvent(s.useEvents, "dataListener", null), p.value = O(), u.value = [];
          }
        }
      });
    }, V = (e) => {
      const o = [];
      for (const t in e)
        o.push(e[t]);
      return o;
    };
    R(() => l()), C(() => v(s.sources), (e, o) => {
      H(e, o) || l();
    }, {
      deep: !0
    }), C(() => v(s.basicOption), (e, o) => {
      H(e, o) || l();
    }, {
      deep: !0
    }), W({
      refresh: () => l(),
      refreshView: () => l(),
      refreshData: () => l()
    });
    const $ = (e) => {
      if (!s.basicOption.columns)
        return !0;
      const o = s.basicOption.columns.find((t) => t.index === e);
      return o ? o.font.auto : !0;
    }, f = (e) => {
      if (!s.basicOption.columns)
        return null;
      const o = s.basicOption.columns.find((t) => t.index === e);
      return o && o.font.auto === !1 ? o.font : null;
    }, y = (e) => {
      if (!s.basicOption.columns)
        return !0;
      const o = s.basicOption.columns.find((t) => t.index === e);
      return o ? o.width.auto : !0;
    }, k = (e) => {
      if (!s.basicOption.columns)
        return null;
      const o = s.basicOption.columns.find((t) => t.index === e);
      return o && o.width.auto === !1 ? o.width.width : null;
    }, D = (e, o) => {
      const t = { row: e, rowIndex: o };
      b("on-click-row", t), window.SHJParseEvent(s.useEvents, "on-click-row", t);
    }, F = (e, o) => {
      const t = { row: e, rowIndex: o };
      b("on-mouseenter-row", t), window.SHJParseEvent(s.useEvents, "on-mouseenter-row", t);
    }, L = (e, o) => {
      const t = { row: e, rowIndex: o };
      b("on-mouseout-row", t), window.SHJParseEvent(s.useEvents, "on-mouseout-row", t);
    }, B = (e, o, t, i) => {
      const n = { row: e, item: o, rowIndex: t, columnIndex: i };
      b("on-click-item", n), window.SHJParseEvent(s.useEvents, "on-click-item", n);
    };
    return (e, o) => u.value.length > 0 ? (r(), c("div", {
      key: p.value,
      class: "table-scroll"
    }, [
      e.basicOption.css.header.show ? (r(), c("div", {
        key: 0,
        class: "table-header",
        style: d({
          "--header-background-image": `url(${e.basicOption.css.header.backgroundImage})`
        })
      }, [
        (r(!0), c(h, null, m(Object.keys(u.value[0]), (t, i) => (r(), c("div", {
          key: t,
          class: E(["th", { customWidth: !y(i + 1) }]),
          style: d({ "--width": k(i + 1) + "px" })
        }, [
          S("p", null, w(t), 1)
        ], 6))), 128))
      ], 4)) : z("", !0),
      S("div", j, [
        (r(!0), c(h, null, m(u.value, (t, i) => (r(), c("div", {
          key: t,
          class: "tr",
          style: d({
            "--row-hover": e.basicOption.css.hoverColor
          }),
          onClick: (n) => D(t, i),
          onMouseenter: (n) => F(t, i),
          onMouseout: (n) => L(t, i)
        }, [
          (r(!0), c(h, null, m(V(t), (n, a) => (r(), c("div", {
            key: n,
            class: E(["td", { customWidth: !y(a + 1) }]),
            style: d({ "--width": k(a + 1) + "px" }),
            onClick: (G) => B(t, n, i, a)
          }, [
            $(a + 1) ? (r(), c("p", q, w(n), 1)) : (r(), c("p", {
              key: 0,
              class: "customFont",
              style: d({
                "--text-color": f(a + 1).color,
                "--text-font-size": f(a + 1).fontSize + "px",
                "--text-font-style": f(a + 1).fontStyle
              })
            }, w(n), 5))
          ], 14, N))), 128))
        ], 44, A))), 128))
      ])
    ])) : z("", !0);
  }
});
export {
  X as default
};
