<template>
  <div>
    <el-row type="flex">
      <el-tabs  style="width: 100%">
        <el-tab-pane label="月报表">
          <range-picker v-model="queryParams.payTimeYear" @change="onChangeYear" suffix="年"/>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <single-line-chart v-loading="loading" :labels="labels" :chart-data="chartData" name="收入(元)" height="288px"/>
  </div>
</template>

<script>
import SingleLineChart from "@/components/SingleLineChart/index.vue";
import RangePicker from "@/components/RangePicker/index.vue";
import {countBill, listBill} from "@/api/system/recharge";
import {BonusArrivalType} from "@/utils/constants";
import {getBonusMonthAmount} from "@/api/system/dashboard";

export default {
  name: 'userRechargeReport',
  components: {RangePicker, SingleLineChart},
  props: {
    // 到账人id
    mchId: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      labels: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], // x轴
      chartData: [],  // 报表数据
      queryParams: {
        payTimeYear: new Date().getFullYear(),
        arrivalId: this.mchId,
        arrivalTypes: BonusArrivalType.userList()
      },
      loading: false,
    }
  },
  watch: {
    mchId(nv, ov) {
      this.getReportData(nv);
    }
  },
  methods: {
    // 当年份发生变化
    onChangeYear(year) {
      this.queryParams.payTimeYear = year;
      this.getReportData(this.mchId);
    },
    // 获取到账人的报表
    getReportData(mchId) {
      this.loading = true;
      this.queryParams.arrivalId = mchId | this.mchId;
      getBonusMonthAmount(this.queryParams).then(response => {
        let data = response.data;
        // 按月统计数据
        let list = [];
        if (data != null) {
          for (let i = 1; i <= this.getReportMonth(); i ++) {
            let monthData = data.find(item => item.month === i);
            list[i - 1] = monthData == null ? 0 : monthData.amount;
          }
        }
        this.chartData = list;
      }).finally(() => {
        this.loading = false;
      })
    },
    // 获取报表显示的月份
    getReportMonth() {
      let now = new Date();
      let nowYear = new Date().getFullYear()
      let paramYear = this.queryParams.payTimeYear;
      if (paramYear < nowYear) {
        return 12;
      }
      if (paramYear === nowYear) {
        return now.getMonth() + 1;
      }
      return 0;
    },
    // 获取字符串时间的月份
    getMonth(str) {
      if (str == null) {
        return null;
      }
      return new Date(str).getMonth() + 1;
    }

  }
}
</script>

<style scoped>
.title {
  line-height: 36px;
}
</style>
