<template>
  <div id="chartPieRef" style="width: 100%; height: 70vh"></div>
</template>

<script lang="ts" setup>
  import { ref, defineProps, nextTick, reactive, toRefs, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import { problemStat } from './api.ts';

  onMounted(() => {
    initProblemPie();
  });

  function initProblemPie() {
    problemStat().then((rep) => {
      const total = rep['total'];
      const finishNm = rep['finishNm'];
      const execNm = rep['execNm'];
      const planNm = rep['planNm'];
      const noAssignNm = rep['noAssignNm'];

      const myChart = echarts.init(document.getElementById('chartPieRef'));
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        title: [
          {
            text: total,
            textStyle: {
              color: '#808080',
              fontFamily: 'PlayfairDisplay',
              fontSize: 40,
            },
            subtext: '总问题数',
            subtextStyle: {
              color: '#808080',
              fontSize: 20,
            },
            textAlign: 'center',
            top: '13%',
            left: '50%',
          },
          {
            text: noAssignNm,
            textStyle: {
              color: '#866aab',
              fontFamily: 'PlayfairDisplay',
              fontSize: 40,
            },
            subtext: '未分配',
            subtextStyle: {
              color: '#808080',
              fontSize: 20,
            },
            textAlign: 'center',
            top: '63%',
            left: '12%',
          },
          {
            text: planNm,
            textStyle: {
              color: '#3e97d4',
              fontFamily: 'PlayfairDisplay',
              fontSize: 40,
            },
            subtext: '计划中',
            subtextStyle: {
              color: '#808080',
              fontSize: 20,
            },
            textAlign: 'center',
            top: '63%',
            left: '37%',
          },
          {
            text: execNm,
            textStyle: {
              color: '#88ccde',
              fontFamily: 'PlayfairDisplay',
              fontSize: 40,
            },
            subtext: '执行中',
            subtextStyle: {
              color: '#808080',
              fontSize: 20,
            },
            textAlign: 'center',
            top: '63%',
            left: '62%',
          },
          {
            text: finishNm,
            textStyle: {
              color: '#c6de83',
              fontFamily: 'PlayfairDisplay',
              fontSize: 40,
            },
            subtext: '已完成',
            subtextStyle: {
              color: '#808080',
              fontSize: 20,
            },
            textAlign: 'center',
            top: '63%',
            left: '87%',
          },
        ],
        legend: {
          x: 'center',
          y: 'bottom',
          orient: 'horizontal',
          width: 350,
          data: [
            { name: '未分配', itemStyle: { color: '#866aab' } },
            { name: '计划中', itemStyle: { color: '#3e97d4' } },
            { name: '执行中', itemStyle: { color: '#88ccde' } },
            { name: '已完成', itemStyle: { color: '#c6de83' } },
          ],
        },
        series: [
          /*大饼*/
          {
            name: '问题数',
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['50%', '20%'],
            data: [{ value: total, name: '总数', itemStyle: { color: '#3e97d4' } }],
            itemStyle: {
              //图形样式
              normal: {
                label: {
                  show: false,
                },
              },
            },
            // 辅助线
            markLine: {
              symbol: 'none', // 去掉辅助线首尾圆点和箭头
              silent: true, // 不响应和触发鼠标事件
              lineStyle: {
                type: 'dashed', // 虚线
              },
              data: [
                [
                  {
                    x: '43%',
                    y: '25%',
                    lineStyle: {
                      color: '#866aab',
                    },
                  },
                  {
                    x: '12%',
                    y: '56%',
                  },
                ],
                [
                  {
                    x: '47%',
                    y: '34%',
                    lineStyle: {
                      color: '#3e97d4',
                    },
                  },
                  {
                    x: '37%',
                    y: '56%',
                  },
                ],
                [
                  {
                    x: '53%',
                    y: '34%',
                    lineStyle: {
                      color: '#88ccde',
                    },
                  },
                  {
                    x: '64%',
                    y: '56%',
                  },
                ],
                [
                  {
                    x: '57%',
                    y: '25%',
                    lineStyle: {
                      color: '#c6de83',
                    },
                  },
                  {
                    x: '90%',
                    y: '56%',
                  },
                ],
              ],
            },
          },
          /*第一个小饼*/
          {
            name: '未分配',
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['12%', '70%'],
            data: [
              { value: noAssignNm, name: '未计划', itemStyle: { color: '#866aab' } },
              { value: total - noAssignNm, name: '其他', itemStyle: { color: '#e2e2e0' } },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },
          },
          {
            name: '计划中',
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['37%', '70%'],
            color: ['#c6de83', '#e2e2e0'],
            data: [
              { value: planNm, name: '未计划', itemStyle: { color: '#3e97d4' } },
              { value: total - planNm, name: '其他', itemStyle: { color: '#e2e2e0' } },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },
          },
          {
            name: '执行中',
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['62%', '70%'],
            data: [
              { value: execNm, name: '已执行', itemStyle: { color: '#88ccde' } },
              { value: total - execNm, name: '其他', itemStyle: { color: '#e2e2e0' } },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },
          },
          {
            name: '已完成',
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['87%', '70%'],
            data: [
              { value: finishNm, name: '已确认', itemStyle: { color: '#c6de83' } },
              { value: total - finishNm, name: '其他', itemStyle: { color: '#e2e2e0' } },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
              },
            },
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener('resize', function () {
        // 改变图表尺寸，在容器大小发生改变时需要手动调用
        myChart.resize();
      });
    });
  }
</script>
