<template>
  <el-container v-loading="loading" class="th-charts-pie-category">
    <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/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/markPoint'

export default {
  name: 'ThEchartsPieCategory',
  components: {
    VChart
  },
  props: {
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 数据
    value: {
      type: Array,
      default: () => [
        {
          name: '',
          value: 0
        }
      ]
    },
    // 颜色
    color: {
      type: Array,
      default: () => ['#3ECCFB', '#5BB9FE']
    },
    // 是否显示中间文字
    showLabel: {
      type: Boolean,
      default: true
    },
    // 中间文字
    label: {
      type: String,
      default: ''
    },
    // 文字色
    labelColor: {
      type: String,
      default: '#06B2C7'
    },
    // 圆的半径
    radius: {
      type: Number,
      default: 60
    },
    // 是否显示白色内圆
    showBorder: {
      type: Boolean,
      default: true
    },
    // 是否动效
    hoverAnimation: {
      type: Boolean,
      default: true
    },
    // 边框宽度
    borderWidth: {
      type: Number,
      default: 0
    },
    // 统计值
    totalCount: {
      type: Number,
      default: 0
    },
    // 标题距离顶部
    titleY: {
      type: String,
      default: '40%'
    }
  },
  computed: {
    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 that = this
      const series = [
        {
          type: 'pie',
          radius: [this.radius + '%', '85%'],
          center: ['50%', '50%'],
          data: this.value,
          hoverAnimation: this.hoverAnimation,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#fff',
              borderWidth: this.borderWidth
            }
          }
        }
      ]
      if (this.showBorder) {
        series.push(
          {
            radius: [this.radius + '%', (this.radius + 8) + '%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              appendToBody: true,
              show: false
            },
            data: [{
              value: 100,
              itemStyle: {
                color: 'rgba(250,250,250,0.5)'
              }
            }]
          }
        )
      }
      return {
        color: this.getColor,
        // 标题
        title: {
          text: this.showLabel ? this.totalCount : '',
          textStyle: {
            color: this.labelColor,
            fontSize: 32,
            fontWeight: 500,
            lineHeight: 24
          },
          subtext: this.showLabel ? this.label : '',
          subtextStyle: {
            color: this.labelColor,
            fontSize: 12
          },
          x: 'center',
          y: this.titleY
        },
        // 气泡提示框
        tooltip: {
          appendToBody: true,
          formatter(params) {
            return `<span style="color:#fff">${params.name || that.label}：${params.value}</span>`
          },
          position: function(pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            var obj = { top: 60 }
            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
            return obj
          }
        },
        // 图表类型
        series
      }
    }
  }
}
</script>
