let pointChart = null;
let pointChartOption = {
  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() {
    pointChart = echarts.init(this.$refs['pointChart']);
    pointChart.setOption(pointChartOption);
    this.getPointOverallData();
    this.getPointStatisticsData();
    this.getPointUseData();
  },
  data() {
    return {
      overall: {
        usePoint: 0,
        usedPoint: 0,
        pointGivenCount: 0,
        pointRechargeCount: 0
      },
      pointStatistics: {
        data: [],
        dataTime: null
      },
      pointRank: {
        pagination: {
          pages: 1,
          limit: 10,
          total: 50
        },
        data: [],
        search: {
          type: null,
          value: null
        },
        loading: false
      }
    }
  },
  methods: {
    getPointOverallData() {
      this.fetchData(GetPointOverallDataUrl).then(res => {
        this.overall = res.cumulative_data;
      });
    },
    getPointStatisticsData() {
      pointChart.showLoading();
      this.pointStatistics.data = [];
      this.fetchData(GetPointStatisticsDataUrl, {
        time: this.pointStatistics.dataTime ? this.pointStatistics.dataTime / 1000 : null
      }).then(data => {
        let legendData = [];
        let xAxisData = null;
        let series = [];
        for (const key in data) {
          if (Object.hasOwnProperty.call(data, key)) {
            const dataItem = data[key];
            this.pointStatistics.data.push({
              title: dataItem.name,
              count: dataItem.value,
              tip: dataItem.tips,
              decimals:this.getDecimals(dataItem.value)
            });
            legendData.push(dataItem.name);
            if (xAxisData === null) {
              xAxisData = dataItem['x_axis'];
            }
            series.push({
              type: "line",
              name: dataItem.name,
              data: dataItem.series
            });
          }
        }
        pointChart.setOption({
          legend: {
            data: legendData,
          },
          xAxis: {
            data: xAxisData
          },
          series
        });
        pointChart.hideLoading();
      });
    },
    searchMemberPointUseData() {
      this.pointRank.pagination.pages = 1;
      this.getPointUseData();
    },
    getPointUseData(page = this.pointRank.pagination.pages) {
      this.pointRank.loading = true;
      this.pointRank.pagination.pages = page;
      this.fetchData(GetPointUseDataUrl, {
        page,
        search_type: this.pointRank.search.type,
        search_data: this.pointRank.search.value,
      }).then(({ data, per_page, total }) => {
        this.pointRank.pagination.total = total;
        this.pointRank.pagination.limit = per_page;
        for (let index = 0; index < data.length; index++) {
          data[index]['rank'] = ((this.pointRank.pagination.pages - 1) * this.pointRank.pagination.limit) + index + 1;
        }
        this.pointRank.data = data;
        this.pointRank.loading = false;
      }).catch(() => {
        this.pointRank.loading = false;
      })
    }
  }
}