<template>
  <div class="chart-box" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import * as api from '@/api/dataVisualizationAnalysis'

export default {
  name: 'charts',
  data() {
    return {
      option: [],
      myChart: null,
      chartList: []
    }
  },

  mounted() {
    this.getData()
    window.addEventListener('resize', () => {
      this.myChart.dispose()
      this.getData()
    })
  },
  methods: {
    async getData() {
      let res = await api.orgYearTrainPlan()
      this.chartList = res.map(item => {
        // item['name'] = dictionaryEscape('jhlx', item.plantype)

        return item
      })

      this.initChart()
    },

    initChart() {
      this.myChart = echarts.init(this.$refs.chart)

      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },

        legend: {
          show: true,
          itemHeight: 12,
          itemWidth: 12,
          right: '2%'
          // data: this.chartList.map(item => {
          //   return item.plantype
          // })
        },
        grid: {
          bottom: '8%',
          left: '7%',
          right: '2%',
          top: '13%'
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartList.map(item => {
              return item.orgname
            }),
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：个'
          }
        ],
        series: [
          {
            name: '总数',
            type: 'bar',
            barWidth: 15,
            itemWidth: 12,
            itemHeight: 12,
            tooltip: {
              valueFormatter: function(value) {
                return value + '个'
              }
            },
            data: this.chartList.map(item => {
              return item.totalcount
            })
          },
          {
            name: '已完成',
            type: 'bar',
            barWidth: 15,
            tooltip: {
              valueFormatter: function(value) {
                return value + '个'
              }
            },
            data: this.chartList.map(item => {
              return item.finishcount
            })
          },
          {
            name: '进行中',
            type: 'bar',
            barWidth: 15,
            tooltip: {
              valueFormatter: function(value) {
                return value + '个'
              }
            },
            data: this.chartList.map(item => {
              return item.executecount
            })
          },
          {
            name: '未完成',
            type: 'bar',
            barWidth: 15,
            tooltip: {
              valueFormatter: function(value) {
                return value + '个'
              }
            },
            data: this.chartList.map(item => {
              return item.nofinishcount
            })
          }
        ]
      }
      this.option && this.myChart.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-box {
  width: 100%;
  height: 100%;
}
</style>
