<template>
  <el-container v-loading="loading" class="th-echarts-pie-category2">
    <el-main>
      <v-chart
        class="th-echarts"
        :options="charOptions"
        autoresize
        v-on="$listeners"
        @legendselectchanged="legendselected"
      />
      <div class="label-box" :style="{color: labelColor}">
        <p>{{ totalCount }}</p>
        <p>{{ label }}</p>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import VChart from 'vue-echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/markPoint'

export default {
  name: 'ThEchartsPieCategory2',
  components: {
    VChart
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    // 数据
    value: {
      type: Array,
      default: () => [
        {
          name: '',
          value: 0
        }
      ]
    },
    // 颜色
    color: {
      type: Array,
      default: () => ['#3ECCFB', '#5BB9FE']
    },
    // 中间文字
    label: {
      type: String,
      default: ''
    },
    // 文字色
    labelColor: {
      type: String,
      default: '#06B2C7'
    },
    // 圆的半径
    radius: {
      type: Number,
      default: 50
    },
    hoverAnimation: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selected: {}
    }
  },
  computed: {
    charOptions() {
      const that = this
      const series = [
        {
          type: 'pie',
          radius: [this.radius + '%', this.radius + 8 + '%'],
          center: ['50%', '40%'],
          data: this.value,
          startAngle: 45,
          clockwise: false,
          hoverAnimation: this.hoverAnimation,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          }
        }
      ]
      return {
        color: this.color,
        // 图例
        legend: {
          orient: 'vertical',
          bottom: 0,
          data: this.value.map(d => d.name),
          itemWidth: 20,
          itemHeight: 4,
          textStyle: {
            color: '#5C7793',
            fontSize: 14,
            padding: [0, 0, 0, 17]
          }
        },
        // 气泡提示框
        tooltip: {
          appendToBody: true,
          formatter(params) {
            return `<span style="color:#fff">${params.name || that.label}：${params.value}</span>`
          }
        },
        // 图表类型
        series
      }
    },
    totalCount() {
      let total = 0
      this.value.filter(d => !!this.selected[d.name]).forEach(d => {
        total += d.value
      })
      return total.toFixed()
    }
  },
  watch: {
    value: {
      handler(val) {
        val.forEach(d => {
          if (!(d.name in this.selected)) {
            this.$set(this.selected, d.name, true)
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    legendselected(e) {
      this.selected = e.selected
      this.$emit('legendselected', e)
    }
  }
}
</script>
