<template>
  <div>
    <el-row type="flex">
      <el-tabs v-model="queryParams.groupBy" style="width: 100%" >
        <el-tab-pane label="日报表" name="create_date">
          <el-row type="flex">
            <el-col :span="16">
              <range-picker :end="new Date().getFullYear()" v-model="queryParams.year" @change="onChangeYear" suffix="年" />
              <range-picker :start='1' :end="reportMonthEnd" v-model="queryParams.month" @change="onChangeMonth" suffix="月"/>
            </el-col>
            <el-col  :span="8" class="used">
              本月用电量（度）
              <span class="used-num">{{groupTotalUsed | money}}</span>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="月报表" name="create_month">
          <el-row type="flex">
            <el-col :span="16">
              <range-picker :end="new Date().getFullYear()" v-model="queryParams.year" @change="onChangeYear" suffix="年"/>
            </el-col>
            <el-col :span="8" class="used">
              本年用电量（度）
              <span class="used-num">{{groupTotalUsed | money}}</span>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>

    <single-line-chart v-if="records && records.length > 0" v-loading="loading" :labels="labels" :chart-data="chartData" name="用电量" />
    <el-empty v-else description="暂无数据" />
  </div>
</template>

<script>
import SingleLineChart from "@/components/SingleLineChart/index.vue";
import {listCountRecord,} from "@/api/system/record";
import RangePicker from "@/components/RangePicker/index.vue";

export default {
  name: 'meterRecordReport',
  components: {RangePicker, SingleLineChart},
  props: {
    // 设备id
    deviceId: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      loading: false,
      records: [],  // 记录列表
      queryParams: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        groupBy: "create_date",
      }
    }
  },
  watch: {
    deviceId(nv, ov) {
      this.getReportData(nv);
    },
    "queryParams.groupBy": {
      handler(nv, ov) {
        if (nv === 'create_month') {  // 月报表
          this.queryParams.month = null;
        }
        if (nv === 'create_date') {// 日报表
          this.queryParams.month = new Date().getMonth() + 1;
        }
        this.getReportData(this.deviceId);
      }
    }
  },
  computed: {
    labels() {
      if (this.queryParams.groupBy === 'create_date') {
        return this.records.map(item => item.createDate);
      } else if (this.queryParams.groupBy === 'create_month') {
        return this.records.map(item => item.createMonth + '月');
      }
      return [];
    },
    chartData() {
      return this.records.map(item => item.groupUsedElectriQuantity);
    },
    // 每组的总用电量
    groupTotalUsed() {
      let sum = 0;
      this.records.forEach(item => sum += item.groupUsedElectriQuantity);
      return sum;
    },
    // 获取报表显示的月份
    reportMonthEnd() {
      let now = new Date();
      let nowYear = new Date().getFullYear()
      let paramYear = this.queryParams.year;
      if (paramYear < nowYear) {
        return 12;
      }
      if (paramYear === nowYear) {
        return now.getMonth() + 1;
      }
      return 0;
    },
  },
  created() {
    this.getReportData(this.deviceId);
  },
  methods: {
    // 切换月份
    onChangeMonth(month) {
      this.queryParams.month = month;
      this.getReportData(this.deviceId);
    },
    // 切换年份
    onChangeYear(year) {
      this.queryParams.year = year;
      let now = new Date();
      if (year === now.getFullYear()) {
        if (this.queryParams.month > now.getMonth() + 1) {
          this.queryParams.month = new Date().getMonth() + 1;
        }
      }
      this.getReportData(this.deviceId);
    },
    // 获取报表信息
    getReportData(deviceId) {
      this.loading = true;
      this.queryParams.deviceId = deviceId | this.deviceId;
      listCountRecord(this.queryParams).then(response => {
        this.records = response.data;
      }).finally(() => {
        this.loading = false;
      })
    },
  }
}
</script>

<style scoped type="scss">
.used {
  line-height: 36px;
  text-align: right;
}
.used-num {
  font-size: 24px;
  font-weight: bold;
}
</style>
