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

<script>
import * as echarts from 'echarts'

import {
  coverageRateView1,
  coverageRateView2,
  coverageRateView3,
  coverageRateView4
} from '@/api/allApi/index.js'
export default {
  name: 'PostCheckWebTopLeftChart',
  props: {
    type: {
      type: Number,
      default: 1
    },
    queryParams: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      listData: []
    }
  },

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

  methods: {
    async initList() {
      this.listData = []
      if (this.type == 1) {
        const res = await coverageRateView1(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.listData = [
            { value: 0, name: '部门总问题数' },
            { value: 0, name: '部门问题整改数' }
          ]
        } else {
          this.listData = [
            { value: res.data[0].problemTotal, name: '部门总问题数' },
            { value: res.data[0].problemComplete, name: '部门问题整改数' }
          ]
        }
      } else if (this.type == 2) {
        const res = await coverageRateView2(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.listData = [
            { value: 0, name: '部门总问题数' },
            { value: 0, name: '部门问题整改数' }
          ]
        } else {
          this.listData = [
            { value: res.data[0].problemTotal, name: '部门总问题数' },
            { value: res.data[0].problemComplete, name: '部门问题整改数' }
          ]
        }
      } else if (this.type == 3) {
        const res = await coverageRateView3(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.listData = [
            { value: 0, name: '部门总问题数' },
            { value: 0, name: '部门问题整改数' }
          ]
        } else {
          this.listData = [
            { value: res.data[0].problemTotal, name: '部门总问题数' },
            { value: res.data[0].problemComplete, name: '部门问题整改数' }
          ]
        }
      } else {
        const res = await coverageRateView4(this.queryParams)
        if (res.code !== 200) return this.$message.error(res.msg)
        if (res.data.length == 0) {
          this.listData = [
            { value: 0, name: '部门总问题数' },
            { value: 0, name: '部门问题整改数' }
          ]
        } else {
          this.listData = [
            { value: res.data[0].problemTotal, name: '部门总问题数' },
            { value: res.data[0].problemComplete, name: '部门问题整改数' }
          ]
        }
      }
      setTimeout(() => {
        this.initTopLeftChartEcharts()
      }, 100)
    },

    initTopLeftChartEcharts() {
      // There should not be negative values in rawData
      const rawData = [
        [100, 302, 301, 334, 390, 330, 320],
        [320, 132, 101, 134, 90, 230, 210],
        [220, 182, 191, 234, 290, 330, 310],
      ]
      const totalData = []
      for (let i = 0; i < rawData[0].length; ++i) {
        let sum = 0
        for (let j = 0; j < rawData.length; ++j) {
          sum += rawData[j][i]
        }
        totalData.push(sum)
      }
      const grid = {
        left: 100,
        right: 100,
        top: 50,
        bottom: 50
      }
      const series = [
        '关键',
        '非关键',
        '总数',
      ].map((name, sid) => {
        return {
          name,
          type: 'bar',
          stack: 'total',
          barWidth: '60%',
          label: {
            show: true,
            formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
          },
          data: rawData[sid].map((d, did) =>
            totalData[did] <= 0 ? 0 : d / totalData[did]
          )
        }
      })
      const option = {
        legend: {
          selectedMode: false
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid,
        yAxis: {
          type: 'value'
        },
        xAxis: {
          type: 'category',
          data: ['岗位数量', '员工数量']
        },
        series
      }
      const topLeftChart = echarts.init(document.getElementById('topLeftChart')) // 图标初始化
      topLeftChart.setOption(option) // 渲染页面
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        topLeftChart.resize()
      })
    }
  }
}
</script>

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