<template>
  <div style="width: 100%; height: 100%">
    <div
      id="centerChart"
      class="echart"
      :style="{
        width: '98%',
        height: '80%'
      }"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'

import {
  totalView,
  problemRectification,
  planCompletionRate
} from '@/api/allApi/index.js'

export default {
  name: 'PostCheckWebCenterTop',

  data() {
    return {
      dataObj: [],
      percentageList: [],
      total: 0,

      isTotal: 0,
      isOverTotal: 0,
      perBfb: 0
    }
  },

  mounted() {
    // this.initTotalView()
    this.initPlanCompletionRate()
  },

  methods: {
    async initTotalView() {
      const res = await totalView()
      if (res.code !== 200) return this.$message.error(res.msg)
      if (res.data.problemCount) {
        this.total = res.data.problemCount
        localStorage.setItem('total', this.total)
        this.initProblemRectification()
      }
    },
    async initPlanCompletionRate() {
      const res = await planCompletionRate()
      if (res.code !== 200) return this.$message.error(res.msg)
      console.log(res, 999)
      this.isTotal = res.data[1] + res.data[2]
      this.isOverTotal = res.data[2]
      this.perBfb = res.data[3]

      localStorage.setItem('isTotal', this.isTotal)
      localStorage.setItem('isOverTotal', this.isOverTotal)
      localStorage.setItem('perBfb', this.perBfb)

      this.$nextTick(() => {
        this.initCenterEcharts()
      })
    },

    // 获取岗检问题整改率
    initProblemRectification() {
      problemRectification().then((res) => {
        localStorage.setItem('percentage', Object.entries(res.data)[0][1])
      })
      this.$nextTick(() => {
        this.initCenterEcharts()
      })
    },
    initCenterEcharts() {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            label: {
              show: true, // 显示标签
              position: 'inside', // 在饼图内部显示标签
              formatter: '{b}：{d}%',
              normal: {
                position: 'center',
                fontSize: '30',
                formatter: function (data) {
                  // 设置圆饼图中间文字排版
                  return   (JSON.parse(localStorage.getItem('perBfb')) * 100).toFixed(0)  + '%'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: JSON.parse(localStorage.getItem('isTotal')) * 1,
                name: '应检岗位数量',
                label: {
                  fontSize: 30,
                  fontWeight: 'bold'
                }
              },
              {
                label: {
                  fontSize: 30,
                  fontWeight: 'bold'
                },
                value: JSON.parse(localStorage.getItem('isOverTotal')) * 1,
                name: '已检岗位数量'
              }
            ]
          }
        ]
      }
      const centerChart = echarts.init(document.getElementById('centerChart')) // 图标初始化
      centerChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        centerChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>