<template>
  <a-row :gutter="16" align="middle">
    <a-col v-for="(item, index) in seriesStatusData" :key="index" :span="8">
      <div :id="`chartPie${item.key}`" style="width: 150px; height: 200px"></div>
    </a-col>
  </a-row>
</template>
<script lang="ts">
  import { defineComponent, PropType, onMounted, toRefs } 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 { seriesStatusData } = toRefs(props);
      const total = seriesStatusData.value
        .map((m) => m.value)
        .reduce((prev, cur) => prev! + cur!, 0);

      onMounted(() => {
        seriesStatusData.value.forEach((item) => {
          initEchart(item.key, item, item.value);
        });
      });

      const initEchart = (id, item, value) => {
        //牵引线条颜色
        const labelLine = {
          normal: {
            show: true,
            length: 20,
            length2: 20,
            lineStyle: {
              color: '#808080',
            },
          },
        } as any;
        const legendKey = item.key == 'onLine' ? '在线' : item.key == 'offLine' ? '离线' : '待激活';
        const echartInstance = echarts.init(
          document.getElementById(`chartPie${id}`) as HTMLElement
        );
        echartInstance.setOption({
          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: '14px 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,
            },
          ],
        });
        window.addEventListener('resize', () => echartInstance.resize());
      };
    },
  });
</script>