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

export function useLeft() {
  const pieChart = ref();

  const pieOption = chartsOptions<PieECOption>({
    legend: {
      show: false,
    },
    color: ["#3FA7FD", "#8AC540", "#F9AF39", "#82D8F9"],
    series: [
      {
        name: "类别统计",
        type: "pie",
        radius: ["40%", "55%"],
        center: ["50%", "39%"],
        emphasis: {
          label: {
            show: false,
          },
        },
        data: [
          {
            value: 20,
            name: "空调",
          },
          { value: 20, name: "照明" },
          { value: 20, name: "电梯" },
          { value: 20, name: "其他" },
        ],
        label: {
          color: "#fff",
          alignTo: "edge",
          fontSize: 14,
          minMargin: 5,
          edgeDistance: 20,
          lineHeight: 20,
          formatter: "{name|{b}}\n{value|{c}件} {pct|{d}%}",
          rich: {
            name: {
              color: "#B3E3E8",
            },
            value: {
              color: "#07E3F9",
            },
            pct: {
              color: "#D3D27B",
            },
          },
        },
        labelLayout: function (params: any) {
          const isLeft =
            params.labelRect.x < pieChart.value.$charts.getWidth() / 2;
          const points = params.labelLinePoints;
          // Update the end point.
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width;
          return {
            labelLinePoints: points,
          };
        },
        labelLine: {
          length: 5,
          length2: 3,
          smooth: true,
        },
      },
    ],
  });

  const itemList = ref([
    {
      name: "在线设备",
      value: 530,
      pct: 50,
      unit: "件",
      image: getImg("device/l2-item1_bg.png"),
    },
    {
      name: "故障设备",
      value: 12,
      pct: 30,
      unit: "次",
      image: getImg("device/l2-item2_bg.png"),
    },
    {
      name: "离线设备",
      value: 6,
      pct: 20,
      unit: "次",
      image: getImg("device/l2-item3_bg.png"),
    },
  ]);

  return {
    itemList,
    pieOption,
    pieChart,
  };
}
