<template>
  <div style="height:100%">
    <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 { queryAreaSaleAmount } from '@/api/bigScreen.js'
import getDate from '@/libs/getDate.js'
export default {
  props: {
    curYear: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      options: {},
      pageflag: true,
      timer: null,
      loading: false
    }
  },
  created () {
    this.getData()
  },
  watch:{
    curYear (a,b){
      this.getData()
    }
  },
  beforeDestroy () {
    this.clearData()
  },
  methods: {
    clearData () {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData () {
      this.loading = true
      queryAreaSaleAmount(getDate.getBeDateByYear(this.curYear)).then(res => {
        // 只打印一次
        if (!this.timer) {
          console.log('区域销售金额占比', res)
        }
        if (res.status == 200) {
          const listData = []
          res.data.map(item => {
            listData.push({
              name: item.subareaNames,
              value: item.resultAmount
            })
          })
          this.$nextTick(() => {
            this.init(listData)
            this.switper()
          })
        } else {
          this.pageflag = false
        }
        this.loading = false
      })
    },
    // 轮询
    switper () {
      if (this.timer) {
        return
      }
      const looper = (a) => {
        this.getData()
      }
      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 (list) {
      const piedata = {
        name: '区域销售金额占比',
        type: 'pie',
        radius: ['42%', '65%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: 'rgba(0,0,0,0)',
          borderWidth: 2
        },
        data: list
      }
      this.options = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF'
          }
        },
        series: [
          // 展示圆点
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              formatter: '   {b|{b}} \n {per|{d}%}  ',
              //   position: "outside",
              rich: {
                b: {
                  color: '#fff',
                  fontSize: 12,
                  lineHeight: 26
                },
                c: {
                  color: '#31ABE3',
                  fontSize: 14
                },
                per: {
                  color: '#31ABE3',
                  fontSize: 14
                }
              }
            },
            labelLine: {
              length: 30, // 第一段线 长度
              length2: 10, // 第二段线 长度
              show: true

            },
            emphasis: {
              show: true
            }
          },
          {
            ...piedata,
            tooltip: { show: true },
            itemStyle: {},
            label: {
              backgroundColor: 'inherit', // 圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: 'auto',
              padding: [2.5, -2.5, 2.5, -2.5]
            },
            labelLine: {
              length: 30, // 第一段线 长度
              length2: 10, // 第二段线 长度
              show: false
            }
          }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
