import { defineComponent as c, useCssVars as y, unref as t, reactive as N, toRefs as s, watch as f, openBlock as z, createBlock as S, withCtx as a, createElementVNode as i, normalizeStyle as n, toDisplayString as p, createVNode as V } from "vue";
import { NStatistic as k, NNumberAnimation as B } from "naive-ui";
const E = c({ name: "ENumber" }), v = /* @__PURE__ */ c({
  ...E,
  props: {
    chartConfig: {
      type: Object,
      required: !0
    }
  },
  setup(m) {
    const o = m;
    y((w) => ({
      "5c257a5f": `${t(u)}px`,
      "5b5219d0": `${t(l)}px`
    }));
    const e = N({
      from: 0,
      dataset: 0
    }), { w: u, h: l } = s(o.chartConfig.attr);
    let {
      dur: d,
      showSeparator: x,
      prefixText: h,
      prefixColor: C,
      suffixText: _,
      suffixColor: g,
      precision: b,
      numberSize: r,
      numberColor: $
    } = s(o.chartConfig.option);
    return f(
      () => o.chartConfig.option.from,
      () => {
        e.from = o.chartConfig.option.from;
      },
      { immediate: !0 }
    ), f(
      () => o.chartConfig.option.dataset,
      () => {
        e.dataset = o.chartConfig.option.dataset;
      },
      {
        immediate: !0,
        deep: !1
      }
    ), (w, T) => (z(), S(t(k), {
      "tabular-nums": "",
      class: "go-decorates-number"
    }, {
      prefix: a(() => [
        i("span", {
          style: n(`color:${t(C)};font-size:${t(r)}px`)
        }, p(t(h)), 5)
      ]),
      suffix: a(() => [
        i("span", {
          style: n(`color:${t(g)};font-size:${t(r)}px`)
        }, p(t(_)), 5)
      ]),
      default: a(() => [
        i("span", {
          style: n(`color:${t($)};font-size:${t(r)}px`)
        }, [
          V(t(B), {
            from: e.from,
            to: e.dataset,
            duration: t(d) * 1e3,
            "show-separator": t(x),
            precision: t(b)
          }, null, 8, ["from", "to", "duration", "show-separator", "precision"])
        ], 4)
      ]),
      _: 1
    }));
  }
});
export {
  v as default
};
