<!--
 * @Author: Wzh
 * @Date: 2020-01-15 17:18:57
 * @LastEditors: Wzh
 * @LastEditTime: 2020-02-11 11:02:12
 * @Description:
 -->
<template>
    <div ref="dom" class="charts chart-pie"></div>
</template>

<script>
import * as echarts from 'echarts'
// import tdTheme from '_c/charts/theme.json'
// import mixin from '_c/charts/mixin.js'
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartPie',
  // mixins: [mixin],
  props: {
    value: Array,
    text: String,
    subtext: String,
    legendIcons: {
      default: function () {
        return []
      }
    }
  },
  watch: {
    value: {
      handler: function (val) {
        this.updateValue()
      },
      deep: true
    }
  },
  computed: {
    legendIconsConvert () {
      let arr = []
      this.legendIcons.forEach((item, i) => {
        if (item.indexOf('data:image/') === 0) {
          arr.push('image://' + item)
        } else {
          arr.push(item)
        }
      })
      return arr
    },
    all () {
      return this.value.map(_ => _.value).reduce((all, item) => {
        return Number(all) + Number(item)
      })
    }
  },
  data () {
    return {
      pieInstance: null,
      titleStyle: {
        fontSize: 14,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        lineHeight: 14,
        color: '#FFFFFF'
      },
      legendStyle: {
        padding: [5, 0, 0, 20],
        rich: {
          title: {
            fontSize: 12,
            fontFamily: 'Microsoft YaHei',
            fontWeight: '400',
            color: '#82D1F6',
            align: 'left',
            lineHeight: 25
          },
          detail: {
            align: 'left',
            lineHeight: 25,
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 'bold',
            color: '#fff'
          }
        }
      },
      dom: {}
    }
  },
  methods: {
    legendFormatter (name) {
      // let all = 0
      // for (const item of this.value) {
      //   all += Number(item.value)
      // }
      let val = this.value.find(item => item.name === name).value
      // let percent = ((Number(val) / all) * 100).toFixed(2) + '%'
      return `{title|${name}}\n{detail|${val}}`
    },
    updateValue () {
      let legend = this.value.map((_, i) => {
        return { name: _.name, icon: this.legendIconsConvert[i] }
      })
      let percents = []
      let radius = this.value.map(_ => _.value).map((num) => {
        let nums = Math.round(this.all === 0 ? 0 : (Number(num) / this.all) * 100)
        percents.push(nums)
        return nums > 40 ? 40 : nums < 5 ? 5 : nums
      })

      let option = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: '19%',
          y: '50%',
          textAlign: 'center',
          textVerticalAlign: 'middle',
          textStyle: this.titleStyle
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: 'center',
          data: legend,
          itemHeight: 46,
          itemWidth: 46,
          itemGap: 20,
          selectedMode: false,
          formatter: this.legendFormatter,
          textStyle: this.legendStyle
        },
        graphic: [
          {
            type: 'group',
            left: '50%',
            top: 'middle',
            silent: true,
            children: [
              {
                type: 'circle',
                top: 'middle',
                shape: {
                  r: 2
                },
                style: {
                  fill: '#5A729D'
                }
              },
              {
                type: 'line',
                top: 'middle',
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 100,
                  y2: 0
                },
                style: {
                  stroke: '#5A729D'
                }
              },
              {
                type: 'circle',
                top: 'middle',
                position: [100, 0],
                shape: {
                  r: 2
                },
                style: {
                  fill: '#5A729D'
                }
              }
            ]
          },
          {
            type: 'group',
            left: '50%',
            bottom: '60%',
            silent: true,
            rotation: -5.85,
            children: [
              {
                type: 'circle',
                top: 'middle',
                shape: {
                  r: 2
                },
                style: {
                  fill: '#5A729D'
                }
              },
              {
                type: 'line',
                top: 'middle',
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 110,
                  y2: 0
                },
                style: {
                  stroke: '#5A729D'
                }
              },
              {
                type: 'circle',
                top: 'middle',
                position: [110, 0],
                shape: {
                  r: 2
                },
                style: {
                  fill: '#5A729D'
                }
              }
            ]
          },
          {
            type: 'group',
            left: '50%',
            top: '60%',
            silent: true,
            rotation: 5.85,
            children: [
              {
                type: 'circle',
                top: 'middle',
                shape: {
                  r: 2
                },
                style: {
                  fill: '#5A729D'
                }
              },
              {
                type: 'line',
                top: 'middle',
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 110,
                  y2: 0
                },
                style: {
                  stroke: '#5A729D'
                }
              },
              {
                type: 'circle',
                top: 'middle',
                position: [110, 0],
                shape: {
                  r: 2
                },
                style: {
                  fill: '#5A729D'
                }
              }
            ]
          }
        ],
        series: [
          {
            type: 'pie',
            color: ['#0D172A'],
            radius: [radius[0] + '%', radius[0] + Math.min(percents[0] / 10 + 4, 10) + '%'],
            center: ['32%', '31%'],
            label: {
              show: true,
              color: '#fff',
              position: 'center',
              formatter: percents[0] + '%'
            },
            silent: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [
                  { offset: 0, color: '#43D3C7' },
                  { offset: 1, color: '#2D32F0' }
                ])
            },
            data: [this.value[0]]
          },
          {
            type: 'pie',
            color: ['#0D172A'],
            radius: [radius[1] + '%', radius[1] + Math.min(percents[1] / 10 + 4, 10) + '%'],
            center: ['13%', '38%'],
            label: {
              show: true,
              color: '#fff',
              position: 'center',
              formatter: percents[1] + '%'
            },
            silent: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [
                  { offset: 0, color: '#2E38EE' },
                  { offset: 1, color: '#EE9178' }
                ])
            },
            data: [this.value[1]]
          },
          {
            type: 'pie',
            silent: true,
            startAngle: 45,
            clockwise: false,
            minAngle: 10,
            radius: [radius[2] + '%', radius[2] + Math.min(percents[2] / 10 + 4, 10) + '%'],
            center: ['25%', '73%'],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [
                  { offset: 0, color: '#D6595D' },
                  { offset: 1, color: '#D0A971' }
                ])
            },
            label: {
              show: true,
              color: '#fff',
              position: 'center',
              formatter: percents[2] + '%'
            },
            data: [this.value[2]]
          }
        ]
      }
      this.pieInstance.setOption(option)
      this.pieInstance.resize()
    },

  },
  mounted () {
    this.$nextTick(() => {
      this.pieInstance = echarts.init(this.$refs.dom)
      this.updateValue()
      window.addEventListener("resize", this.handleResize)
    })
  },
  beforeDestroy() {
    if (this.pieInstance) {
      this.pieInstance.dispose()
    }
    window.removeEventListener("resize", this.handleResize)
  },
}
</script>
<style lang="scss">
@import '@/assets/css/function.scss';

.charts {
  height: halfH(260);
  // top: halfH(-30);
}
</style>
