<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="不合格产品分布" />
    <div ref="chartRef" class="charts-container"></div>
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import * as echarts from "echarts";
import { allChartColors } from "@/views/screens/configs/chartsConfig";
import { unqualifiedProduct } from "@/api/screens";
const bigScreenData: any = inject("bigScreenData");
const chartRef = ref(null);

const gernerateOptionsWithData = (
  data: any,
  centerText: string,
  unitText: string
) => {
  const option = {
    color: allChartColors,
    backgroundColor: "transparent",
    title: {
      show: false,
    },
    textStyle: {
      fontSize: bigScreenData.value.fontSize * 1.8,
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
      textStyle: {
        fontSize: bigScreenData.value.fontSize * 1.8,
      },
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      right: 10,
      top: 20,
      bottom: 20,
      data: data.legendData,
    },
    series: [
      {
        name: "占比",
        type: "pie",
        radius: ["40%", "50%"],
        center: ["40%", "50%"],
        data: data.seriesData,
        // emphasis: {
        //   itemStyle: {
        //     shadowBlur: 10,
        //     shadowOffsetX: 0,
        //     shadowColor: "rgba(0, 0, 0, 0.5)",
        //   },
        // },
        label: {
          normal: {
            formatter: centerText + "\n" + unitText, // 显示数据标签，格式化为：名称\n百分比
            position: "center", // 标签的位置在饼图的中心
            textStyle: {
              fontSize: bigScreenData.value.fontSize * 2.5, // 标签字体大小
              color: "#00BCD4", // 标签字体颜色
            },
          },
        },
        labelLine: {
          normal: {
            show: false, // 不显示标签线
          },
        },
      },
    ],
  };
  return option;
};
onMounted(async () => {
  const chart = echarts.init(chartRef.value, "dark");
  let res = await unqualifiedProduct();
  let data = {
    legendData: res?.data?.list.map((item: any) => item.name) ?? [],
    seriesData: res?.data?.list ?? [],
  };

  if (res?.data?.list?.length > 0) {
    chart.setOption(
      gernerateOptionsWithData(data, res?.data?.total ?? 0, "件", "个")
    );
  }
});

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});
</script>
