<template>
  <div class="tenant">
    <el-form :inline="true" :model="sourceList.pagination" class="demo-form-inline">
      <el-form-item label="起止时间:">
        <el-col :span="11">
          <el-date-picker
            type="month"
            placeholder="选择开始月份"
            v-model="sourceList.pagination.beginTime"
            value-format="YYYY-MM-01"
            style="width: 100%"
            @change="getList"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align: center">至</el-col>
        <el-col :span="11">
          <el-date-picker
            type="month"
            placeholder="选择结束月份"
            v-model="sourceList.pagination.endTime"
            value-format="YYYY-MM-31"
            style="width: 100%"
            @change="getList"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="部门:" prop="deptId">
        <el-tree-select
          v-model="sourceList.pagination.deptId"
          :data="deptList"
          :render-after-expand="false"
          check-strictly
          :node-key="'deptId'"
          :props="defaultProps" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="sourceList.data" style="width: 100%">
      <el-table-column prop="deptName" label="部门" width="180" />
      <el-table-column v-for="(item, index) in monthList" :key="index" align="center" :label="item">
        <el-table-column align="center" label="收入" width="120">
          <template #default="{ row }">
            <span>{{ getMoney(row.accountRunningWaterVoList, item, "incomeAmount") }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="支出" width="120">
          <template #default="{ row }">
            <span>{{ getMoney(row.accountRunningWaterVoList, item, "expenditureAmount") }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结余" width="120">
          <template #default="{ row }">
            <span>{{ getMoney(row.accountRunningWaterVoList, item, "balanceAmount") }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import useUserStore from "@/store/modules/user";
import moment from "moment";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const deptList = ref([]);
const monthList = ref([]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    beginTime: moment().format("yyyy") + "-01-01",
    endTime: moment().format("yyyy") + "-12-31",
    deptId: "",
  },
});
const defaultProps = {
  children: "children",
  label: "deptName",
};
const loading = ref(false);
const getMonthBetween = (start, end) => {
  var result = [];
  var s = start.split("-");
  var e = end.split("-");
  var min = new Date();
  var max = new Date();
  min.setFullYear(s[0], s[1]);
  max.setFullYear(e[0], e[1]);
  var curr = min;
  while (curr <= max) {
    var month = curr.getMonth();
    var str = (month == 0 ? curr.getFullYear() - 1 : curr.getFullYear()) + "-" + (month == 0 ? 12 : month < 10 ? "0" + month : month);
    var s = curr.getFullYear() + "-12";
    if (str == s) {
      str = curr.getFullYear() + "-12";
    }
    result.push(str);
    curr.setMonth(month + 1);
  }
  return result;
};
const getDict = () => {
  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      pageSize: 999,
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      deptList.value = proxy.handleTree(res.data, "deptId");
    });
};
const getList = async () => {
  if (!sourceList.value.pagination.beginTime) {
    return ElMessage("请选择开始月份");
  }
  if (!sourceList.value.pagination.endTime) {
    return ElMessage("请选择结束月份");
  }
  monthList.value = getMonthBetween(sourceList.value.pagination.beginTime.substring(0, 7), sourceList.value.pagination.endTime.substring(0, 7));
  loading.value = true;
  proxy.post("/accountDeptRunningWater/DeptRunningWaterReport", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getDict();
getList();
const getMoney = (list, time, key) => {
  let text = 0;
  let data = list.filter((item) => item.time === time);
  if (data && data.length > 0) {
    text = data[0][key];
  }
  return text;
};
</script>

<style lang="scss" scoped>
.tenant {
  margin: 20px;
  padding: 20px;
  background: #fff;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>
