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

<script>
import {
  dutyTypeProblemStatisticsView1,
  dutyTypeProblemStatisticsView2,
  dutyTypeProblemStatisticsView3,
  dutyTypeProblemStatisticsView4
} from '@/api/allApi/index.js'
import * as echarts from 'echarts'
export default {
  name: 'PostCheckWebTopCenterChart',
  props: {
    type: {
      type: Number,
      default: 1
    },
    queryParams: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      dataList: [],
      title:""
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.initList()
    })
    if(this.type == 3 ||this.type == 4){
      this.title = "岗检问题职责类别整改占比"
    }else {
      this.title = "岗检问题职责类别占比"
    }
  },

  methods: {
    async initList() {
      this.dataList = []
      if (this.type == 1) {
        const res = await dutyTypeProblemStatisticsView1(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.dataList = [
            { value: 0, name: '业务职责' },
            { value: 0, name: '安全环保' },
            { value: 0, name: '合规与保密职责' },
            { value: 0, name: '党建及党风廉政建设' }
          ]
        } else {
          this.dataList = [
            { value: res.data[0].dutyTypeOne, name: '业务职责' },
            { value: res.data[0].dutyTypeThree, name: '安全环保' },
            { value: res.data[0].dutyTypeFour, name: '合规与保密职责' },
            { value: res.data[0].dutyTypeTwo, name: '党建及党风廉政建设' }
          ]
        }
      } else if (this.type == 2) {
        const res = await dutyTypeProblemStatisticsView2(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.dataList = [
            { value: 0, name: '业务职责' },
            { value: 0, name: '安全环保' },
            { value: 0, name: '合规与保密职责' },
            { value: 0, name: '党建及党风廉政建设' }
          ]
        } else {
          this.dataList = [
            { value: res.data[0].dutyTypeOne, name: '业务职责' },
            { value: res.data[0].dutyTypeThree, name: '安全环保' },
            { value: res.data[0].dutyTypeFour, name: '合规与保密职责' },
            { value: res.data[0].dutyTypeTwo, name: '党建及党风廉政建设' }
          ]
        }
      } else if (this.type == 3) {
        const res = await dutyTypeProblemStatisticsView3(this.queryParams)
        console.log(res,7777);
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.dataList = [
            { value: 0, name: '业务职责' },
            { value: 0, name: '安全环保' },
            { value: 0, name: '合规与保密职责' },
            { value: 0, name: '党建及党风廉政建设' }
          ]
        } else {
          this.dataList = [
            { value: res.data[0].dutyTypeOne, name: '业务职责' },
            { value: res.data[0].dutyTypeThree, name: '安全环保' },
            { value: res.data[0].dutyTypeFour, name: '合规与保密职责' },
            { value: res.data[0].dutyTypeTwo, name: '党建及党风廉政建设' }
          ]
        }
      } else {
        const res = await dutyTypeProblemStatisticsView4(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.dataList = [
            { value: 0, name: '业务职责' },
            { value: 0, name: '安全环保' },
            { value: 0, name: '合规与保密职责' },
            { value: 0, name: '党建及党风廉政建设' }
          ]
        } else {
          this.dataList = [
            { value: res.data[0].dutyTypeOne, name: '业务职责' },
            { value: res.data[0].dutyTypeThree, name: '安全环保' },
            { value: res.data[0].dutyTypeFour, name: '合规与保密职责' },
            { value: res.data[0].dutyTypeTwo, name: '党建及党风廉政建设' }
          ]
        }
      }
      setTimeout(() => {
        this.initTopLeftChartEcharts()
      }, 100)
    },
    initTopLeftChartEcharts() {
      const option = {
        title: {
          text: this.title,
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        label:{},
        legend: {
          top: '8%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            data: this.dataList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      const topCenterChart = echarts.init(
        document.getElementById('topCenterChart')
      ) // 图标初始化
      topCenterChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        topCenterChart.resize()
      })
    }
  }
}
</script>

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