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

<script>
import * as echarts from 'echarts'

import {
  problemAttributeCategoryView1,
  problemAttributeCategoryView2,
  problemAttributeCategoryView3,
  problemAttributeCategoryView4
} from '@/api/allApi/index.js'
export default {
  name: 'PostCheckWebCenterBigchart',
  props: {
    type: {
      type: Number,
      default: 1
    },
    queryParams: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      integrityList: [],
      suitabilityList: [],
      effectivenessList: []
    }
  },

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

  methods: {
    async initList() {
      this.integrityList = []
      this.suitabilityList = []
      this.effectivenessList = []
      if (this.type == 1) {
        const res = await problemAttributeCategoryView1(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.titleList = []
          this.integrityList = []
          this.suitabilityList = []
          this.effectivenessList = []
        } else {
          res.data.forEach((item) => {
            this.integrityList.push(item.problemComplete)
            this.suitabilityList.push(item.problemSuitable)
            this.effectivenessList.push(item.problemEffective)
          })
        }
      } else if (this.type == 2) {
        const res = await problemAttributeCategoryView2(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.titleList = []
          this.integrityList = []
          this.suitabilityList = []
          this.effectivenessList = []
        } else {
          res.data.forEach((item) => {
            this.integrityList.push(item.problemComplete)
            this.suitabilityList.push(item.problemSuitable)
            this.effectivenessList.push(item.problemEffective)
          })
        }
      } else if (this.type == 3) {
        const res = await problemAttributeCategoryView3(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.titleList = []
          this.integrityList = []
          this.suitabilityList = []
          this.effectivenessList = []
        } else {
          res.data.forEach((item) => {
            this.integrityList.push(item.problemComplete)
            this.suitabilityList.push(item.problemSuitable)
            this.effectivenessList.push(item.problemEffective)
          })
        }
      } else {
        const res = await problemAttributeCategoryView4(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.titleList = []
          this.integrityList = []
          this.suitabilityList = []
          this.effectivenessList = []
        } else {
          res.data.forEach((item) => {
            this.integrityList.push(item.problemComplete)
            this.suitabilityList.push(item.problemSuitable)
            this.effectivenessList.push(item.problemEffective)
          })
        }
      }
      setTimeout(() => {
        this.initTopLeftChartEcharts()
      }, 100)
    },
    initTopLeftChartEcharts() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['完整性问题', '适宜性问题', '有效性问题']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [
              '职责权限',
              '工作内容',
              '工作标准',
              '考核奖励',
              '任职资格',
              '其它'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '完整性问题',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.integrityList
          },
          {
            name: '适宜性问题',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.suitabilityList
          },
          {
            name: '有效性问题',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.effectivenessList
          }
        ]
      }
      const centerBigChart = echarts.init(
        document.getElementById('centerBigChart')
      ) // 图标初始化
      centerBigChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        centerBigChart.resize()
      })
    }
  }
}
</script>

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