<template>
  <div>
    <div class="text-center header">
      预算列表
    </div>
    <el-table v-loading="loading" :data="budgetList" height="350px">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="项目编号" align="center" prop="project.projectNumber" />
      <el-table-column label="编制人" align="center" prop="compiler">
        <template slot-scope="scope">
          {{ getUserName(scope.row.compiler) }}
        </template>
      </el-table-column>
      <el-table-column label="预算总额" align="center" prop="totalBudget" />
    </el-table>
    <div class="mt10 mr20 text-right footer">
      <span class="mr20">共{{ total }}个预算申请</span>
      <span>预算总额：{{ sumAmount.toFixed(2) }}</span>
    </div>
  </div>
</template>

<script>
import { listBudget, getBudget, delBudget, addBudget, updateBudget } from "@/api/oa/budget/budget";
export default {
  props: {
    projectId: {
      type: Array,
      default: []
    },
    contractId: {
      type: String,
      default: ''
    }
  },
  watch: {
    projectId: {
      handler(newVal) {
        this.getList(newVal)
      },
      deep: true
    },
    contractId() {
      if (this.projectId.length == 0) {
        this.budgetList = []
        this.total = 0
        this.sumAmount = 0
        this.loading = false
      }
    },
    sumAmount(val){
      this.$emit('getSumAmount',val)
    }
  },
  created() {
    if (this.projectId.length == 0) {
      this.budgetList = []
      this.total = 0
      this.sumAmount = 0
      this.loading = false
    }
  },
  data() {
    return {
      budgetList: [],
      total: 0,
      loading: true,
      sumAmount: 0,
    }
  },
  methods: {
    async getList(projectId) {
      this.loading = true
      if (projectId.length != 0) {
        this.budgetList = []
        this.sumAmount = 0
        this.total = 0
        for (let id of projectId) {
          let res = await listBudget({ pageSize: 99, projectId: id })
          if (res.total > 0) {
            res.rows.map(item => this.budgetList.push(item));
            this.total = this.total + res.total;
          } else {
            this.budgetList = []
            this.total = 0
            this.sumAmount = 0
          }
        }
        this.sumAmount = this.budgetList.reduce((sum, item) => sum + item.totalBudget, 0)
      } else {
        this.budgetList = []
        this.total = 0
        this.sumAmount = 0
      }
      this.loading = false
    }
  },
}
</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>