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

export function useLeft() {
  // 使用chartsOptions确保所有传入v-charts组件的options数据都是## shallowReactive浅层作用形式，避免大量数据导致性能问题
  const lineOptions = chartsOptions<LineECOption>({
    yAxis: {
      name: "(kw.h)",
    },
    xAxis: {
      data: ["1", "2", "3", "4", "5", "6", "7"],
    },
    series: [
      {
        name: "光伏发电量",
        type: "line",
        smooth: true,
        lineStyle: {
          width: 1.5,
          color: "#80DBE2",
        },
        itemStyle: {
          color: "#80DBE2",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            x2: 0,
            y: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#74BAC1", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#2D6479", // 100% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(0,0,0,0)", // 100% 处的颜色
              },
            ],
          },
        },
        data: [120, 200, 150, 80, 70, 110, 130],
      },
      {
        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 item1 = ref([
    {
      name: "当日发电量",
      image: getImg("home/icon2.png"),
      value: 80.87,
      unit: "kw.h",
    },
    {
      name: "当年累计发电量",
      image: getImg("home/icon2.png"),
      value: 8087,
      unit: "kw.h",
    },
    {
      name: "上网电量",
      image: getImg("home/icon2.png"),
      value: 78.09,
      unit: "kw.h",
    },
    {
      name: "累计上网电量",
      image: getImg("home/sun.png"),
      value: 78989,
      unit: "kw.h",
    },
  ]);
  const item2 = ref([
    {
      name: "今日充电",
      image: getImg("home/icon1.png"),
      value: 36,
      unit: "kw.h",
    },
    {
      name: "今日放电",
      image: getImg("home/icon2.png"),
      value: 345,
      unit: "kw.h",
    },
    {
      name: "电池温度",
      image: getImg("home/icon3.png"),
      value: 36.4,
      unit: "°C",
    },
    {
      name: "累计充电次数",
      image: getImg("home/icon4.png"),
      value: 345,
      unit: "次",
    },
  ]);

  return {
    item1,
    item2,
    lineOptions,
  };
}
