import { defineComponent as F, toRefs as z, reactive as j, watch as p, onUnmounted as q, openBlock as _, createElementBlock as C, normalizeStyle as l, unref as s, Fragment as O, renderList as U, createElementVNode as c, toDisplayString as x, pushScopeId as V, popScopeId as G } from "vue";
const J = (d) => (V("data-v-bb1db11e"), d = d(), G(), d), K = { class: "ranking-info" }, Q = ["innerHTML"], W = /* @__PURE__ */ J(() => /* @__PURE__ */ c("div", { class: "shine" }, null, -1)), X = [
  W
], Y = F({ name: "ETableList" }), ee = /* @__PURE__ */ F({
  ...Y,
  props: {
    chartConfig: {
      type: Object,
      required: !0
    }
  },
  setup(d) {
    const h = d, { w: I, h: k } = z(h.chartConfig.attr), {
      rowNum: L,
      unit: A,
      color: N,
      textColor: H,
      borderColor: D,
      indexFontSize: M,
      leftFontSize: E,
      rightFontSize: R
    } = z(h.chartConfig.option), e = j({
      mergedConfig: h.chartConfig.option,
      rowsData: [],
      rows: [
        {
          scroll: 0,
          ranking: 1,
          name: "",
          value: "",
          percent: 0
        }
      ],
      heights: [0],
      animationIndex: 0,
      animationHandler: 0,
      updater: 0,
      avgHeight: 0
    }), B = () => {
      let { dataset: t, rowNum: i, sort: n } = e.mergedConfig;
      n && t.sort(({ value: o }, { value: r }) => {
        if (o > r)
          return -1;
        if (o < r)
          return 1;
        if (o === r)
          return 0;
      });
      const a = t.map(({ value: o }) => o), m = Math.min(...a) || 0, f = Math.abs(m), v = (Math.max(...a) || 0) + f;
      t = t.map((o, r) => ({
        ...o,
        ranking: r + 1,
        percent: (o.value + f) / v * 100
      }));
      const u = t.length;
      u > i && u < 2 * i && (t = [...t, ...t]), t = t.map((o, r) => ({ ...o, scroll: r })), e.rowsData = t, e.rows = t;
    }, P = (t = !1) => {
      const { rowNum: i, dataset: n } = e.mergedConfig, a = k.value / i;
      e.avgHeight = a, t || (e.heights = new Array(n.length).fill(a));
    }, b = async (t = !1) => {
      let { avgHeight: i, animationIndex: n, mergedConfig: a, rowsData: m, updater: f } = e;
      const { waitTime: w, carousel: v, rowNum: u } = a, o = m.length;
      if (u >= o || t && (await new Promise((y) => setTimeout(y, w)), f !== e.updater))
        return;
      const r = v === "single" ? 1 : u;
      let S = m.slice(n);
      if (S.push(...m.slice(0, n)), e.rows = S.slice(0, u + 1), e.heights = new Array(o).fill(i), await new Promise((y) => setTimeout(y, 300)), f !== e.updater)
        return;
      e.heights.splice(0, r, ...new Array(r).fill(0)), n += r;
      const T = n - o;
      T >= 0 && (n = T), e.animationIndex = n, e.animationHandler = setTimeout(b, w * 1e3 - 300);
    }, $ = () => {
      e.updater = (e.updater + 1) % 999999, e.animationHandler && clearTimeout(e.animationHandler);
    }, g = async () => {
      try {
        if (!e.mergedConfig)
          return;
        let { dataset: t, rowNum: i, sort: n } = e.mergedConfig;
        $(), B();
        let a = !0;
        t.length <= i && (a = !1), P(a), b(a);
      } catch (t) {
        console.error(t);
      }
    };
    return g(), p(
      () => I.value,
      () => {
        g();
      }
    ), p(
      () => k.value,
      () => {
        g();
      }
    ), p(
      () => L.value,
      () => {
        g();
      }
    ), p(
      () => h.chartConfig.option.dataset,
      () => {
        g();
      },
      {
        deep: !1
      }
    ), q(() => {
      $();
    }), (t, i) => (_(), C("div", {
      class: "go-tables-rank",
      style: l(`color: ${s(H)}`)
    }, [
      (_(!0), C(O, null, U(e.rows, (n, a) => (_(), C("div", {
        class: "row-item",
        key: n.toString() + n.scroll,
        style: l(`height: ${e.heights[a]}px;`)
      }, [
        c("div", K, [
          c("div", {
            class: "rank",
            style: l(`color: ${s(N)};font-size: ${s(M)}px`)
          }, " No." + x(n.ranking), 5),
          c("div", {
            class: "info-name",
            style: l(`font-size: ${s(E)}px`),
            innerHTML: n.name
          }, null, 12, Q),
          c("div", {
            class: "ranking-value",
            style: l(`color: ${s(H)};font-size: ${s(R)}px`)
          }, x(e.mergedConfig.valueFormatter ? e.mergedConfig.valueFormatter(n) : n.value) + " " + x(s(A)), 5)
        ]),
        c("div", {
          class: "ranking-column",
          style: l(`border-color: ${s(D)}`)
        }, [
          c("div", {
            class: "inside-column",
            style: l(`width: ${n.percent}%;background-color: ${s(N)}`)
          }, X, 4)
        ], 4)
      ], 4))), 128))
    ], 4));
  }
});
export {
  ee as default
};
