import { chartsOptions } from "@/components/globals/v-charts";
import {
  LineECOption,
  PieECOption,
  BarECOption,
} from "@/components/globals/v-charts/type";

export function useRight() {
  const pieOption = chartsOptions<PieECOption>({
    legend: {
      show: false,
    },
    color: ["#3FA7FD", "#8AC540", "#F9AF39", "#82D8F9"],
    series: [
      {
        name: "类别统计",
        type: "pie",
        radius: ["40%", "55%"],
        center: ["49.2%", "49%"],
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 20,
            name: "空调",
          },
          { value: 20, name: "照明" },
          { value: 20, name: "电梯" },
          { value: 20, name: "其他" },
        ],
      },
    ],
  });
  // 使用chartsOptions确保所有传入v-charts组件的options数据都是## shallowReactive浅层作用形式，避免大量数据导致性能问题
  const lineOption = 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 barOption = chartsOptions<BarECOption>({
    yAxis: {
      name: "(kw.h)",
    },
    xAxis: {
      data: ["1", "2", "3", "4", "5", "6", "7"],
    },
    series: [
      {
        name: "上网电量",
        data: [120, 200, 150, 80, 70, 110, 130],
      },
      {
        name: "用市电量",
        data: [120, 132, 101, 134, 90, 230, 210],
      },
    ],
  });

  return {
    lineOption,
    barOption,
    pieOption,
  };
}
