let couponChart = null;
let couponChartOption = {
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    right: 15,
    bottom: 25
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: "#f0f3f6",
        opacity: 1
      }
    }
  },
  series: [{
    data: [],
    type: 'line'
  }]
}
const mixin = {
  mounted() {
    couponChart = echarts.init(this.$refs['couponChart']);
    couponChart.setOption(couponChartOption);
    this.getCouponOverallData();
    this.getCouponStatisticsData();
    this.getCouponRankData();
  },
  data() {
    return {
      overall: {
        givenCoupon: 0,
        usedCoupon: 0,
        expiredCoupon: 0,
        receiveCoupon: 0
      },
      couponStatistics: {
        dataTime: null,
        data: []
      },
      couponRank: {
        pagination: {
          pages: 1,
          limit: 10,
          total: 50
        },
        data: []
      }
    }
  },
  methods: {
    getCouponOverallData() {
      this.fetchData(GetCouponOverallDataUrl).then(res => {
        this.overall = res.cumulative_data;
      });
    },
    getCouponStatisticsData() {
      couponChart.showLoading();
      this.fetchData(GetCouponStatisticsDataUrl, {
        time: this.couponStatistics.dataTime ? this.couponStatistics.dataTime / 1000 : null
      }).then(data => {
        let legendData = [];
        let xAxisData = null;
        let series = [];
        let statisticsData = [];
        for (const key in data) {
          if (Object.hasOwnProperty.call(data, key)) {
            const dataItem = data[key];
            legendData.push(dataItem['name']);
            if (xAxisData === null) {
              xAxisData = dataItem['x_axis'];
            }
            statisticsData.push({
              title: dataItem.name,
              tip: dataItem.tips,
              count: dataItem.value,
              key,
              decimals:this.getDecimals(dataItem.value)
            })
            series.push({
              name: dataItem.name,
              data: dataItem.series,
              type: "line",
            })
          }
        }
        this.couponStatistics.data = statisticsData;
        couponChart.setOption({
          legend: {
            data: legendData
          },
          xAxis: {
            data: xAxisData
          },
          series
        });
        couponChart.hideLoading();
      });
    },
    getCouponRankData(page = this.couponRank.pagination.pages) {
      let loading = this.$loading({
        target: "#couponRankPanel"
      })
      this.couponRank.pagination.pages = page;
      this.fetchData(GetCouponRankDataUrl, {
        page
      }).then(({
        data, per_page, total
      }) => {
        this.couponRank.pagination.limit = per_page;
        this.couponRank.pagination.total = total;
        for (let index = 0; index < data.length; index++) {
          data[index]['rank'] = (this.couponRank.pagination.pages - 1) * this.couponRank.pagination.limit + index + 1;
        }
        this.couponRank.data = data;
        loading.close();
      }).catch(() => {
        loading.close();
      })
    }
  }
}