<template>
  <div :style="{width:curWidth==0?'98%':curWidth+'px',height:curHeight==0?'98%':curHeight+'px'}"></div>
</template>
<script>
/**
 * @author 王晓颖
 * @date 2020-12-1
 * @Description 环形进度条
 * @props 数据格式：{
      width: 0,
      height: 0,
      data: 50,
      color: ['','']
    }
 *
 */

import { countSize } from '@/utils/utils'
export default {
  name: 'AnnularProgress',
  props: ['width', 'height', 'data', 'color'],
  data () {
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        series: [
          {
            center: ['50%', '50%'],
            radius: ['70%', '80%'],
            clockWise: false,
            hoverAnimation: false,
            type: 'pie',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    fontSize: '60%',
                    fontWeight: 'bold',
                    color: '#f90006'
                  },
                  position: 'center'
                },
                labelLine: {
                  show: false
                },
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                    {offset: 0, color: '#fc5e5f'},
                    {offset: 1, color: '#f90006'}
                  ]
                ),
                borderColor: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                    {offset: 0, color: '#fc5e5f'},
                    {offset: 1, color: '#f90006'}
                  ]
                ),
                borderWidth: countSize(0.01)
              }
            },
            data: [
              {
                value: 0,
                name: '0%'
              },
              {
                name: '',
                value: 47.3,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },

                    labelLine: {
                      show: false
                    },
                    color: '#154494',
                    borderColor: '#154494',
                    borderWidth: 0
                  }
                }
              }
            ]
          }
        ]
      }
    }
  },
  watch: {
    width (newVal, oldVal) {
      this.curWidth = newVal
      this.refreshEchart()
    },
    height (newVal, oldVal) {
      this.curHeight = newVal
      this.refreshEchart()
    },
    data (newVal, oldVal) {
      this.option.series[0].data[0].value = newVal
      this.option.series[0].data[0].name = newVal + '%'
      this.option.series[0].data[1].value = (100 - Number(newVal))
      this.refreshEchart()
    },
    color (newVal, oldVal) {
      this.setColor()
    }
  },
  mounted () {
    this.setColor()
    this.data && (this.option.series[0].data[0].value = this.data)
    this.data && (this.option.series[0].data[0].name = this.data + '%')
    this.data && (this.option.series[0].data[1].value = (100 - Number(this.data)))
    this.initEchart()
  },
  methods: {
    setColor () {
      this.color && (this.option.series[0].itemStyle.normal.color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
        [
          {offset: 0, color: this.color[0]},
          {offset: 1, color: this.color[1]}
        ]
      ))
      this.color && (this.option.series[0].itemStyle.normal.borderColor = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
        [
          {offset: 0, color: this.color[0]},
          {offset: 1, color: this.color[1]}
        ]
      ))
      this.color && (this.option.series[0].itemStyle.normal.label.textStyle.color = this.color[0])
    },
    refreshEchart () {
      console.log('refreshEchartAnuular')
      if (this.curWidth && this.curHeight && this.data) {
        this.initEchart()
      }
    },
    initEchart () {
      setTimeout(() => {
        let myChart = this.$echarts.init(this.$el)
        myChart.setOption(this.option, true)
        window.onresize = myChart.resize
      }, 500)
    }
  }
}
</script>

<style scoped>
</style>