<template>
  <div class="echarts_content">
    <div ref="echarts" class="pie_echarts"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import loopEchart from '../mixins/index'
import resize from '@/components/Charts/mixins/resize'

export default {
  mixins: [loopEchart, resize],
  props: {
    echartsName: {
      type: String,
      default: () => '机构新增趋势'
    },
    center: {
      type: Array,
      default: () => ['30%', '50%']
    },
    title: {
      type: String,
      default: () => 'myEcharts'
    },
    showEmphasis: {
      type: Boolean,
      default: false
    },
    showLabel: {
      type: Boolean,
      default: false
    },
    showLegend: {
      type: Boolean,
      default: true
    },
    showGraphic: {
      type: Boolean,
      default: false
    },
    optionData: {
      type: Object,
      default: () => ({})
    },
    showTips: {
      type: Boolean,
      default: false
    },
    color: {
      type: Array,
      default: () => []
    },
    echartType: {
      type: Number,
      default: () => 1
    },
    showAnimate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null,
      c_options: null
    }
  },
  watch: {
    optionData: {
      handler(val) {
        if (val) {
          const a = []
          let num = 0
          for (const key in val) {
            const b = {}
            b['name'] = key
            b['value'] = val[key]
            a.push(b)
            num += val[key]
          }
          const text = this.echartType === 1 ? (val[Object.keys(val)[0]] / num) * 100 : (val[Object.keys(val)[1]] / num) * 100
          this.c_options = {
            tooltip: {
              trigger: 'item'
            },
            graphic: this.showGraphic && [
              {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                  text: num === 0 ? '0%' : text.toFixed(2) + '%',
                  textAlign: 'center',
                  fill: '#000',
                  fontSize: 16,
                  fontWeight: 'bold'
                }
              }
            ],
            legend: this.showLegend && {
              top: 'center',
              right: '9%',
              orient: 'vertical',
              icon: 'circle'
            },
            series: [
              {
                name: this.title,
                type: 'pie',
                center: this.center, // 饼图位置
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 50,
                  borderColor: '#fff',
                  borderWidth: 4
                },
                label: {
                  show: this.showLabel,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: this.showEmphasis,
                    fontSize: 14,
                    fontWeight: 'bold',
                    formatter: (params) => params.name + '\n' + params.value + ' (' + params.percent + '%)'
                  }
                },
                labelLine: {
                  show: false
                },
                data: a
              }
            ]
          }
        }
        this.initChart()
      },
      deep: true
    }
  },
  methods: {
    initChart() {
      const myEchart = this.$refs['echarts']
      clearInterval(this.timeTicket)
      this.timeTicket = null
      this.chart = echarts.init(myEchart)
      this.chart && this.chart.setOption(this.c_options)
      this.showAnimate && this.chart && this.handleChartPieLoop(this.c_options, this.chart, 'timeTicket', 'currentIndex', this.showTips)
    },
    handleMouseOver(e, callback) {
      if (e) {
        const myEchart = this.$refs['echarts']
        myEchart.addEventListener('mouseover', callback)
      }
    },
    handleMouseOut(e, callback) {
      if (e) {
        const myEchart = this.$refs['echarts']
        myEchart.addEventListener('mouseout', callback)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts_content {
  width: 100%;
  height: 100%;
  .pie_echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
