<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'
import {trainCount} from "@/api/common/homedataCbpb";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '210px'
    }
  },
  data() {
    return {
      chart: null,
      trainData:[],
      dataOut: [],
      trainingType:[],
      trainTotal: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      trainCount().then(res=>{
        this.trainTotal = res.data.count1 + res.data.count0 + res.data.count2
        this.dataOut = [
          {value: res.data.count1, name: res.data.count1Name},
          {value: res.data.count0, name: res.data.count0Name},
          {value: res.data.count2, name: res.data.count2Name},
        ]
        this.initChart()
      })
    })
    this.chart = echarts.init(this.$el, 'macarons')
    //饼状图点击事件
    this.chart.on('click', (param) =>{  //这里使用箭头函数代替function，this指向VueComponent
      let index;
      //当前扇区的dataIndex
      index = param.name;
      //自己的操作，这里是点击跳转路由，并携带参数
          /*跳转路由*/
          this.$router.push({
            path: '/training/tracking/training',
            query: {
              status: index,
            }
          })
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    changeYear(year){
      let param = {year: year}
        trainCount(param).then(res=>{
          this.trainTotal = res.data.count1 + res.data.count0 + res.data.count2
          this.dataOut = [
            {value: res.data.count1, name: res.data.count1Name},
            {value: res.data.count0, name: res.data.count0Name},
            {value: res.data.count2, name: res.data.count2Name},
          ]
          this.initChart()
        })
    },
    initChart() {
      console.log("----------")
      var total = this.trainTotal
      this.chart.setOption({
        title: [
          {
            text: '总数',
            x: 'center',
            top: '35%',
          },
          {
            text: this.trainTotal,
            x: 'center',
            top: '50%',
          },
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: [
          '#87CA8B',
          '#FBD44A'
        ],
        legend: {
          orient: 'vertical',
          left: 'left',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 12,
            padding:[0,0]
          },
          selectedMode: true,
          data:['已完成','未完成','未参培']
        },
        series: [
          {
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: ['50%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            animationEasing: 'cubicInOut',
            animationDuration: 1300,
            labelLine: {
              show: true
            },
            data: this.dataOut,
          }
        ],

      })
    }
  }
}
</script>
