<template>
  <div>
    <a-row type="flex" class="row_center">
      <a-col :span="6" class="bg-gray">
        <div class="special-middle" style="text-align: right;">
          <div>三、分年度用款计划</div>
        </div>
      </a-col>
      <a-col :span="18" class="bg-gray">
        <div class="special-middle">
          <div></div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="6" class="bg-gray">
        <div class="special-middle" style="text-align: right;">
          <div>年度</div>
        </div>
      </a-col>
      <a-col :span="3" 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="3" 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="3" 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-row>

    <a-row v-for="(item, index) in fundPlan" :key="index" type="flex" class="row_center">
      <a-col :span="6" style="text-align: right;">
        <div class="special-middle">{{ item.fundName }}</div>
      </a-col>
      <a-col :span="3">
        <a-form-model-item v-if="!invisibleYearValue1.includes(index)" :prop="'fundPlan.' + index + '.yearValue1'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.yearValue1" @change="outNumberChange(index)" :min="0" :step="0.01" style="width: 80%" />
        </a-form-model-item>
        <div class="special-middle" v-else>{{parseFloat(item.yearValue1).toFixed(2)}}</div>
      </a-col>
      <a-col :span="3">
        <a-form-model-item v-if="!invisibleYearValue2.includes(index)" :prop="'fundPlan.' + index + '.yearValue2'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.yearValue2" @change="outNumberChange(index)" :min="0" :step="0.01" style="width: 80%" />
        </a-form-model-item>
        <div class="special-middle" v-else>{{parseFloat(item.yearValue2).toFixed(2)}}</div>
      </a-col>
      <a-col :span="3">
        <a-form-model-item v-if="!invisibleYearValue3.includes(index)" :prop="'fundPlan.' + index + '.yearValue3'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.yearValue3" @change="outNumberChange(index)" :min="0" :step="0.01" style="width: 80%" />
        </a-form-model-item>
        <div class="special-middle" v-else>{{parseFloat(item.yearValue3).toFixed(2)}}</div>
      </a-col>
      <a-col :span="3">
        <a-form-model-item v-if="!invisibleYearValue4.includes(index)" :prop="'fundPlan.' + index + '.yearValue4'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.yearValue4" @change="outNumberChange(index)" :min="0" :step="0.01" style="width: 80%" />
        </a-form-model-item>
        <div class="special-middle" v-else>{{parseFloat(item.yearValue4).toFixed(2)}}</div>
      </a-col>
      <a-col :span="3">
        <a-form-model-item v-if="!invisibleYearValue5.includes(index)" :prop="'fundPlan.' + index + '.yearValue5'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.yearValue5" @change="outNumberChange(index)" :min="0" :step="0.01" style="width: 80%" />
        </a-form-model-item>
        <div class="special-middle" v-else>{{parseFloat(item.yearValue5).toFixed(2)}}</div>
      </a-col>
      <a-col :span="3">
        <a-form-model-item v-if="!invisibleTotalAmount.includes(index)" :prop="'fundPlan.' + index + '.totalAmount'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.totalAmount" @change="outNumberChange(index)" :min="0" :step="0.01" style="width: 80%" />
        </a-form-model-item>
        <div class="special-middle" v-else>{{parseFloat(item.totalAmount).toFixed(2)}}</div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "FundPlanEdit",
  data() {
    return {
        invisibleYearValue1: [0],
        invisibleYearValue2: [0],
        invisibleYearValue3: [0],
        invisibleYearValue4: [0],
        invisibleYearValue5: [0],
        invisibleTotalAmount: [ 0, 1, 2 ],
    };
  },
  props: {
    fundPlan: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  created() {},
  methods: {
    calYearValue() {
      this.fundPlan[0].yearValue1 = this.fundPlan[1].yearValue1 + this.fundPlan[2].yearValue1
      this.fundPlan[0].yearValue2 = this.fundPlan[1].yearValue2 + this.fundPlan[2].yearValue2
      this.fundPlan[0].yearValue3 = this.fundPlan[1].yearValue3 + this.fundPlan[2].yearValue3
      this.fundPlan[0].yearValue4 = this.fundPlan[1].yearValue4 + this.fundPlan[2].yearValue4
      this.fundPlan[0].yearValue5 = this.fundPlan[1].yearValue5 + this.fundPlan[2].yearValue5
    },
    outNumberChange(index) {
      this.fundPlan[index].totalAmount = this.fundPlan[index].yearValue1 + this.fundPlan[index].yearValue2 + this.fundPlan[index].yearValue3 + this.fundPlan[index].yearValue4 + this.fundPlan[index].yearValue5
      this.calYearValue()
      this.fundPlan[0].totalAmount = this.fundPlan[0].yearValue1 + this.fundPlan[0].yearValue2 + this.fundPlan[0].yearValue3 + this.fundPlan[0].yearValue4 + this.fundPlan[0].yearValue5
    },
  },
};
</script>