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

<script>
import * as echarts from 'echarts'

import {
  historyProblemNumberView1,
  historyProblemNumberView2,
} from '@/api/allApi/index.js'

export default {
  name: 'PostCheckWebTopBigChart',
  props: {
    type: {
      type: Number,
      default: 1
    },
    queryParams: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      titleList: [],
      problemCategoryFiveList: [],
      problemCategoryFourList: [],
      problemCategoryOneList: [],
      problemCategorySixList: [],
      problemCategoryThreeList: [],
      problemCategoryTwoList: [],
      problemCompleteList: [],
      problemEffectiveList: [],
      problemSuitableList: [],
      problemTotalList: []
    }
  },

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

  methods: {
    async initList() {
      this.titleList = []
      this.problemCategoryFiveList = []
      this.problemCategoryFourList = []
      this.problemCategoryOneList = []
      this.problemCategorySixList = []
      this.problemCategoryThreeList = []
      this.problemCategoryTwoList = []
      this.problemCompleteList = []
      this.problemEffectiveList = []
      this.problemSuitableList = []
      this.problemTotalList = []
      if (this.type == 1) {
        const res = await historyProblemNumberView1(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.titleList = []
          this.problemCategoryFiveList = []
          this.problemCategoryFourList = []
          this.problemCategoryOneList = []
          this.problemCategorySixList = []
          this.problemCategoryThreeList = []
          this.problemCategoryTwoList = []
          this.problemCompleteList = []
          this.problemEffectiveList = []
          this.problemSuitableList = []
          this.problemTotalList = []
        } else {
          res.data.forEach((item) => {
            this.titleList.push(item.checkYear.split('-')[0])
            this.problemCategoryFiveList.push(item.problemCategoryFive)
            this.problemCategoryFourList.push(item.problemCategoryFour)
            this.problemCategoryOneList.push(item.problemCategoryOne)
            this.problemCategorySixList.push(item.problemCategorySix)
            this.problemCategoryThreeList.push(item.problemCategoryThree)
            this.problemCategoryTwoList.push(item.problemCategoryTwo)
            this.problemCompleteList.push(item.problemComplete)
            this.problemEffectiveList.push(item.problemEffective)
            this.problemSuitableList.push(item.problemSuitable)
            this.problemTotalList.push(item.problemTotal)
          })
        }
      } else if (this.type == 2) {
        const res = await historyProblemNumberView2(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.titleList = []
          this.problemCategoryFiveList = []
          this.problemCategoryFourList = []
          this.problemCategoryOneList = []
          this.problemCategorySixList = []
          this.problemCategoryThreeList = []
          this.problemCategoryTwoList = []
          this.problemCompleteList = []
          this.problemEffectiveList = []
          this.problemSuitableList = []
          this.problemTotalList = []
        } else {
          res.data.forEach((item) => {
            this.titleList.push(item.checkYear.split('-')[0])
            this.problemCategoryFiveList.push(item.problemCategoryFive)
            this.problemCategoryFourList.push(item.problemCategoryFour)
            this.problemCategoryOneList.push(item.problemCategoryOne)
            this.problemCategorySixList.push(item.problemCategorySix)
            this.problemCategoryThreeList.push(item.problemCategoryThree)
            this.problemCategoryTwoList.push(item.problemCategoryTwo)
            this.problemCompleteList.push(item.problemComplete)
            this.problemEffectiveList.push(item.problemEffective)
            this.problemSuitableList.push(item.problemSuitable)
            this.problemTotalList.push(item.problemTotal)
          })
        }
      }
      setTimeout(() => {
        this.initTopBigChartEcharts()
      }, 100)
    },
    initTopBigChartEcharts() {
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos
            return map
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      }
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          }
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          })
        }
      }
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: [
            '问题总数',
            '完整性',
            '适宜性',
            '有效性职责权限',
            '工作内容',
            '工作标准',
            '考核奖励',
            '任职资格',
            '其他'
          ]
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: this.titleList
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '问题总数',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.problemTotalList
          },
          {
            name: '完整性',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.problemCompleteList
          },
          {
            name: '适宜性',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.problemSuitableList
          },
          {
            name: '有效性职责权限',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.problemEffectiveList
          },
          {
            name: '工作内容',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.problemCategoryTwoList
          },
          {
            name: '工作标准',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.problemCategoryThreeList
          },
          {
            name: '考核奖励',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.problemCategoryFourList
          },
          {
            name: '任职资格',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.problemCategoryFiveList
          },
          {
            name: '其他',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.problemCategorySixList
          }
        ]
      }
      const bottomChart = echarts.init(document.getElementById('bottomChart')) // 图标初始化
      bottomChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        bottomChart.resize()
      })
    }
  }
}
</script>

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