<template>
  <a-row type="flex" justify="space-between" align="middle">
    <a-col
      class="flex items-center"
      v-for="(item, index) in seriesStatusData"
      :key="index"
      :span="8"
    >
      <a-col
        :id="`chartPie${item.key}`"
        style="width: 10rem; height: 12rem; position: relative; top: -0.7rem"
      />
    </a-col>
  </a-row>
</template>
<script lang="ts">
  import {
    defineComponent,
    PropType,
    onMounted,
    toRefs,
    shallowReactive,
    onUnmounted,
    nextTick,
  } from 'vue';
  import * as echarts from 'echarts';
  import { seriesDataT } from './props';

  export default defineComponent({
    props: {
      seriesStatusData: {
        type: Array as PropType<seriesDataT[]>,
        default: () => [],
      },
    },

    setup(props) {
      const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});

      const { seriesStatusData } = toRefs(props);

      const total = seriesStatusData.value
        .map((m) => m.value)
        .reduce((prev, cur) => prev! + cur!, 0);

      nextTick(() => {
        for (const item of seriesStatusData.value) {
          const { key, value } = item;
          //牵引线条颜色
          const labelLine = {
            normal: {
              show: true,
              length: 20,
              length2: 20,
              lineStyle: {
                color: '#808080',
              },
            },
          } as any;
          const legendKey = key == 'onLine' ? '在线' : key == 'offLine' ? '离线' : '待激活';
          chartsInstance[key!] = echarts.init(
            document.getElementById(`chartPie${key}`) as HTMLElement
          );
          const option = {
            backgroundColor: '#ffffff',
            tooltip: {
              trigger: 'item',
              formatter: `${legendKey}设备${((value! / total!) * 100).toFixed(2)}%`,
            },
            graphic: [
              {
                type: 'text',
                left: '42%',
                top: '48%',
                z: 10,
                style: {
                  fill: '#1a1a1a',
                  text: value + '个',
                  font: '1.25vh Microsoft YaHei',
                },
              },
            ],
            series: [
              {
                data: [item],
                avoidLabelOverlap: false,
                type: 'pie',
                radius: ['40%', '60%'],
                label: {
                  normal: {
                    show: true,
                    position: 'outer',
                    formatter: `${legendKey}${((value! / total!) * 100).toFixed(2)}%`,
                    borderWidth: 5,
                    borderRadius: 0,
                    padding: [90, -60],
                  },
                },
                labelLine,
              },
            ],
          };
          chartsInstance[key!].setOption(option);
        }
      });

      const resize = (flag) => {
        Object.keys(chartsInstance).forEach((key) => {
          const doFuncKey = chartsInstance[key];
          flag === 'r' ? doFuncKey.resize() : doFuncKey.dispose();
        });
      };

      onMounted(() => {
        window.addEventListener('resize', () => resize('r'));
      });

      onUnmounted(() => {
        window.removeEventListener('resize', () => resize('d'));
      });
    },
  });
</script>