<template>
  <div class="work-quality">
    <div class="dashboard-title">航站楼区域巡检热力图</div>

    <div ref="workQualityLine" style="width: 100%; height: 40%" />
    <div style="display: flex; justify-content: space-between;align-items: center; margin-top: 12px">
      <div class="dashboard-title">巡检问题分析</div>
      <div class="dashboard-right-menu">
        <span
          :class="{active: currentType === 'ranking_of_seizures_by_department'}"
          @click="handleClick('ranking_of_seizures_by_department')"
        >
          今日
        </span>
        <span
          :class="{active: currentType === 'ranking_of_seizures_by_team'}"
          @click="handleClick('ranking_of_seizures_by_team')"
        >
          本周
        </span>
        <span
          :class="{active: currentType === 'ranking_of_seizures_by_individual'}"
          @click="handleClick('ranking_of_seizures_by_individual')"
        >
          本月
        </span>
      </div>
    </div>
    <div style="height: 50%; display: flex;">
      <div ref="workQuality" style="width: 50%; height: 100%" />
      <div ref="workQualityPie" style="width: 50%; height: 100%" />
    </div>
  </div>
</template>
<script setup>
  import { onMounted, ref } from 'vue';
  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
  import { useEcharts } from '@/hooks/chart.js';

  const currentType = ref('ranking_of_seizures_by_department');
  const handleClick = (type) => {
    currentType.value = type;
  };

  // 航站楼区域巡检热力图
  const workQualityLine = ref(null);
  const chartLineOption = ref({
    grid: {
      left: '10',
      top: '20',
      right: '20',
      bottom: '0',
      containLabel: true,
    },
    visualMap: {
      min: 0,
      max: 100,
      calculable: false,
      orient: 'horizontal',
      itemWidth: 0,
      inRange: {
        color: ['#F9CBAA', '#C55C10', '#843E0B', '#785E01'],
      },
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLine: {
        lineStyle: {
          color: '#fbffff',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'category',
      data: [],
      axisLine: {
        lineStyle: {
          color: '#fbffff',
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: 'heatmap',
        data: [],
        itemStyle: {
          borderWidth: 1, //设置border宽度
          borderColor: '#fff',
        },
        label: {
          show: true,
        },
      },
    ],
  });
  const { setOption: setLineOption } = useEcharts(workQualityLine);

  // 问题类型分布
  const workQuality = ref(null);
  const chartOption = ref({
    title: {
      text: '问题类型分布',
      left: 'center',
      textStyle: {
        fontSize: 14,
        color: '#fbffff',
      },
    },
    legend: {
      bottom: 10,
      textStyle: {
        fontSize: 10,
        color: '#fbffff',
      },
    },
    tooltip: {
      show: false,
    },
    series: [
      {
        type: 'pie',
        legendHoverLink: false,
        radius: '40%',
        center: ['50%', '40%'],
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          disable: false,  //是否关闭扇区高亮效果
          scale: false,    //扇区是否缩放
          scaleSize: 0,
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  const { setOption } = useEcharts(workQuality);

  // 问题严重程度
  const workQualityPie = ref(null);
  const chartPieOption = ref({
    title: {
      text: '问题严重程度',
      left: 'center',
      textStyle: {
        fontSize: 14,
        color: '#fbffff',
      },
    },
    legend: {
      bottom: 10,
      textStyle: {
        fontSize: 10,
        color: '#fbffff',
      },
    },
    tooltip: {
      show: false,
    },
    series: [
      {
        type: 'pie',
        legendHoverLink: false,
        radius: ['40%', '30%'],
        center: ['50%', '40%'],
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          disable: false,  //是否关闭扇区高亮效果
          scale: false,    //扇区是否缩放
          scaleSize: 0,
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  const { setOption: setPieOption } = useEcharts(workQualityPie);

  onMounted(() => {
    // 航站楼区域巡检热力图
    executeSqlByKeyAndParam('thermal_map_of_terminal_area_inspection', {}).then(res => {
      const terminals = [...new Set(res.data.map(d => d.terminal_name))]; // Y 轴：航站楼
      const regions = [...new Set(res.data.map(d => d.regional_name))];   // X 轴：区域

      const heatmapData = res.data.map(item => {
        const xIndex = regions.indexOf(item.regional_name);
        const yIndex = terminals.indexOf(item.terminal_name);
        return [xIndex, yIndex, item.total_count];
      });

      chartLineOption.value.xAxis.data = regions;
      chartLineOption.value.yAxis.data = terminals;
      chartLineOption.value.series[0].data = heatmapData;

      setLineOption?.(chartLineOption.value);
    });
    // 巡检问题分析-问题类型分布
    executeSqlByKeyAndParam('distribution_of_problem_types', {}).then(res => {
      chartOption.value.series[0].data = res.data.map(el => {
        return {
          value: el.percentage,
          name: el.category_name,
        };
      });
      setOption?.(chartOption.value);
    });
    // 巡检问题分析-问题严重程度
    executeSqlByKeyAndParam('severity_of_the_problem', {}).then(res => {
      chartPieOption.value.series[0].data = res.data.map(el => {
        return {
          value: el.percentage,
          name: el.dict_label,
        };
      });
      setPieOption?.(chartPieOption.value);
    });
  });
</script>

<style lang="less" scoped>
  .work-quality {
    display: flex;
    flex-flow: column;
    height: 100%;
  }
</style>