import { ref } from "vue";



export const useMain = () => {
  var colorList = ["#73DDFF", "#73ACFF", "#FDD56A", "#FDB36A", "#FD866A", "#9E87FF", "#58D5FF"];

  const options = ref<Record<string, any>>({
    title: {
      text: `{a|总量}\n{b|0}`,
      textStyle: {
        rich: {
          a: {
            fontSize: 14,
            color: "#4E5969",
            lineHeight: 24,
          },
          b: {
            fontSize: 16,
            color: "#1D2129",
            lineHeight: 28,
            fontWeight: "bold",
          },
        },
      },
      left: "50%", // 水平居中
      top: "50%", // 垂直居中
      textAlign: "center",
      textVerticalAlign: "middle",
    },
    legend: {
      icon: "circle",
      bottom: "0",
      left: "center",
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: "#556677",
      },
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["40%", "65%"],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        // itemStyle: {
        //   normal: {
        //     color: function (params: Record<string, any>) {
        //       return colorList[params.dataIndex];
        //     },
        //   },
        // },
        label: {
          show: true,
          position: "outer",
          formatter: "{a|{b}：}\n{value|{d}}%",
          distanceToLabelLine: 10,
          rich: {
            a: {
              fontSize: 14,
              color: "#4E5969",
              lineHeight: 20,
              padding: [0, 0, 8, 0],
              // padding: [-30, 15, -20, 15],
            },
            value: {
              fontSize: 14,
              color: "#1D2129",
              lineHeight: 24,
            },
          },
        },
        labelLine: {
          normal: {
            length: 20,
            length2: 20,
            lineStyle: {
              width: 1,
            },
          },
        },
        data: [],
      },
    ],
  });

  // const options = ref<Record<string, any>>(t);

  return {
    options,
    colorList,
  };
};
