<template>
  <div>
    <a-row type="flex" class="row_center">
      <a-col :span="5" class="bg-gray">
        <div class="special-middle">
          <div class="required">申请资助的预算支出科目</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div class="required">第一年</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div class="required">第二年</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div class="required">第三年</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div class="required">第四年</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div class="required">第五年</div>
        </div>
      </a-col>
      <a-col :span="2" class="bg-gray">
        <div class="special-middle">
          <div class="required">费用</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 budgetList" :key="index" type="flex" class="row_center">
      <a-col :span="5" style="text-align: left;" >
        <div class="special-middle">{{ item.budgetName }}</div>
      </a-col>
      <a-col :span="3">
        <div class="special-middle">
          <div>{{parseFloat(item.yearValue1).toFixed(2)}}</div>
        </div>
      </a-col>
      <a-col :span="3">
        <div class="special-middle">
          <div>{{parseFloat(item.yearValue2).toFixed(2)}}</div>
        </div>
      </a-col>
      <a-col :span="3">
        <div class="special-middle">
          <div>{{parseFloat(item.yearValue3).toFixed(2)}}</div>
        </div>
      </a-col>
      <a-col :span="3">
        <div class="special-middle">
          <div>{{parseFloat(item.yearValue4).toFixed(2)}}</div>
        </div>
      </a-col>
      <a-col :span="3">
        <div class="special-middle">
          <div>{{parseFloat(item.yearValue5).toFixed(2)}}</div>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="special-middle">
          <div>{{ parseFloat(item.amountFee).toFixed(2) }}</div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="5" class="bg-gray">
        <div class="special-middle">
          <div>合计</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div>{{ parseFloat(totalYearValue1).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div>{{ parseFloat(totalYearValue2).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div>{{ parseFloat(totalYearValue3).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div>{{ parseFloat(totalYearValue4).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div>{{ parseFloat(totalYearValue5).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>{{ parseFloat(totalFee).toFixed(2) }}</div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
const Budget = { id: null, talentId: null, budgetId: "00000000-0000-0000-0000-000000000000", yearValue1: 0.00, yearValue2: 0.00, yearValue3: 0.00, yearValue4: 0.00, yearValue5: 0.00, amountFee: 0.00, showIndex: null, isRequired: false }

export default {
  name: "budgetFiveInfo",
  props: {
    budgetList: {
      type: Array,
      default: () => {
        return [{ ...Budget }];
      },
    }
  },
  data() {
    return {
      totalYearValue1: 0.00,
      totalYearValue2: 0.00,
      totalYearValue3: 0.00,
      totalYearValue4: 0.00,
      totalYearValue5: 0.00,
      totalFee: 0.00,
      invisibleYearValue1: [ 2, 8 ],
      invisibleYearValue2: [ 2, 8 ],
      invisibleYearValue3: [ 2, 8 ],
      invisibleYearValue4: [ 2, 8 ],
      invisibleYearValue5: [ 2, 8 ],
    }
  },
  created() {
    //this.calTotalFee()
  },
  methods: {
    FeeChange (index) {
      if (index == 0)
        this.educationFee()
      else if (index == 1)
        this.scienceFee()
      else if (index > 2 && index < 8)
        this.researchFee(index)
      else if (this.budgetList.length > 8)
        this.otherFee(index)

      this.calTotalFee()
    },
    YearValue1Change (index) {
      this.FeeChange(index)
    },
    YearValue2Change (index) {
      this.FeeChange(index)
    },
    YearValue3Change (index) {
      this.FeeChange(index)
    },
    YearValue4Change (index) {
      this.FeeChange(index)
    },
    YearValue5Change (index) {
      this.FeeChange(index)
    },
    calTotalFee() {
      this.totalYearValue1 = this.budgetList[0].yearValue1 + this.budgetList[1].yearValue1 + this.budgetList[2].yearValue1 + this.budgetList[8].yearValue1
      this.totalYearValue2 = this.budgetList[0].yearValue2 + this.budgetList[1].yearValue2 + this.budgetList[2].yearValue2 + this.budgetList[8].yearValue2
      this.totalYearValue3 = this.budgetList[0].yearValue3 + this.budgetList[1].yearValue3 + this.budgetList[2].yearValue3 + this.budgetList[8].yearValue3
      this.totalYearValue4 = this.budgetList[0].yearValue4 + this.budgetList[1].yearValue4 + this.budgetList[2].yearValue4 + this.budgetList[8].yearValue4
      this.totalYearValue5 = this.budgetList[0].yearValue5 + this.budgetList[1].yearValue5 + this.budgetList[2].yearValue5 + this.budgetList[8].yearValue5

      this.totalFee = this.totalYearValue1 + this.totalYearValue2 + this.totalYearValue3 + + this.totalYearValue4 + this.totalYearValue5
    },
    //一、国内外进修费用
    educationFee () {
      this.budgetList[0].amountFee = this.budgetList[0].yearValue1 + this.budgetList[0].yearValue2 + this.budgetList[0].yearValue3 + this.budgetList[0].yearValue4 + this.budgetList[0].yearValue5
    },
    //二、学术交流费用
    scienceFee () {
      this.budgetList[1].amountFee = this.budgetList[1].yearValue1 + this.budgetList[1].yearValue2 + this.budgetList[1].yearValue3 + this.budgetList[1].yearValue4 + this.budgetList[1].yearValue5
    },
    //三、研究费用
    researchFee (index) {
      this.budgetList[index].amountFee = this.budgetList[index].yearValue1 + this.budgetList[index].yearValue2 + this.budgetList[index].yearValue3 + this.budgetList[index].yearValue4 + this.budgetList[index].yearValue5

      this.budgetList[2].yearValue1 = 0.00
      this.budgetList[2].yearValue2 = 0.00
      this.budgetList[2].yearValue3 = 0.00
      this.budgetList[2].yearValue4 = 0.00
      this.budgetList[2].yearValue5 = 0.00
      for (let i = 3; i <= 7; i++) {
        this.budgetList[2].yearValue1 += this.budgetList[i].yearValue1
        this.budgetList[2].yearValue2 += this.budgetList[i].yearValue2
        this.budgetList[2].yearValue3 += this.budgetList[i].yearValue3
        this.budgetList[2].yearValue4 += this.budgetList[i].yearValue4
        this.budgetList[2].yearValue5 += this.budgetList[i].yearValue5
      }
      this.budgetList[2].amountFee = this.budgetList[2].yearValue1 + this.budgetList[2].yearValue2 + this.budgetList[2].yearValue3 + this.budgetList[2].yearValue4 + this.budgetList[2].yearValue5
    },
    //四、其他费用
    otherFee (index) {
      this.budgetList[index].amountFee = this.budgetList[index].yearValue1 + this.budgetList[index].yearValue2 + this.budgetList[index].yearValue3 + this.budgetList[index].yearValue4 + this.budgetList[index].yearValue5

      this.budgetList[8].yearValue1 = 0.00
      this.budgetList[8].yearValue2 = 0.00
      this.budgetList[8].yearValue3 = 0.00
      this.budgetList[8].yearValue4 = 0.00
      this.budgetList[8].yearValue5 = 0.00
      for (let i = 9; i < this.budgetList.length; i++) {
        this.budgetList[8].yearValue1 += this.budgetList[i].yearValue1
        this.budgetList[8].yearValue2 += this.budgetList[i].yearValue2
        this.budgetList[8].yearValue3 += this.budgetList[i].yearValue3
        this.budgetList[8].yearValue4 += this.budgetList[i].yearValue4
        this.budgetList[8].yearValue5 += this.budgetList[i].yearValue5
      }
      this.budgetList[8].amountFee = this.budgetList[8].yearValue1 + this.budgetList[8].yearValue2 + this.budgetList[8].yearValue3 + this.budgetList[8].yearValue4 + this.budgetList[8].yearValue5
    },
    addBudgetArray () {
      const newItem = { 
        ...Budget,
        showIndex: this.budgetList.length + 1
      }
      this.budgetList.push(newItem)
    },
    deleteBudgetArray (item) {
      let index = this.budgetList.indexOf(item)
      if (index !== -1) {
        this.budgetList.splice(index, 1)
      }
    },
    getTotalFee() {
      return parseFloat(this.totalFee);
    }
  },
  watch: {
    budgetList: {
      handler(budgetList) {
        this.calTotalFee()
      }
    }
  }
}
</script>