let goodsChart = null;
let goodsChartOption = {
  toolbox: {
    show: true,
  },
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: []
  },
  grid:{
    right:15,
    bottom:35
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: "#f0f3f6",
        opacity: 1
      }
    }
  },
  series: []
}

const mixin = {
  mounted() {
    this.getGoodsOverallData();
    goodsChart = echarts.init(this.$refs['goodsChart']);
    goodsChart.setOption(goodsChartOption);
    this.getGoodsStatisticsData();
  },
  data() {
    return {
      overall: {
        goods_count: 0,
        pay_goods_count: 0,
        order_goods_count: 0
      },
      goodsSaleRank: [],
      categorySaleRank: [],
      goodsSaleAmountRank: [],
      goodsStatistics: [],
      goodsSearch: {
        timeRangeType: "key",
        timeRange: null
      }
    }
  },
  methods: {
    getGoodsOverallData() {
      let loading = this.$loading({
        target: "#goodsRankList"
      });
      this.fetchData(GetGoodsOverallData).then(res => {
        this.overall = res.cumulative_data;
        this.goodsSaleRank = res.goods_sales.data;
        this.categorySaleRank = res.category_goods_sales.data;
        this.goodsSaleAmountRank = res.goods_sales_amount.data;
        loading.close();
      }).catch(() => {
        loading.close();
      })
    },
    goodsTimeRangeChanged({ timeRange, timeRangeType }) {
      this.goodsSearch = {
        timeRange: timeRange ? timeRange / 1000 : null, timeRangeType
      }
      this.getGoodsStatisticsData();
    },
    getGoodsStatisticsData() {
      goodsChart.showLoading();
      this.fetchData(GetGoodsStatisticsDataUrl, {
        time_type: this.goodsSearch.timeRangeType,
        time: this.goodsSearch.timeRange
      }).then(res => {
        let goodsStatistics = [];
        let XAxisData = res[0]['x_axis'];
        let series = [];
        let legendData = [];
        res.forEach(item => {
          legendData.push(item.name);
          goodsStatistics.push({
            title: item.name,
            count: item.value,
            tip: item.tips
          });
          series.push({
            name: item.name,
            type: "line",
            data: item.series
          })
        });
        this.goodsStatistics = goodsStatistics;
        goodsChart.setOption({
          legend: {
            data: legendData
          },
          xAxis: {
            data: XAxisData
          },
          series
        });
        goodsChart.hideLoading();
      });
    }
  }
}