<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="main-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="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="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="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"><a-button icon="close" type="primary" shape="circle" size="small" @click="deleteUnitPayment(item)"></a-button>&nbsp;{{ index + 1 }}</div>
      </a-col>
      <a-col :span="4">
        <a-form-model-item :prop="'unitPayment.' + index + '.unitName'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.unitName" :maxLength="100" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <!-- <a-col :span="2">
        <a-form-model-item :prop="'unitPayment.' + index + '.countryName'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.countryName" :maxLength="100" style="width: 90%;" />
        </a-form-model-item>
      </a-col> -->
      <a-col :span="3">
        <a-form-model-item :prop="'unitPayment.' + index + '.socialCode'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.socialCode" :maxLength="50" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'unitPayment.' + index + '.unitRole'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <para-select v-model="item.unitRole" :typeId="65" :isAll="true" :width="110" />
        </a-form-model-item>
      </a-col>
      <a-col :span="4">
        <a-form-model-item :prop="'unitPayment.' + index + '.taskDivision'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.taskDivision" :maxLength="300" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'unitPayment.' + index + '.taskLeader'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.taskLeader" :maxLength="60" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="1">
        <div class="special-middle">
          <div>{{ parseFloat(item.totalAmount).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'unitPayment.' + index + '.fundAmount'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.fundAmount" @change="outAmountChange(index)" :min="0" :step="0.01" style="width: 90%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'unitPayment.' + index + '.indirectFee'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.indirectFee" @change="outFundAmountChange(index)" :min="0" :step="0.01" style="width: 90%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'unitPayment.' + index + '.selfAmount'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.selfAmount" @change="outAmountChange(index)" :min="0" :step="0.01" style="width: 90%" />
        </a-form-model-item>
      </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">
      <a-col :span="24" style="text-align: center">
        <div class="special-middle">
          <a-button type="dashed" style="width: 20%" @click="addArray()">
            <a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
          </a-button>
        </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>
import paraSelect from '@/views/components/common/paraSelect'

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: "UnitPaymentEdit",
  components: {
    paraSelect
  },
  props: {
    unitPayment: {
      type: Array,
      default: () => {
        return [{ ...Payment }];
      },
    },
  },
  data() {
    return {
      TtotalAmount: 0.00,
      TindirectFee: 0.00,
      TfundAmount: 0.00,
      TselfAmount: 0.00,
    };
  },
  created() {
  },
  methods: {
    addArray() {
      this.unitPayment.push(Object.assign({ ...Payment }))
    },
    deleteUnitPayment(item) {
      let index = this.unitPayment.indexOf(item)
      if (index !== -1) {
        this.unitPayment.splice(index, 1)
      }
    },
    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>