<template>
  <div class="opGradeBox box">
    <header>
      <div>
        <p class="panmen">ASA等级</p>
      </div>
    </header>
    <main>
      <div id="chartBottomMid" class="h-full"></div>
    </main>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { GetMonitorOperationASALevel } from '@/api/monitor';
import dayjs from 'dayjs';
export default {
  data() {
    return {
      pageList: [
        { name: "I 级", value: 0, color: "#23C2DB" },
        { name: "II 级", value: 0, color: "#5B98E3" },
        { name: "III 级", value: 0, color: "#946FEC" },
        { name: "IV 级", value: 0, color: "#B53FDF" },
        { name: "V 级", value: 0, color: "#fbc357" },
        { name: "VI 级", value: 0, color: "#91c7ae" }
      ],
      myChart: null
    };
  },
  methods: {
    onGetPageData() {
      GetMonitorOperationASALevel(dayjs().format('YYYY-MM-DD')).then(res => {
        this.pageList[0].value = res.data['asaLevel1'];
        this.pageList[0].name = `一级 ${res.data['asaLevel1'].toString().padStart(4, ' ')}`;
        this.pageList[1].value = res.data['asaLevel2'];
        this.pageList[1].name = `二级 ${res.data['asaLevel2'].toString().padStart(4, ' ')}`;
        this.pageList[2].value = res.data['asaLevel3'];
        this.pageList[2].name = `三级 ${res.data['asaLevel3'].toString().padStart(4, ' ')}`;
        this.pageList[3].value = res.data['asaLevel4'];
        this.pageList[3].name = `四级 ${res.data['asaLevel4'].toString().padStart(4, ' ')}`;
        this.pageList[4].value = res.data['asaLevel5'];
        this.pageList[4].name = `五级 ${res.data['asaLevel5'].toString().padStart(4, ' ')}`;
        this.pageList[5].value = res.data['asaLevel6'];
        this.pageList[5].name = `六级 ${res.data['asaLevel6'].toString().padStart(4, ' ')}`;
        this.updateChart();
      });
    },
    updateChart() {
      const total = this.pageList.reduce((sum, item) => sum + item.value, 0);

      // 每个数据后面插入一个透明块，用来制造断开效果
      const seriesData = [];
      this.pageList.forEach(item => {
        seriesData.push({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: item.color,
            borderRadius: 10
          }
        });
        if (total > 0) {
          seriesData.push({
            value: total * 0.004,
            itemStyle: { color: "transparent" },
            tooltip: { show: false }
          });
        }

      });

      const option = {
        legend: {
          bottom: 0,
          orient: "horizontal",
          icon: "circle",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20,
          width: 280,
          textStyle: { color: "#666" },
          data: this.pageList.map(d => d.name)
        },
        graphic: {
          type: "text",
          left: "center",
          top: "41%",
          style: {
            text: "ASA分级",
            textAlign: "center",
            fill: "#91909A",
            fontSize: 28,
            fontWeight: 500
          }
        },
        series: [
          {
            type: "pie",
            radius: ["64%", "76%"],
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            label: { show: false },
            labelLine: { show: false },
            hoverAnimation: false,
            data: seriesData
          }
        ]
      };

      this.myChart.setOption(option);
    }
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("chartBottomMid"));
    this.onGetPageData();
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
};
</script>
