import { chartsOptions } from "@/components/globals/v-charts";
import { LineECOption } from "@/components/globals/v-charts/type";
import { ref } from "vue";

export function useRight() {
  const lineOption = chartsOptions<LineECOption>({
    yAxis: {
      name: "(kw.h)",
    },
    xAxis: { data: ["0", "04", "08", "12", "16", "20", "24"] },
    series: [
      {
        name: "实时功率",
        type: "line",
        smooth: true,
        lineStyle: {
          width: 1.5,
          color: "#F5D6AD",
        },
        itemStyle: {
          color: "#F5D6AD",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            x2: 0,
            y: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#E5B98E", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#77634D", // 100% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(0,0,0,0)", // 100% 处的颜色
              },
            ],
          },
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
    ],
  });

  const itemList = ref([
    {
      name: "今日上网电量",
      value: 24.5,
      unit: "%",
    },
    {
      name: "本月上网电量",
      value: 30,
      unit: "%",
    },
    {
      name: "今年上网电量",
      value: 60.8,
      unit: "%",
    },
  ]);
  return {
    lineOption,
    itemList,
  };
}
