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

<script>
import { graphic } from 'echarts'
import { querySaleTrend } from '@/api/bigScreen.js'
import getDate from '@/libs/getDate.js'
export default {
  props: {
    curYear: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      option: {},
      pageflag: true,
      timer: null,
      loading: false
    }
  },
  mounted () {
    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
      querySaleTrend(getDate.getBeDateByYear(this.curYear)).then((res) => {
        if (!this.timer) {
          console.log('销售趋势分析', res)
        }
        if (res.status == 200) {
          this.$nextTick(() => {
            this.init(res.data.dateList, res.data.amountList, res.data.qtyList)
            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 (xData, yData, yData2) {
      const colorList = ['#ffaa00', '#34c2ff', '#fe9a8b', '#F56948', '#9E87FF']
      this.option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF'
          },
          formatter: function (params) {
            return params[0].seriesName + ': ' + (params[0].value / 10000).toFixed(2) + '万元' + '<br>' + (params[1] ? (params[1].seriesName + ': ' + params[1].value) : '')
          }
        },
        legend: {
          show: true,
          top: '0',
          left: 'center',
          textStyle: {
            color: '#eee'
          }
        },
        grid: {
          // 布局
          show: true,
          left: '5px',
          right: '5px',
          bottom: '5px',
          top: '35px',
          containLabel: true,
          borderColor: 'rgba(31,99,163,.1)'
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: {
            lineStyle: {
              color: 'rgba(31,99,163,1)'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#eee',
              fontWeight: '500'
            },
            // 默认x轴字体大小
            fontSize: 12,
            // margin:文字到x轴的距离
            margin: 15
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          name: '销售金额',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: colorList[0]
            }
          },
          axisLabel: {
            color: colorList[0],
            fontWeight: '500',
            formatter: function (value) {
              return (value / 10000) + '万'
            }
          },
          splitLine: {
            show: false
          }
        }, {
          type: 'value',
          position: 'right',
          name: '销售数量',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: colorList[1],
            fontWeight: '500',
            formatter: '{value}'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: colorList[1]
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: '销售金额',
          type: 'line',
          data: yData,
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 1,
            color: new graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: colorList[0]
            },
            {
              offset: 1,
              color: colorList[0]
            }
            ]),
            shadowColor: 'rgba(158,135,255, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          },
          itemStyle: {
            normal: {
              color: colorList[0],
              borderColor: colorList[0]
            }
          }
        },
        {
          name: '销售数量',
          type: 'line',
          data: yData2,
          symbolSize: 1,
          yAxisIndex: 1,
          symbol: 'circle',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            width: 1,
            color: new graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: colorList[1]
            },
            {
              offset: 1,
              color: colorList[1]
            }
            ]),
            shadowColor: 'rgba(254,154,139, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          },
          itemStyle: {
            normal: {
              color: colorList[1],
              borderColor: colorList[1]
            }
          }
        }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
.right_top_inner {
  margin-top: 0;
}
</style>
