<template>
  <div ref="reading_stats" style="width:100%;height:100%;padding-top:5px;" />
</template>
<script>
import * as echarts from 'echarts'
import { getReadingDataByType } from '@/api/dashboard'
import { fontSize } from 'utils/fontsize'
export default {
  props: {
    area: { type: String, default: '' }
  },
  data() {
    return {
      myChart: '',
      data: [],
      sum: 0
    }
  },
  watch: {
    area() {
      if (this.myChart) {
        this.myChart.resize()
      }
    }
  },
  mounted() {
    this.getReadingData()
  },
  methods: {
    initChart(data) {
      const colorList = ['#2fA2FF ', '#27d08a', '#2f89cf', '#FBD444', '#7F6AAD', '#585247']
      const option = {
        title: {
          text: 'Workload',
          subtext: this.sum,
          textStyle: {
            fontSize: fontSize(0.16),
            color: '#fff'
          },
          subtextStyle: {
            fontSize: fontSize(0.2),
            color: '#fff'
          },
          textAlign: 'center',
          left: '49%',
          top: '41%'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          show: true,
          top: '2%',
          icon: 'circle',
          itemWidth: fontSize(0.1),
          textStyle: {
            color: '#fff',
            fontSize: fontSize(0.14)
          }
        },
        color: colorList,
        series: [
          {
            name: 'Total',
            type: 'pie',
            radius: ['50%', '75%'],
            center: ['50%', '50%'],
            labelLine: {
              normal: {
                length: '4%',
                length2: '2%',
                lineStyle: {
                  color: '#e6e6e6'
                }
              }
            },
            label: {
              normal: {
                position: 'inner',
                // formatter: '{a|{b}}\n{hr|}\n{per|{c}}',
                formatter: '{per|{c}}',
                rich: {
                  a: {
                    color: '#fff',
                    fontSize: fontSize(0.12),
                    lineHeight: fontSize(0.2),
                    align: 'center'
                  },
                  hr: {
                    width: '100%',
                    height: 0,
                    alien: 'center'
                  },
                  per: {
                    color: '#fff',
                    align: 'center',
                    fontSize: fontSize(0.15)
                  }
                }
              }
            },
            itemStyle: {
              borderWidth: fontSize(0.3)
              // borderColor: '#fff'
            },
            data: data
          }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function(idx) {
          return idx * 5
        }
      }
      if (this.$refs.reading_stats) {
        this.myChart = echarts.init(this.$refs.reading_stats)
        this.myChart.setOption(option)
      }
    },
    getReadingData() {
      getReadingDataByType().then(res => {
        if (res.IsSuccess) {
          const data = []
          if (res.Result) {
            for (var key in res.Result) {
              let k = key
              if (key === 'Timepoint') {
                k = 'TP'
              } else if (key === 'Adjudication') {
                k = 'AD'
              } else if (key === 'Global') {
                k = 'GL'
              }
              data.push({
                name: k,
                value: res.Result[key]
              })
              this.sum += res.Result[key]
            }
          }
          this.initChart(data)
        } else {
          this.$message({ message: res.ErrorMessage, type: 'error' })
        }
      })
      // .catch(error => {
      //   this.$message({ message: error, type: 'error' })
      // })
    }
  }
}
</script>
