<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { fontSize, roundFun } from '@/views/groupPage/util'
const colorArr = [
  {
    type: '进行中',
    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
      {
        offset: 0,
        color: '#2AD289'
      },
      {
        offset: 1,
        color: '#02AF64'
      }
    ])
  },
  {
    type: '已完成',
    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
      {
        offset: 0,
        color: '#05BEDF'
      },
      {
        offset: 1,
        color: '#1478FF'
      }
    ])
  }
]
export default {
  name: 'qulityPieChart', //质量页面统计饼图
  props: {
    chartData: {}
  },
  data() {
    return { myChart: null }
  },
  watch: {
    chartData: {
      handler(n, o) {
        this.$nextTick(() => {
          this.initialChart()
        })
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    initialChart() {
      this.destroyChart()
      let seriesData = [],
        total = 0
      if (this.chartData.length !== 0) {
        let length = this.chartData.length
        this.chartData.map((e) => (total += +e.value))
        for (let index = 0; index < length; index++) {
          const item = this.chartData[index]
          if (item.state == '未开始') continue
          seriesData.push(
            {
              name: item.state,
              type: 'bar',
              stack: 'total',
              roundCap: true,
              barWidth: 90,
              showBackground: true,
              backgroundStyle: {
                color: '#15344E'
              },
              data: [roundFun(item.value / total, 2) * 100],
              coordinateSystem: 'polar',
              itemStyle: {
                color: colorArr.find((i) => i.type == item.state)
                  ? colorArr.find((i) => i.type == item.state).color
                  : ''
              }
            },
            {
              type: 'bar',
              stack: 'total',
              roundCap: true,
              barWidth: 90,
              data: [5],
              coordinateSystem: 'polar',
              itemStyle: {
                color: 'transparent'
              }
            }
          )
        }
      }
      //补充圆环样式
      seriesData = [
        ...seriesData,
        //外环
        {
          name: '',
          type: 'pie',
          startAngle: 80,
          radius: ['85%'],
          hoverAnimation: false,
          center: ['30%', '50%'],
          itemStyle: {
            color: 'rgba(66, 66, 66, .1)',
            borderWidth: 1,
            borderColor: '#1C405F'
          },
          data: [100]
        },
        //内环
        {
          name: '',
          type: 'pie',
          startAngle: 80,
          radius: ['55%'],
          hoverAnimation: false,
          center: ['30%', '50%'],
          itemStyle: {
            color: 'rgba(66, 66, 66, .1)',
            borderWidth: 1,
            borderColor: '#1C405F'
          },
          data: [100]
        }
      ]
      let option = {
        title: [
          {
            text: `${total}个`,
            x: '25%',
            top: '38%',
            textStyle: {
              fontSize: fontSize(18),
              fontFamily: 'Agency FB',
              fontWeight: 'bold',
              color: '#FFFFFF'
            }
          },
          {
            text: '总量',
            x: '25%',
            top: '55%',
            textStyle: {
              fontSize: fontSize(14),
              fontFamily: 'Source Han Sans CN',
              fontWeight: 400,
              color: '#84BDE5'
            }
          }
        ],
        backgroundColor: 'transparent',
        polar: {
          radius: ['60%', '78%'],
          center: ['30%', '50%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 30,
          icon: 'react',
          left: '60%',
          top: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: fontSize(14),
                color: '#84BDE5'
              },
              b: {
                fontFamily: 'AgencyFB-Bold',
                fontSize: fontSize(16),
                fontWeight: 'bold',
                color: '#fff'
              }
            }
          },
          formatter: (name) => {
            if (this.chartData.length == 0) return
            if (name) {
              let target = this.chartData.find((i) => i.state == name)
              return '{a|' + target.state + '：}' + '     ' + '{b|' + target.value + '个}'
            } else {
              let target = this.chartData.find((i) => i.state == '未开始')
              return '{a|' + target.state + '：}' + '     ' + '{b|' + target.value + '个}'
            }
          },
          data: [{ name: '进行中' }, { name: '已完成' }, { name: '', itemStyle: { color: '#15344E' } }]
        },
        series: seriesData
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      this.myChart = echarts.init(ref) //this.$refs.chart
      this.myChart.resize()
      this.myChart.setOption(option, {
        notMerge: true
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>