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

export function useLeft() {
  const pieOption = chartsOptions<PieECOption>({
    legend: {
      show: false,
    },
    color: ["#3FA7FD", "#8AC540", "#F9AF39", "#82D8F9"],
    series: [
      {
        name: "类别统计",
        type: "pie",
        radius: ["40%", "55%"],
        center: ["50%", "50%"],
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 20,
            name: "空调",
          },
          { value: 20, name: "照明" },
          { value: 20, name: "电梯" },
          { value: 20, name: "其他" },
        ],
      },
    ],
  });
  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],
      },
    ],
  });

  const itemList = ref([
    {
      name: "今日用电",
      value: 345,
      tb: 0.32,
      hb: 0.02,
      unit: "kw.h",
      image: getImg("soc/l-item1.png"),
    },
    {
      name: "本月用电",
      value: 345,
      tb: 0.22,
      hb: 0.1,
      unit: "kw.h",
      image: getImg("soc/l-item2.png"),
    },
    {
      name: "今年电量",
      value: 345,
      tb: 0.05,
      hb: 0.06,
      unit: "MJ/㎡",
      image: getImg("soc/l-item3.png"),
    },
  ]);

  return { barOption, itemList, pieOption };
}
