<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});
const trafficWay = [
  { value: 1600, name: "正常视频" },
  { value: 400, name: "无效视频" }
];

const mapData = [];
const color = ["#FFAB00", "#3B3EFF"];
const ColorCs = () => {
  for (let i = 0; i < trafficWay.length; i++) {
    mapData.push({
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      label: {
        rich: {
          percent: {
            color: color[i]
          }
        }
      }
    });
  }
  return mapData;
};

setOptions(
  {
    tooltip: {
      trigger: "item"
    },
    legend: {
      show: false,
      icon: "circle",
      //@ts-expect-error
      right: true
    },
    series: [
      {
        name: "视频分析",
        type: "pie",
        top: "10%",
        bottom: "10%",
        radius: "80%",
        center: ["50%", "50%"],
        color: ["#FFAB00", "#3B3EFF"],
        // roseType: "radius",
        label: {
          formatter: function (params) {
            let percent = "0";
            let total = 0;
            for (let i = 0; i < trafficWay.length; i++) {
              total += trafficWay[i].value;
            }
            percent = (((params.value as any) / total) * 100).toFixed(0);
            if (params.name !== "") {
              // return params.name + '\n' + percent + '%';
              return (
                "{percent|" + percent + "%}" + "\n{name|" + params.name + "}"
              );
            } else {
              return "";
            }
          },
          padding: [0, -55],
          rich: {
            name: {
              fontSize: 12,
              padding: [5, 0],
              align: "left"
            },
            percent: {
              fontSize: 14,
              align: "left",
              fontWeight: "bolder",
              padding: [5, 0]
            }
          }
        },
        labelLine: {
          length: 30,
          length2: 90 //第二条线
        },
        data: ColorCs()
        // emphasis: {
        //   itemStyle: {
        //     shadowBlur: 10,
        //     shadowOffsetX: 0,
        //     shadowColor: "rgba(0, 0, 0, 0.5)"
        //   }
        // }
      },
      {
        name: "",
        type: "pie",
        color: ["#155BD4", "rgba(255,255,255,0)"],
        center: ["50%", "50%"],
        radius: ["76%", "78%"],
        avoidLabelOverlap: false,
        // hoverAnimation: false,
        tooltip: {
          show: false
        },
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          //选中的样式
          label: {
            show: true //选中时不显示数据标签
          },
          labelLine: {
            show: true, //选中时不显示数据标签引导线
            // length: 50,
            lineStyle: {
              width: 1,
              type: "solid"
            }
          }
        },
        labelLine: {
          // normal: {
          show: false
          // }
        },
        data: new Array(80).fill(10).map(() => {
          return {
            name: "",
            value: 60
          };
        })
      }
    ]
  },
  {
    name: "click",
    callback: params => {
      console.log("click", params);
    }
  },
  // 点击空白处
  {
    type: "zrender",
    name: "click",
    callback: params => {
      console.log("点击空白处", params);
    }
  }
);

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="pieChartRef" style="width: 100%; height: 25vh" />
</template>
