<template>
  <div style="width: 100%; height: calc(100% - 50px)">
    <div ref="samplingPartySituationChartBar" class="echarts" />
    <div ref="samplingPartySituationChart" class="echarts" />
  </div>
</template>

<script setup>
  import { onMounted, onUnmounted, ref } from 'vue';
  import * as echarts from 'echarts';
  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
  import { useEcharts } from '@/hooks/chart.js';

  const samplingPartySituationChartBar = ref(null);
  const chartBarOption = ref({
    grid: {
      left: '20',
      top: '40',
      right: '20',
      bottom: '0',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['班组级', '科级', '站级'],
      axisLine: {
        lineStyle: {
          color: '#fbffff',
        },
      },
    },
    yAxis: {
      type: 'value',
      name: '抽查次数',
      axisLine: {
        lineStyle: {
          color: '#fbffff',
        },
      },
    },
    series: [
      {
        data: [],
        type: 'bar',
      },
    ],
  });
  const { setOption: setSamplingPartySituationBarOption } = useEcharts(samplingPartySituationChartBar);

  const color = {
    colorA: {
      type: 'linear',
      x: 1,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: '#3AF5C3', // 0% 处的颜色
        },
        {
          offset: 1,
          color: '#3DF1AB', // 100% 处的颜色
        },
      ],
      global: false, // 缺省为 false
    },
    colorB: {
      type: 'linear',
      x: 1,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: '#14C5CE', // 0% 处的颜色
        },
        {
          offset: 1,
          color: '#09AEE8', // 100% 处的颜色
        },
      ],
      global: false, // 缺省为 false
    },
    colorC: {
      type: 'linear',
      x: 1,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: '#FF664E', // 0% 处的颜色
        },
        {
          offset: 1,
          color: '#FF4056', // 100% 处的颜色
        },
      ],
      global: false, // 缺省为 false
    },
  };
  const ops = ref({
    radius: '60%',
    startAngle: 90,
    endAngle: -270,
    pointer: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    title: {
      fontSize: 12,
      color: '#fbffff',
    },
    detail: {
      fontSize: 12,
      color: '#fbffff',
    },
  });
  const samplingPartySituationChart = ref(null);
  const chartOption = ref({
    series: [
      {
        type: 'gauge',
        center: ['15%', '50%'],
        data: [
          {
            value: 0,
            name: '班组级异常率',
            title: {
              offsetCenter: ['0%', '-10%'],
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%',
            },
          },
        ],
        ...ops.value,
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            color: color.colorA,
          },
        },
      },
      {
        type: 'gauge',
        center: ['50%', '50%'],
        data: [
          {
            value: 0,
            name: '班科级异常率',
            title: {
              offsetCenter: ['0%', '-10%'],
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%',
            },
          },
        ],
        ...ops.value,
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            color: color.colorA,
          },
        },
      },
      {
        type: 'gauge',
        center: ['85%', '50%'],
        data: [
          {
            value: 0,
            name: '站级异常率',
            title: {
              offsetCenter: ['0%', '-10%'],
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%',
            },
          },
        ],
        ...ops.value,
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            color: color.colorA,
          },
        },
      },
    ],
  });
  const { setOption: setSamplingPartySituationOption } = useEcharts(samplingPartySituationChart);


  onMounted(() => {
    executeSqlByKeyAndParam('spot_check_the_situation_of_the_inspection_party', {}).then(res => {
      const data = res.data;
      chartBarOption.value.series[0].data = data.map(el => el.total_count);
      const levelMap = {
        TEAM_LEVEL: 0,
        DEPARTMENT_LEVEL: 1,
        STATION_LEVEL: 2,
      };

      data.forEach(el => {
        const index = levelMap[el.check_level];
        if (index !== undefined) {
          chartOption.value.series[index].progress.itemStyle.color = el.fail_percentage <= 30 ? color.colorA : el.fail_percentage <= 60 ? color.colorB : color.colorC;
          chartOption.value.series[index].data[0].value = el.fail_percentage;
        }
      });
      setSamplingPartySituationBarOption?.(chartBarOption.value);
      setSamplingPartySituationOption?.(chartOption.value);
    });
  });
</script>

<style scoped>
  .echarts {
    height: 50%;
    width: 100%;
  }
</style>
