import { jsx as r, jsxs as a } from "react/jsx-runtime";
import { useRef as k, useState as g, useEffect as H } from "react";
function z({ data: e = [], config: p = {} }) {
  const {
    rowHeight: l = 36,
    barHeight: i = 12,
    barColor: y = "#1890ff",
    barBgColor: v = "rgba(255,255,255,0.1)",
    textColor: x = "#fff",
    valueColor: m = "#1890ff",
    fontSize: c = 14,
    showIndex: f = !0,
    indexColor: b = "#1890ff",
    scrollSpeed: d = 3e3,
    showBar: C = !0
  } = p, w = k(null), [I, S] = g(0), [h, u] = g(!1), j = Math.max(...e.map((n) => n.value), 1), R = e.length > 0 ? [...e, ...e] : [];
  return H(() => {
    if (e.length === 0 || h) return;
    const n = e.length * l, o = setInterval(() => {
      S((t) => {
        const s = t + 1;
        return s >= n ? 0 : s;
      });
    }, d / l);
    return () => clearInterval(o);
  }, [e.length, l, d, h]), e.length === 0 ? /* @__PURE__ */ r("div", { style: {
    width: "100%",
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: "#999"
  }, children: "暂无数据" }) : /* @__PURE__ */ r(
    "div",
    {
      ref: w,
      className: "scroll-rank-list",
      style: {
        width: "100%",
        height: "100%",
        overflow: "hidden",
        padding: "8px 12px",
        boxSizing: "border-box"
      },
      onMouseEnter: () => u(!0),
      onMouseLeave: () => u(!1),
      children: /* @__PURE__ */ r(
        "div",
        {
          style: {
            transform: `translateY(-${I}px)`,
            transition: "transform 0.1s linear"
          },
          children: R.map((n, o) => {
            const t = o % e.length, s = n.value / j * 100;
            return /* @__PURE__ */ a(
              "div",
              {
                style: {
                  height: l,
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "center",
                  gap: 4
                },
                children: [
                  /* @__PURE__ */ a(
                    "div",
                    {
                      style: {
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        fontSize: c
                      },
                      children: [
                        /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
                          f && /* @__PURE__ */ r(
                            "span",
                            {
                              style: {
                                color: t < 3 ? "#fff" : b,
                                backgroundColor: t < 3 ? t === 0 ? "#f5222d" : t === 1 ? "#fa8c16" : "#faad14" : "transparent",
                                width: 20,
                                height: 20,
                                borderRadius: t < 3 ? 4 : 0,
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                fontWeight: t < 3 ? "bold" : "normal",
                                fontSize: c - 2
                              },
                              children: t + 1
                            }
                          ),
                          /* @__PURE__ */ r("span", { style: { color: x }, children: n.name })
                        ] }),
                        /* @__PURE__ */ r("span", { style: { color: m, fontWeight: "bold" }, children: n.value.toLocaleString() })
                      ]
                    }
                  ),
                  C && /* @__PURE__ */ r(
                    "div",
                    {
                      style: {
                        height: i,
                        backgroundColor: v,
                        borderRadius: i / 2,
                        overflow: "hidden",
                        marginLeft: f ? 28 : 0
                      },
                      children: /* @__PURE__ */ r(
                        "div",
                        {
                          style: {
                            width: `${s}%`,
                            height: "100%",
                            backgroundColor: y,
                            borderRadius: i / 2,
                            transition: "width 0.3s ease"
                          }
                        }
                      )
                    }
                  )
                ]
              },
              `${n.name}-${o}`
            );
          })
        }
      )
    }
  );
}
export {
  z as default
};
//# sourceMappingURL=ScrollRankList-SLahcReD.mjs.map
