<template>
  <el-container v-loading="loading" class="th-echarts-multi-ring">
    <el-main>
      <v-chart
        class="th-echarts"
        :options="charOptions"
        autoresize
        v-on="$listeners"
      />
    </el-main>
  </el-container>
</template>
<script>
import graphic from 'echarts/lib/util/graphic'
import VChart from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/markPoint'

export default {
  name: 'ThEchartsMultiRing',
  components: {
    VChart
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: () => [
        // {
        //   name: '配电线路条数',
        //   value: 100
        // },
        // {
        //   name: '电缆条数',
        //   value: 100
        // },
        // {
        //   name: '架空线路条数',
        //   value: 100
        // }
      ]
    },
    color: {
      type: [String, Array],
      default: () => [
        // ['#02A7F0', '#47ADF4'],
        // ['#44DEC5', '#4ECBFA'],
        // ['#FFBB09', '#FAEB21'],
      ]
    },
    radius: {
      type: Number,
      default: 85
    }
  },
  computed: {
    totalCount() {
      return this.value.map(d => d.value).reduce((a, b) => a + b, 0)
    },
    getColor() {
      return this.color.map(c => {
        if (Array.isArray(c)) {
          return new graphic.LinearGradient(
            0, 0, 0, 1,
            c.map((d, i) => ({ offset: i / (c.length - 1), color: d }))
          )
        } else {
          return c
        }
      })
    },
    charOptions() {
      const series = []
      const l = this.value.length
      const step = (this.radius - 10) / l / 2

      // 图表option整理
      this.value.forEach((v, i) => {
        const n = l - i - 1
        series.push({
          type: 'pie',
          radius: [this.radius - (2 * n + 1) * step + '%', this.radius - n * 2 * step + '%'],
          center: ['50%', '50%'],
          clockWise: true,
          hoverAnimation: false,
          label: {
            show: false
          },
          data: [
            {
              value: v.value,
              name: v.name
            },
            {
              value: this.totalCount - v.value,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              }
            }
          ]
        })
        series.push({
          name: '',
          type: 'pie',
          silent: true,
          roundCap: true,
          z: 1,
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [this.radius - (2 * n + 1) * step + '%', this.radius - n * 2 * step + '%'],
          center: ['50%', '50%'],
          label: {
            show: false
          },
          data: [
            {
              value: 1,
              itemStyle: {
                color: '#EBECF1'
              }
            }
          ]
        })
      })

      return {
        color: this.getColor,
        // 气泡提示框
        tooltip: {
          appendToBody: true,
          formatter(params) {
            if (!params.name) return
            return `<span style="color:#fff">${params.name}：${params.value}</span>`
          }
        },
        // 图表类型
        series
      }
    }
  }
}
</script>
