let incomeChart = null;
let incomeChartOption = {
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    bottom: 25,
    right:30
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: "#f0f3f6",
        opacity: 1
      }
    }
  },
  series: [{
    data: [],
    type: 'line'
  }]
}
const incomeMixin = {
  data() {
    return {
      timeRanges: {
        time: null,
        type: null,
      },
      rank: {
        data: [],
        pagination: {
          pages: 1,
          total: 10,
          limit: 10
        }
      }
    }
  },
  mounted() {
    incomeChart = echarts.init(this.$refs['incomeChart']);
    incomeChart.setOption(incomeChartOption);
    this.getOverallData();
    this.getStatisticsData();
    this.getRankData();
  },
  methods: {
    incomeTimerangeChanged({ timeRange, timeRangeType }) {
      this.timeRanges = {
        time: timeRange ?  typeof(timeRange) == 'number' ? timeRange / 1000 :{start:timeRange[0],end:timeRange[1]}: null,
        type: timeRangeType
      }
      this.getStatisticsData();
    },
    getOverallData() {
      this.fetchData(overallUrl).then(res => {
        let overallData = res.cumulative_data;
        for (const key in overallData) {
          if (this.statistics[key]) {
            this.statistics[key]['counts'] = overallData[key];
          }
        }
      });
    },
    getStatisticsData() {
      incomeChart.showLoading();
      this.fetchData(statisticsUrl, {
        time_type: this.timeRanges.type,
        time: this.timeRanges.time,
      }).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'];
            }
            series.push({
              type: "line",
              name: dataItem.name,
              data: dataItem.series
            });
            statisticsData.push({
              title: dataItem.name,
              tip: dataItem.tips,
              counts: dataItem.value,
              key,
              decimals:this.getDecimals(dataItem.value)
            });
          }
        }
        this.chartStatistics = statisticsData;
        incomeChart.setOption({
          legend: {
            data: legendData,
          },
          xAxis: {
            data: xAxisData
          },
          series
        });
        incomeChart.hideLoading();
      });
    },
    getRankData(page = this.rank.pagination.pages) {
      this.rank.pagination.pages = page;
      let loading = this.$loading({
        target: "#rankPanel"
      })
      this.fetchData(rankDataUrl, {
        page
      }).then(({ total, per_page, data }) => {
        this.rank.pagination.limit = per_page;
        this.rank.pagination.total = total;
        for (let index = 0; index < data.length; index++) {
          data[index]['rank'] = (this.rank.pagination.pages - 1) * this.rank.pagination.limit + index + 1;
        }
        this.rank.data = data;
        loading.close();
      }).catch(() => {
        loading.close();
      })
    }


  }
};