<template>
  <div>
    <div class="algo-header">
      <span class="algo-tit">算法数据分析</span>
      <CensusTabs @check-tab="onCheckTab" />
    </div>
    <el-divider />
    <div style="flex-grow: 1; display: flex">
      <v-chart class="chart" :option="option" />
      <el-divider direction="vertical" border-style="solid" />
      <div class="stat-show">
        <ViolationStatItem :data="getVioStatData(0)" class="stat-data" />
        <div class="stat-divider"></div>
        <ViolationStatItem :data="getVioStatData(1)" class="stat-data" />
        <ViolationStatItem :data="getVioStatData(2)" class="stat-data" />
        <div class="stat-divider"></div>
        <ViolationStatItem :data="getVioStatData(3)" class="stat-data" /> </div
    ></div>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import CensusTabs from './AlgoCensusTabs.vue';
  import ViolationStatItem from './ViolationStatItem.vue';
  import { TimeTabEnum, violationHandleCounts } from '../types';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { PieChart } from 'echarts/charts';
  import { TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components';
  import { ViolationCount } from '@/api/home/home.ts';
  import VChart from 'vue-echarts';

  const props = defineProps<{
    data: ViolationCount;
    getViolations: (range: string[]) => void;
  }>();

  use([CanvasRenderer, PieChart, TooltipComponent, TitleComponent, LegendComponent]);

  const algoData = computed(() => {
    let newData: any[] = [];
    const vioList = props.data.violationAlgoList;
    if (vioList && vioList.length) {
      newData = vioList.map((item) => {
        return {
          value: item.proportion,
          name: item.name,
        };
      });
    }
    console.log(newData);

    return newData;
  });

  const algoLegendData = computed(() => {
    return algoData.value.map((item) => item.name);
  });
  //  [
  //   { value: 335, name: "人员闯入" },
  //   { value: 310, name: "未穿反光背心" },
  //   { value: 2, name: "明火烟雾" },
  //   { value: 135, name: "机翼保护垫" },
  //   { value: 148, name: "工装未归位" },
  //   { value: 335, name: "人员闯入1" },
  //   { value: 310, name: "未穿反光背心1" },
  //   { value: 2, name: "明火烟雾1" },
  //   { value: 135, name: "机翼保护垫1" },
  //   { value: 148, name: "工装未归位1" },
  // ];

  const statData = computed(() => props.data.statusCountList);

  const getVioStatData = (index) => {
    let count = 0;
    if (statData.value && statData.value.length) {
      const matchItem = statData.value.find(
        (item) => item.name === violationHandleCounts[index].value,
      );
      if (matchItem) {
        count = matchItem.value;
      }
    }
    return { ...violationHandleCounts[index], count };
  };

  // const option = computed(() => {
  //   return {
  //     tooltip: {
  //       trigger: 'item',
  //       formatter: '{a} <br/>{b} : {c} ({d}%)',
  //     },
  //     legend: {
  //       orient: 'horizontial',
  //       x: 'center',
  //       y: 'bottom',
  //       icon: 'circle',
  //       width: '80%',
  //       height: '28%',
  //       type: 'scroll',
  //       data: algoData.value.map((item) => item.name),
  //       formatter: function (name) {
  //         let total = 0;
  //         let target;
  //         for (let i = 0; i < algoData.value.length; i++) {
  //           total += algoData.value[i].value;
  //           if (algoData.value[i].name === name) {
  //             target = algoData.value[i].value;
  //           }
  //         }
  //         var arr = [
  //           '{a|' + name + '}',
  //           '{b|' + ' | ' + ((target / total) * 100).toFixed(0) + '%}\n',
  //         ];
  //         return arr.join('  ');
  //       },
  //       textStyle: {
  //         padding: [8, 0, 0, 0],
  //         fontSize: 14,
  //         rich: {
  //           a: {
  //             fontSize: 15,
  //           },
  //           b: {
  //             fontSize: 15,
  //             color: '#c1c1c1',
  //           },
  //         },
  //       },
  //     },
  //     series: [
  //       {
  //         name: '违规统计',
  //         type: 'pie',
  //         radius: ['40%', '65%'],
  //         center: ['50%', '40%'],
  //         labelLine: {
  //           show: false,
  //         },

  //         label: {
  //           show: false,
  //           position: 'center',
  //         },
  //         data: algoData.value,
  //         itemStyle: {
  //           borderColor: '#fff',
  //           borderWidth: 5,
  //         },
  //         emphasis: {
  //           label: {
  //             show: true,
  //             fontSize: 20,
  //             fontWeight: 'bold',
  //           },
  //           itemStyle: {
  //             shadowBlur: 10,
  //             shadowOffsetX: 0,
  //             shadowColor: 'rgba(0, 0, 0, 0.5)',
  //           },
  //         },
  //       },
  //     ],
  //   };
  // });

  //动态获取title的left比例
  const screenWidth = window.innerWidth;
  const titleLeft = computed(() => ((screenWidth * 0.3 - 350 * 0.2) * 100) / screenWidth + '%');

  const option = computed(() => {
    return {
      title: {
        text: '算法占比', // 设置标题文本
        left: titleLeft.value, // 标题居中对齐
        top: 'center',
        textStyle: {
          fontSize: 20,
        },
      },
      // tooltip: {
      //   trigger: 'item',
      // },
      grid: {
        left: '10px',
        right: '4%',
        bottom: '3%',
      },
      legend: [
        {
          icon: 'circle',
          orient: 'vertical',
          type: 'scroll',
          left: '65%',
          top: 'center',
          itemWidth: 10,
          itemHeight: 10,
          align: 'left',
          textStyle: {
            fontSize: 14,
            color: '#6e69b2',
          },
          data: algoLegendData.value,
          formatter: function (name) {
            if (algoData.value && algoData.value.length) {
              for (var i = 0; i < algoData.value.length; i++) {
                if (name === algoData.value[i].name) {
                  return (
                    '' + name + '   |   ' + ' ' + (algoData.value[i].value * 100).toFixed(2) + '%'
                  );
                }
              }
            }
          },
        },
      ],

      series: [
        {
          // name: 'Access From',
          center: ['30%', '50%'],
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            // position: 'center',
          },

          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: 'bold',
              formatter: '{b}:   {d}%',
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          labelLine: {
            show: false,
          },
          data: algoData.value,
        },
      ],
    };
  });

  const timeTab = ref<TimeTabEnum>(TimeTabEnum.DAY);

  const onCheckTab = (info: { tab: TimeTabEnum; data: string[] }) => {
    timeTab.value = info.tab;
    props.getViolations(info.data);
  };
</script>

<style scoped>
  .algo-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .chart {
    width: 100%;
    flex-grow: 1;
    height: 340px;
  }
  .el-divider--horizontal {
    margin: 0px;
  }

  .algo-tit {
    font-size: 16px;
    margin-top: 17px;
    margin-left: 18px;
  }

  .stat-show {
    flex-grow: 0;
    width: 266px;
    flex-shrink: 0;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin-top: 72px;
    margin-bottom: 82px;
  }

  .stat-data {
    flex-basis: calc(50% - 1px);
    padding-bottom: 35px;
  }

  .stat-divider {
    width: 1px;
    height: 40px;
    background: #e9e9e9;
  }

  .el-divider--vertical {
    margin: 0px;
    height: 339px;
  }

  /* 控制图例的样式 */
  ::v-deep .echarts-legend {
    display: flex;
    flex-wrap: wrap; /* 图例换行 */
  }

  ::v-deep .echarts-legend-item {
    flex: 0 0 50%; /* 每行显示两个图例 */
  }
</style>
