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

<script>
import { graphic } from 'echarts'
import { queryBrandTypeSaleAmount } from '@/api/bigScreen.js'
export default {
  data () {
    return {
      options: {},
      pageflag: true,
      timer: null,
      loading: false
    }
  },
  props: {},
  mounted () {
    this.getData()
  },
  beforeDestroy () {
    this.clearData()
  },
  methods: {
    clearData () {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData () {
      this.loading = true
      queryBrandTypeSaleAmount().then((res) => {
        console.log('品类销售分布', res)
        if (res.status == 200) {
          const ret = { category: [], barData: [] }
          res.data.map(item => {
            ret.category.push(item.productBrandName)
            ret.barData.push((item.resultAmount / 1000).toFixed(2))
          })
          this.$nextTick(() => {
            this.init(ret)
            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 (newData) {
      this.options = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF'
          },
          formatter: function (params) {
            // 添加单位
            var result = params[0].name + '<br>'
            params.forEach(function (item) {
              if (item.value) {
                result +=
                  item.marker +
                  ' ' +
                  item.seriesName +
                  ' : ' +
                  item.value +
                  '万元</br>'
              } else {
                result += item.marker + ' ' + item.seriesName + ' :  0 </br>'
              }
            })
            return result
          }
        },
        legend: {
          data: ['品类销售分布'],
          textStyle: {
            color: '#B4B4B4'
          },
          top: '0'
        },
        grid: {
          left: '50px',
          right: '10px',
          bottom: '30px',
          top: '30px'
        },
        xAxis: {
          data: newData.category,
          axisLine: {
            lineStyle: {
              color: '#B4B4B4'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#B4B4B4'
              }
            },
            axisLabel: {
              formatter: '{value}万'
            },
            name: '销售额'
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'bar',
            barWidth: 30,
            itemStyle: {
              borderRadius: 0,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#956FD4' },
                { offset: 1, color: '#3EACE5' }
              ])
            },
            label: {
              show: true,
              position: 'outside',
              color: '#fff'
            },
            data: newData.barData
          }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
.center_bottom {
  width: 100%;
  height: 95%;
  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
