<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';

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '98px'
    },
    height: {
      type: String,
      default: '98px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
watch: {
     chartData: {
       deep: true,
       handler(val) {
         this.setOptions(val)
       }
     }
   },
   data() {
     return {
       chart: null
     }
   },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
     })
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
     this.chart.dispose()
     this.chart = null
   },
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons');
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
       setOptions({zt,zs,zcs } = {}) {
         let gnssg  = 0.00
         if(zt.num  !=0 && zcs.num !=0){
           gnssg = (zt.num / zcs.num).toFixed(2)
         }else{
           gnssg = 0 + '.00'
         }

         if(gnssg == 0){
           gnssg = 0 + '.00'
         }
         // let gnssg = (zt.num / zcs.num).toFixed(2)
        this.chart.setOption({
                color: [
                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: '#96BA3E'
                    },
                    {
                      offset: 1,
                      color: '#96BA3E'
                    }
                  ]),
                  new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                    {
                      offset: 0,
                      color: '#E8EBF5'
                    },
                    {
                      offset: 0.9,
                      color: '#E8EBF5'
                    }
                  ])
                ],
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  top: '5%',
                  left: 'center',
                  data: []
                },
                // 设置环形中间的数据
                graphic: [
                  {
                    type: 'text',
                    left: '29%',
                    top: '28%',
                    z: 10,
                    style: {
                      fill: '#96BA3E',
                      text: gnssg + '%',
                      font: '12px Microsoft YaHei'
                    },
                    textStyle: {
                      color: '#96BA3E',
                      fontSize: 12,
                      align: 'center'
                    }
                  }
                ],
                series: [
                  {
                    name: '早退打卡',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['45%', '35%'],
                    avoidLabelOverlap: false,
                    // label: {
                    //     show: false,
                    //     position: 'center'
                    // },
                    // emphasis: {
                    //     label: {
                    //         show: true,
                    //         fontSize: '17',
                    //         fontWeight: '400',
                    //         color:'#2497D5'
                    //     }
                    // },
                    // labelLine: {
                    //     show: true
                    // },
                    itemStyle: {
                      normal: {
                        label: {
                          show: false
                        },
                        labelLine: {
                          show: true
                        }
                      },
                      emphasis: {
                        label: {
                          show: false,
                          position: 'outer',
                          textStyle: {
                            fontSize: '15',
                            fontWeight: 'bold',
                            color: 'white'
                          }
                        }
                      }
                    },
                    data: [{ value: zt.num, name: '早退打卡' }, { value: zcs.num, name: '总数打卡' }]
                  }
                ]
              });
       }
   }
};
</script>
