<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="tb-title">
          <span>科技计划项目承担单位研究资金支出预算明细表<strong>(金额单位：万元)</strong></span>
        </div>
      </a-col>
    </a-row>

    <a-row type="flex" class="row_center">
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div>序号</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div>单位名称</div>
        </div>
      </a-col>
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div>单位国别</div>
        </div>
      </a-col>
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div>统一社会信用代码</div>
        </div>
      </a-col>
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div>单位类型</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>任务分工</div>
        </div>
      </a-col>
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div>研究任务负责人</div>
        </div>
      </a-col>
      <a-col :span="1" class="bg-gray">
        <div class="special-middle">
          <div>合计</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div style="height: 30px;">
            <div>省级财政资金</div>
        </div>
        <div style="padding-bottom: 5px;">
            <div class="special-middle" style="float:left;width: 50%;height: 20px;">
                <div>小计</div>
            </div>
            <div class="special-middle" style="float:right;width: 50%;height: 20px;">
                <div>其中:间接费用</div>
            </div>
        </div>
      </a-col>
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div>自筹资金</div>
        </div>
      </a-col>
    </a-row>

    <a-row v-for="(item, index) in unitPayment" :key="'unitPayment' + index" type="flex" class="row_center">
      <a-col :span="2">
        <div class="special-middle">{{ index + 1 }}</div>
      </a-col>
      <a-col :span="3">
        <div class="special-middle">{{ item.unitName }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.countryName }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.socialCode }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.roleName }}</div>
      </a-col>
      <a-col :span="4">
        <div class="special-middle">{{ item.taskDivision }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.taskLeader }}</div>
      </a-col>
      <a-col :span="1">
        <div class="special-middle">
          <div>{{ parseFloat(item.totalAmount).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">
          <div>{{ parseFloat(item.fundAmount).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">
          <div>{{ parseFloat(item.indirectFee).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">
          <div>{{ parseFloat(item.selfAmount).toFixed(2) }}</div>
        </div>
      </a-col>
    </a-row>

    <a-row type="flex" class="row_center">
      <a-col :span="17">
        <div class="special-middle">累计</div>
      </a-col>
      <a-col :span="1"><div class="special-middle">{{ parseFloat(TtotalAmount).toFixed(2) }}</div></a-col>
      <a-col :span="2"><div class="special-middle">{{ parseFloat(TfundAmount).toFixed(2) }}</div></a-col>
      <a-col :span="2"><div class="special-middle">{{ parseFloat(TindirectFee).toFixed(2) }}</div></a-col>
      <a-col :span="2"><div class="special-middle">{{ parseFloat(TselfAmount).toFixed(2) }}</div></a-col>
    </a-row>

    <a-row type="flex" class="item_inner">
      <a-col :span="24">
        <span style="color: red;">注:1.单位类型为项目承担单位、项目参加单位。<br />
            2.任务分工的描述应简洁，不超过300字。</span>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const Payment = {
    id: "",
    objectId: "",
    unitName: "",
    countryName: "",
    socialCode: "",
    unitRole: null,
    taskDivision: "",
    taskLeader: "",
    totalAmount: 0.00,
    indirectFee: 0.00,
    fundAmount: 0.00,
    selfAmount: 0.00,
}

export default {
  name: "UnitPaymentInfo",
  props: {
    unitPayment: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      TtotalAmount: 0.00,
      TindirectFee: 0.00,
      TfundAmount: 0.00,
      TselfAmount: 0.00,
    };
  },
  created() {
  },
  methods: {
    outAmountChange(index) {
      this.unitPayment[index].totalAmount = this.unitPayment[index].fundAmount + this.unitPayment[index].selfAmount
      this.calTotalAmount()
    },
    outFundAmountChange(index) {
      if (this.unitPayment[index].indirectFee > this.unitPayment[index].fundAmount) {
        this.$message.error("间接费用不能超过小计！")
        this.unitPayment[index].indirectFee = 0.00
      }

      this.calTotalAmount()
    },
    calTotalAmount() {
      this.TfundAmount = 0.00
      this.TindirectFee = 0.00
      this.TselfAmount = 0.00
      this.TtotalAmount = 0.00

      this.unitPayment.forEach(e => {
        this.TfundAmount += e.fundAmount
        this.TindirectFee += e.indirectFee
        this.TselfAmount += e.selfAmount
        this.TtotalAmount += e.totalAmount
      })
    }
  },
  watch: {
    unitPayment: {
      handler (unitPayment) {
        if (!!unitPayment)
          this.calTotalAmount()
      },
    },
  }
};
</script>