<!--
 * @Author: ysh
 * @Date: 2024-12-16 17:29:35
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-19 16:51:05
-->
<template>
  <div>
    <div class="text-center header">
      <span>借款列表</span>
    </div>
    <div class="content">
      <el-table v-loading="loading" :data="borrowList" height="350px">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="项目编号" align="center" prop="project.projectNumber" />
        <el-table-column label="借款人" align="center" prop="applier">
          <template slot-scope="scope">
            {{ getUserName(scope.row.applier) }}
          </template>
        </el-table-column>
        <el-table-column label="核准金额" align="center" prop="managerAmount" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="rowClickFn(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt10 mr20 text-right footer">
        <span class="mr20">共{{ total }}个借款申请</span>
        <span>借款总额：{{ sumAmount.toFixed(2) }}</span>
      </div>
    </div>
    <el-dialog title="借款明细" :visible.sync="infoOpen" width="50%" append-to-body>
      <borrow-form :taskForm="taskForm" :taskName="''" :flowDisabled="false"></borrow-form>
    </el-dialog>
  </div>
</template>

<script>
import { listBorrow, getBorrow, delBorrow, addBorrow, updateBorrow } from "@/api/oa/borrow/borrow";
import borrowData from '../../flowable/form/inProgress/borrowData.vue';
import BorrowForm from '../../flowable/form/finance/borrowForm.vue';
export default {
  components: { borrowData, BorrowForm },
  props: {
    projectId: {
      type: Array,
      default: []
    },
    contractId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      borrowList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 999,
        projectId: null,
      },
      total: 0,
      loading: true,
      sumAmount: 0,
      infoOpen: false,
      taskForm: {
        formId: '',
        procDefName: '借款审批'
      }
    }
  },
  watch: {
    projectId: {
      handler(newVal) {
        this.getList(newVal);
      },
      deep: true
    },
    contractId() {
      if (this.projectId.length == 0) {
        this.init();
      }
    },
    sumAmount(val){
      this.$emit('getSumAmount',val)
    }
  },
  created() {
    if (this.projectId.length == 0) {
      this.init();
    }
  },
  methods: {
    async getList(projectId) {
      this.loading = true
      if (projectId.length != 0) {
        this.borrowList = []
        this.sumAmount = 0
        this.total = 0
        for (let id of projectId) {
          let res = await listBorrow({ pageSize: 999, projectId: id })
          if (res.total > 0) {
            res.rows.map(item => this.borrowList.push(item));
            this.total = this.total + res.total;
          }
        }
        this.sumAmount = this.borrowList.reduce((sum, item) => sum + item.managerAmount, 0)
      } else {
        this.init();
      }
      this.loading = false
    },
    init() {
      this.borrowList = []
      this.total = 0
      this.sumAmount = 0
      this.loading = false
    },
    rowClickFn(row) {
      this.taskForm.formId = row.borrowId
      this.infoOpen = true;
    }
  },
}
</script>

<style lang="scss" scoped>
.header {
  font-family: 'puhuiti';
  font-size: 18px;
  line-height: 30px;
  position: relative;

  .info {
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.footer {
  font-size: 14px;
  font-family: 'puhuiti';
}

.content {}
</style>