<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 { trainNewstaffCount} from "@/api/training/newstaff/tnNew";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '210px'
    }
  },
  data() {
    return {
      chart: null,
      dataOut: [],
      total: null,
    }
  },
  mounted() {
    this.$nextTick(() => {
      trainNewstaffCount().then(res=>{
        this.dataOut = [
          {value: res.data.count1, name: res.data.count1Name},
          {value: res.data.count0, name: res.data.count0Name},
        ]
        this.total = res.data.count1 + res.data.count0
        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/newstaff/tnNew',
        })
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    changeYear(year){
      let param = {planYear: year}
      trainNewstaffCount(param).then(res=>{
        this.dataOut = [
          {value: res.data.count1, name: res.data.count1Name},
          {value: res.data.count0, name: res.data.count0Name},
        ]
        this.total = res.data.count1 + res.data.count0
        this.initChart()
      })
    },
    initChart() {
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {c} " + " | " + "{d}%"
        },
        color: [
          '#87CA8B',
          '#FBD44A'
        ],
        title: [
          {
            text: '总人数',
            x: 'center',
            top: '35%',
          },
          {
            text: this.total,
            x: 'center',
            top: '50%',
          },
        ],
        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%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              position: 'outside',
              fontSize: 10,
            },
            animationEasing: 'cubicInOut',
            animationDuration: 1300,
            labelLine: {
              show: true
            },
            data: this.dataOut
          }
        ],
      })
    }
  }
}
</script>
