<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 { defectDistribution } from "@/api/screens";
import { allChartColors } from "@/views/screens/configs/chartsConfig";
const bigScreenData: any = inject("bigScreenData");
const chartRef = ref(null);

onMounted(async () => {
  const chart = echarts.init(chartRef.value, "dark");

  let res = await defectDistribution();

  let seriesData = [];
  for (let i = 0; i < res?.data?.bugDetailList.length; i++) {
    let item = res.data.bugDetailList[i];
    seriesData.push({
      type: "bar",
      name: item.bugName,
      // tooltip: {
      //   valueFormatter: function (value) {
      //     return value + " ml";
      //   },
      // },
      data: item?.counts ?? [],
    });
  }

  let option = {
    color: allChartColors,
    backgroundColor: "transparent",
    textStyle: {
      fontSize: bigScreenData.value.fontSize * 2,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        // crossStyle: {
        //   color: "#999",
        // },
      },
      textStyle: {
        fontSize: bigScreenData.value.fontSize * 2,
      },
    },
    legend: {
      data: res?.data?.bugName ?? [],
    },
    xAxis: [
      {
        type: "category",
        data: res?.data?.weeks ?? [],
        axisPointer: {
          type: "shadow",
        },
        axisLabel: {
          fontSize: bigScreenData.value.fontSize * 2,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "数量",
        // min: 0,
        // max: 250,
        // interval: 50,
        axisLabel: {
          formatter: "{value} ",
          fontSize: bigScreenData.value.fontSize * 2,
        },
       
      },
    ],
    series: seriesData,
  };

  chart.setOption(option);
});

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

<style lang="scss" scoped></style>
