<template>
  <div ref="dom" class="charts chart-pie"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartPie',
  props: {
    subtext: String,
    // 图表标题
    text: {
      type: String,
      default: ''
    },
    // 数据值
    value: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 查询时间
    searchData: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 圆环中心标题
    title: {
      type: String,
      default: ''
    },
    // 圆环中心金额
    total: {
      type: [Number, String],
      default: 0
    },
    // 圆环各类型颜色
    color: {
      type: Array,
      default: function () {
        return []
      }
    },
    // x轴标签旋转角度
    xAxisRotate: {
      type: Number,
      default: 0
    }
  },
  watch: {
    total: {
      handler (nVal, oVal) {
        // console.log(nVal, 'total111111111')
        // 为防止当为0时不执行函数
        if (nVal !== '') {
          this.pageInit()
        }
      },
      deep: true,
      immediate: true // 代表如果在 wacth 里声明了 xAxisData 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行
    }
  },
  data () {
    return {
      dom: null // echarts实例
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    pageInit () {
      this.$nextTick(() => {
        const legend = this.value.map(_ => _.name)
        const option = {
          color: this.color,
          title: [{
            text: '{name|' + this.title + '}\n{val|' + this.formatNumber(this.total) + '}',
            top: 'center',
            left: 'center',
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  fontWeight: 'normal',
                  color: '#666666',
                  padding: [10, 0]
                },
                val: {
                  fontSize: 24,
                  fontWeight: 'bold',
                  color: '#333333'
                }
              }
            }
          }],
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            left: 'center',
            bottom: 'bottom',
            padding: 5,
            data: legend
          },
          series: [
            {
              type: 'pie',
              radius: ['35%', '50%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
              hoverAnimation: false,
              label: {
                normal: {
                  formatter: params => {
                    return (
                      '{icon|●}{name|' + params.name + '}{value|' +
                            this.formatNumber(params.value) + '}'
                    )
                  },
                  padding: [0, -100, 25, -130],
                  rich: {
                    icon: {
                      fontSize: 12
                    },
                    name: {
                      fontSize: 14,
                      padding: [0, 10, 0, 4],
                      color: '#666666'
                    },
                    value: {
                      fontSize: 16,
                      fontWeight: 'bold',
                      color: '#333333'
                    }
                  }
                }
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 120,
                  lineStyle: {
                    color: '#e6e6e6'
                  }
                }
              },
              data: this.value,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(255, 170, 0, 0.5)'
                },
                normal: {
                  borderColor: '#fff',
                  borderWidth: 2
                }
              }
            }
          ]
        }
        this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        console.log(option, 'option')
        this.dom.setOption(option)
        this.dom.resize()
        on(window, 'resize', this.resize)
      })
    },
    // 格式化金额
    formatNumber (num) {
      const reg = /(?=(\B)(\d{3})+$)/g
      return num.toString().replace(reg, ',')
    }
  },
  mounted () {
    this.pageInit()
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
