<!--
 * @Author: ysh
 * @Date: 2024-12-16 17:33:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-19 14:29:29
-->
<template>
  <div>
    <div class="text-center header">
      结算列表
    </div>
    <el-table v-loading="loading" :data="settleList" height="350px">
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column label="项目编号" align="center" prop="project.projectNumber" />
      <el-table-column label="上报人" align="center" prop="reporter">
        <template slot-scope="scope">
          {{ getUserName(scope.row.reporter) }}
        </template>
      </el-table-column>
      <el-table-column label="结算金额" align="center" prop="amount" />
      <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>
    <el-dialog title="结算明细" :visible.sync="infoOpen" width="70%" append-to-body>
      <settle-form :taskForm="taskForm" :taskName="''" :flowDisabled="false" :disabled="true"></settle-form>
    </el-dialog>
  </div>
</template>

<script>
import { listSettle, getSettle, delSettle, addSettle, updateSettle } from "@/api/oa/settle/settle";
import { listSettleSummary, getSettleSummary, delSettleSummary, addSettleSummary, updateSettleSummary } from "@/api/oa/settle/settleSummary";
import settleForm from '../../flowable/form/settleForm.vue';
export default {
  components: { settleForm },
  props: {
    projectId: {
      type: Array,
      default: []
    },
    contractId: {
      type: String,
      default: ''
    }
  },
  watch: {
    projectId: {
      handler(newVal) {
        this.getList(newVal)
        if (this.projectId.length == 0) {
          this.settleList = []
          this.total = 0
          this.sumAmount = 0
          this.loading = false
        }
      },
      deep: true
    },
    contractId() {
      if (this.projectId.length == 0) {
        this.settleList = []
        this.total = 0
        this.sumAmount = 0
        this.loading = false
      }
    },
    sumAmount(val) {
      this.$emit('getSumAmount', val)
    }
  },
  created() {
    if (this.projectId.length == 0) {
      this.settleList = []
      this.total = 0
      this.sumAmount = 0
      this.loading = false
    }
  },
  data() {
    return {
      settleList: [],
      total: 0,
      loading: true,
      sumAmount: 0,
      infoOpen: false,
      taskForm: {
        formId: ''
      }
    }
  },
  methods: {
    async getList(projectId) {
      this.loading = true
      if (projectId.length != 0) {
        this.settleList = []
        this.sumAmount = 0
        this.total = 0
        for (let id of projectId) {
          let res = await listSettle({ pageSize: 999, projectId: id });
          if (res.total > 0) {
            res.rows.map(item => this.settleList.push(item));
            this.total = this.total + res.total;
          }
        }
        for (let settle of this.settleList) {
          let resData = await listSettleSummary({ pageSize: 999, settleId: settle.settleId, content: '实际结算总金额' });
          if (resData.total > 0) {
            this.$set(settle, 'amount', resData.rows[0].amount)
          }
        }
        this.sumAmount = this.settleList.reduce((sum, item) => sum + item.amount, 0)
      }
      this.loading = false
    },
    rowClickFn(row) {
      this.taskForm.formId = row.settleId;
      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';
}
</style>