import { defineComponent } from "vue";
// import useGradualNumber from "@/hook/useGradualNumber";

import { toThousands } from "@/utils/thousands";
import style from "@/assets/style/global/infoCard.module.less";

export default defineComponent({
  props: {
    name: {
      type: String,
    },
    count: {
      type: [String, Number],
      required: true,
    },
  },
  setup(props) {
    // const count = toRaw(props.count);
    // const [renderValue, setRenderValue] = useGradualNumber(count);
    // watch(
    //   () => props.count,
    //   () => {
    //     setRenderValue(props.count);
    //   },
    //   {
    //     immediate: true,
    //   }
    // );

    // const getColor = (count: number | string) => {
    //   if (typeof count === "string") {
    //     const v = parseFloat(count);
    //     return v >= 80 ? "#2BEC99" : v >= 50 ? "yellow" : "#FC3939";
    //   } else {
    //     return "#fff";
    //   }
    // };

    return () => (
      <>
        <span class={style.deviceInfoName}>{props.name}</span>
        <span class={style.deviceInfoCount}>
          {typeof props.count === "number" ? toThousands(props.count) : props.count}
        </span>
      </>
    );
  },
});