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

<script>
import {
  problemLevelView1,
  problemLevelView2,
  problemLevelView3,
  problemLevelView4
} from '@/api/allApi/index.js'
import * as echarts from 'echarts'
export default {
  name: 'PostCheckWebTopRigthChart',
  props: {
    type: {
      type: Number,
      default: 1
    },
    queryParams: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      dataList: []
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.initList()
    })
  },

  methods: {
    async initList() {
      this.dataList = []
      if (this.type == 1) {
        const res = await problemLevelView1(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.dataList = [0, 0]
        } else {
          this.dataList = [
            res.data[0].problemLeveOne,
            res.data[0].problemLeveTwo
          ]
        }
      } else if (this.type == 2) {
        const res = await problemLevelView2(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.dataList = [0, 0]
        } else {
          this.dataList = [
            res.data[0].problemLeveOne,
            res.data[0].problemLeveTwo
          ]
        }
      } else if (this.type == 3) {
        const res = await problemLevelView3(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.dataList = [0, 0]
        } else {
          this.dataList = [
            res.data[0].problemLeveOne,
            res.data[0].problemLeveTwo
          ]
        }
      } else {
        const res = await problemLevelView4(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.dataList = [0, 0]
        } else {
          this.dataList = [
            res.data[0].problemLeveOne,
            res.data[0].problemLeveTwo
          ]
        }
      }
      this.dataList = JSON.parse(JSON.stringify(this.dataList))
      setTimeout(() => {
        this.initTopLeftChartEcharts()
      }, 100)
    },
    initTopLeftChartEcharts() {
      const option = {
        title: {
          text: '岗检问题级别占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '8%',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: ['重要问题', '一般问题']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.dataList,
            type: 'bar',
            barWidth: '35%'
          }
        ]
      }
      const topRigthChart = echarts.init(
        document.getElementById('topRigthChart')
      ) // 图标初始化
      topRigthChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        topRigthChart.resize()
      })
    }
  }
}
</script>

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