<template>
  <div ref="reviewers_stats" style="width:100%;height:100%;padding:5px;" />
</template>
<script>
import * as echarts from 'echarts'
import { getReviewersByRank } 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.getData()
  },
  methods: {
    initChart(data) {
      const colorList = ['#47A2FF ', '#53C8D1', '#6666CC', '#00FFCC']
      const option = {
        title: {
          text: 'Reviewers',
          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: 'Reviewers',
            type: 'pie',
            radius: ['50%', '75%'],
            center: ['50%', '50%'],
            labelLine: {
              normal: {
                length: '4%',
                length2: '2%',
                lineStyle: {
                  color: '#e6e6e6'
                }
              }
            },
            label: {
              normal: {
                position: 'inner',
                formatter: '{per|{c}}',
                // formatter: '{a|{b}}\n{hr|}\n{per|{c}}',
                rich: {
                  a: {
                    color: '#fff',
                    fontSize: 11,
                    lineHeight: 20,
                    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
          }
        ]
      }
      if (this.$refs.reviewers_stats) {
        this.myChart = echarts.init(this.$refs.reviewers_stats)
        this.myChart.setOption(option)
      }
    },
    getData() {
      getReviewersByRank().then(res => {
        if (res.IsSuccess) {
          const data = []
          if (res.Result) {
            for (let i = 0; i < res.Result.length; i++) {
              data.push({
                name: res.Result[i].RankNameAbbreviation,
                value: res.Result[i].ReviewerCount
              })
              this.sum += res.Result[i].ReviewerCount
            }
          }
          this.initChart(data)
        } else {
          this.$message({ message: res.ErrorMessage, type: 'error' })
        }
      })
      // .catch(error => {
      //   this.$message({ message: error, type: 'error' })
      // })
    }
  }
}
</script>
