<template>
  <div>
    <div class="loading" v-if="loading"><a-spin /></div>
    <Echart id="leftTop" :options="options" class="left_top_inner" v-if="pageflag" ref="charts" />
    <Reacquire v-else @onclick="getData" style="line-height:200px">
      重新获取
    </Reacquire>
  </div>
</template>

<script>
import { countSubareaDealerQty } from '@/api/bigScreen'
export default {
  data () {
    return {
      options: {},
      listData: [],
      pageflag: true,
      timer: null,
      loading: false
    }
  },
  created () {
    this.getData()
  },
  mounted () {
  },
  beforeDestroy () {
    this.clearData()
  },
  methods: {
    clearData () {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData () {
      this.listData = []
      this.loading = true
      countSubareaDealerQty().then(res => {
        // 只打印一次
        if (!this.timer) {
          console.log('加盟商总数量', res)
        }
        if (res.status == 200) {
          let totalQty = 0
          res.data.map(item => {
            if (item.subareaName != 'totalQty') {
              this.listData.push({
                value: item.dealerQty,
                name: item.subareaName
              })
            } else {
              totalQty = item.dealerQty
            }
          })
          this.$emit('total', totalQty)
          this.$nextTick(() => {
            this.init()
            this.switper()
          })
        } else {
          this.pageflag = false
        }
        this.loading = false
      })
    },
    // 轮询
    switper () {
      if (this.timer) {
        return
      }
      const looper = (a) => {
        this.getData()
      }
      console.log(this.$store.state.setting)
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
      const myChart = this.$refs.charts.chart
      myChart.on('mouseover', params => {
        this.clearData()
      })
      myChart.on('mouseout', params => {
        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
      })
    },
    init () {
      const piedata = {
        name: '加盟商数量',
        type: 'pie',
        radius: ['42%', '65%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: 'rgba(0,0,0,0)',
          borderWidth: 2
        },
        data: this.listData
      }
      this.options = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF'
          }
        },
        legend: {
          show: false,
          top: '5%',
          left: 'center'
        },
        series: [
          // 展示圆点
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              formatter: '   {b|{b}}  {c|{c}个}  {per|{d}%}  ',
              position: 'outside',
              rich: {
                b: {
                  color: '#fff',
                  fontSize: 12,
                  lineHeight: 26
                },
                c: {
                  color: '#31ABE3',
                  fontSize: 14
                },
                per: {
                  color: '#31ABE3',
                  fontSize: 14
                }
              }
            },
            labelLine: {
              length: 40, // 第一段线 长度
              length2: 10, // 第二段线 长度
              show: true
            },
            emphasis: {
              show: true
            }
          }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
