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

export function useRight() {
  const line1Option = 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: "#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: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "市电",
        type: "line",
        smooth: true,
        lineStyle: {
          width: 1.5,
          color: "#CCE3EB",
        },
        itemStyle: {
          color: "#CCE3EB",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            x2: 0,
            y: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#CCE3EB", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#476778", // 100% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(0,0,0,0)", // 100% 处的颜色
              },
            ],
          },
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
    ],
  });
  const line2Option = chartsOptions<LineECOption>({
    yAxis: {
      name: "(kw.h)",
    },
    xAxis: {},
    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 line3Option = chartsOptions<LineECOption>({
    yAxis: {
      name: "(kw.h)",
    },
    xAxis: {
      type: "value",
      nameTextStyle: {
        color: "#768F95",
      },
      axisLabel: {
        formatter: "{value}%",
        color: "#768F95",
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255,0.2)",
        },
      },
      min: 0,
      max: 100,
      // interval: 0,
      // data: ["0%", "25%", "50%", "75%", "100%"],
    },
    series: [
      {
        name: "放点深度",
        type: "line",
        smooth: true,
        xAxisIndex: 0,
        lineStyle: {
          width: 1.5,
          color: "#F5D6AD",
        },
        itemStyle: {
          color: "#F5D6AD",
        },
        areaStyle: {
          opacity: 0,
          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: [12, 32, 10, 13, 90],
      },
      {
        name: "放电次数",
        type: "line",
        smooth: true,
        yAxisIndex: 0,
        lineStyle: {
          width: 1.5,
          color: "#80DBE2",
        },
        itemStyle: {
          color: "#80DBE2",
        },
        areaStyle: {
          opacity: 0,
          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: [60, 20, 15, 80, 70],
      },
    ],
  });
  return {
    line1Option,
    line2Option,
    line3Option,
  };
}
