<template>
  <div id="alarmType" class="chart-container"></div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { mainGet } from '@/api/faultManage/actAlarm';
import * as echarts from 'echarts/core';
import {
  GridComponent,
  TitleComponent,
  TooltipComponent,
  LegendComponent, //
} from 'echarts/components';
import { BarChart, PieChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { LabelLayout } from 'echarts/features';
import useI18n from '@/hooks/useI18n';
const { t, currentLocale } = useI18n();
echarts.use([
  GridComponent,
  BarChart,
  CanvasRenderer,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);
// 将现有数据补全为期望的格式
function completeData(existingData: any, expectedData: any) {
  let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } };
  const result = expectedData.map((item: any) => {
    const found = existingData.find(
      (existingItem: any) => existingItem.name === item.name
    );
    if (found) return found;
    else {
      return item;
    }
  });
  var lang = currentLocale.value.split('_')[0];
  result.forEach((item: any) => {
    item.name = t('views.index.' + item.name);
  });
  return result;
}

function fnDesign() {
  mainGet().then((res: any) => {
    const expectedData = [
      {
        name: 'CommunicationAlarm',
        value: 0,
      },
      {
        name: 'EquipmentAlarm',
        value: 0,
      },
      {
        name: 'ProcessingFailure',
        value: 0,
      },
      {
        name: 'EnvironmentalAlarm',
        value: 0,
      },
      {
        name: 'QualityOfServiceAlarm',
        value: 0,
      },
    ];
    var chartDom = document.getElementById('alarmType');
    var myChart = echarts.init(chartDom);
    var option: any;
    var colorList = [
      '#afa3f5',
      '#00d488',
      '#3feed4',
      '#3bafff',
      '#f1bb4c',
      '#aff',
      'rgba(250,250,250,0.5)',
    ];
    option = {
      grid: {
        bottom: 120,
        left: 0,
        right: '10%',
      },
      legend: {
        show: false,
        orient: 'vertical',
        top: 'middle',
        right: '5%',
        textStyle: {
          color: '#f2f2f2',
          fontSize: 25,
        },
        icon: 'roundRect',
      },
      series: [
        // 主要展示层的
        {
          radius: ['29%', '59%'],
          center: ['50%', '50%'],
          type: 'pie',
          itemStyle: {
            normal: {
              color: function (params: any) {
                return colorList[params.dataIndex];
              },
            },
          },
          labelLine: {
            show: true,
            length: 10,
            length2: 120,
            align: 'right',
            color: '#000',
          },
          label: {
            show: true,
            formatter: '({d}%){b}:{c}',
            padding: [0, -120],
            fontSize:15,
            height: 35,
            alignTo: 'labelLine',
            color: 'auto',
            rich: {
              name: {
                color: '#ff0000', // 修改名称颜色
              },
            },
          },
          data: [
            { value: 1, name: '通信告警' },
            { value: 1, name: '设备告警' },
            { value: 1, name: '服务质量' },
            { value: 1, name: '环境告警' },
            { value: 1, name: '处理错误' },
          ],
        },
        // 边框的设置
        {
          radius: ['54%', '59%'],
          center: ['50%', '50%'],
          type: 'pie',
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          animation: false,
          tooltip: {
            show: false,
          },
          itemStyle: {
            normal: {
              color: 'rgba(250,250,250,0.5)',
            },
          },
          data: [
            {
              value: 1,
            },
          ],
        },
      ],
    };
    option && myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
    // 点击圆形饼状图
    myChart.on('click', (params: any) => {
      // 根据点击的数据params更新柱状图的数据
      // const newData = generateNewData(params.name); // 根据点击的数据生成新的柱状图数据
      // updateBarChart(newData); // 更新柱状图
    });
  });
}

onMounted(() => {
  fnDesign();
});
</script>

<style lang="less" scoped>
.chart-container {
  /* 设置图表容器大小和位置 */
  width: 100%;
  height: 100%;
}
</style>
