let balanceChart = null;
let balanceChartOption = {
  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 = {
  data() {
    return {
      overall: {
        balanceUseCount: 0,
        balanceUsedCount: 0,
        balanceWithdrawCount: 0,
        balanceIncomeCount: 0,
        balanceRechargeCount: 0,
        balanceMemberRechargeCount: 0,
      },
      balanceStatisticsTime: null,
      balanceStatisticsData: [],
      balanceUseData: [],
      balanceUseDataSearchMember: null,
      balanceUseDataSearchMemberLoading: false,
      balanceUsePagination: {
        pages: 1,
        limit: 10,
        total: 50
      }
    }
  },
  mounted() {
    balanceChart = echarts.init(this.$refs['balanceChart']);
    balanceChart.setOption(balanceChartOption);
    this.getBalanceOverallData();
    this.getBalanceStatisticsData();
    this.getMemberBalanceUseData();
  },
  methods: {
    getBalanceOverallData() {
      this.fetchData(GetBalanceOverallDataUrl).then(res => {
        this.overall = res.cumulative_data;
      });
    },
    getBalanceStatisticsData() {
      balanceChart.showLoading();
      this.fetchData(GetBalanceStaitsticsUrl, {
        time: this.balanceStatisticsTime ? this.balanceStatisticsTime / 1000 : null
      }).then(data => {
        let balanceStatisticsData = [];

        let XAxisData = null;
        let legendData = [];
        let series = [];
        for (const key in data) {
          if (Object.hasOwnProperty.call(data, key)) {
            const dataItem = data[key];
            if (XAxisData === null) {
              XAxisData = dataItem['x_axis'];
            }
            balanceStatisticsData.push({
              title: dataItem.name,
              count: dataItem.value,
              tip: dataItem.tips,
              key,
              decimals:this.getDecimals(dataItem.value)
            });
            series.push({
              name: dataItem.name,
              type: "line",
              data: dataItem.series
            })
            legendData.push(dataItem['name']);
          }
        }

        balanceChart.setOption({
          legend: {
            data: legendData
          },
          xAxis: {
            data: XAxisData,
          },
          series
        });
        this.balanceStatisticsData = balanceStatisticsData;
        balanceChart.hideLoading();
      });
    },
    searchMemberBalanceUseData() {
      this.balanceUsePagination.pages = 1;
      this.getMemberBalanceUseData();
    },
    getMemberBalanceUseData(page = this.balanceUsePagination.pages) {
      this.balanceUseDataSearchMemberLoading = true;
      this.balanceUsePagination.pages = page;
      this.fetchData(GetMemberBalanceUseDataUrl, {
        page,
        member: this.balanceUseDataSearchMember
      }).then(({ data, per_page, total }) => {
        this.balanceUsePagination.total = total;
        this.balanceUsePagination.limit = per_page;
        for (let index = 0; index < data.length; index++) {
          data[index]['rank'] = ((this.balanceUsePagination.pages - 1) * this.balanceUsePagination.limit) + index + 1;
        }
        this.balanceUseData = data;
        this.balanceUseDataSearchMemberLoading = false;
      });
    }
  }
}