<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="4" class="bg-gray">
        <div class="special-middle">
          <div class="required">第一年</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div class="required">第二年</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div class="required">第三年</div>
        </div>
      </a-col>
      <a-col :span="4" 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>操作</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" v-if="item.isRequired">{{ item.budgetName }}</div>
        <div class="special-middle" v-else>
          <a-form-model-item :prop="'budgetList.' + index + '.budgetName'" :rules="{ required: true, message: '*', trigger: 'blur',}">
            <a-input v-model="item.budgetName" :maxLength="50" style="width:85%" />
          </a-form-model-item>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="special-middle">
          <a-form-model-item v-if="!invisibleYearValue1.includes(index)" :prop="'budgetList.' + index + '.yearValue1'" :rules="{required: true, message: '*', trigger: 'blur',}">
            <a-input-number v-model="item.yearValue1" @change="YearValue1Change(index)" :min="0" :step="0.01" style="width: 80%" />
          </a-form-model-item>
          <div v-else>{{parseFloat(item.yearValue1).toFixed(2)}}</div>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="special-middle">
          <a-form-model-item v-if="!invisibleYearValue2.includes(index)" :prop="'budgetList.' + index + '.yearValue2'" :rules="{required: true, message: '*', trigger: 'blur',}">
            <a-input-number v-model="item.yearValue2" @change="YearValue2Change(index)" :min="0" :step="0.01" style="width: 80%" />
          </a-form-model-item>
          <div v-else>{{parseFloat(item.yearValue2).toFixed(2)}}</div>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="special-middle">
          <a-form-model-item v-if="!invisibleYearValue3.includes(index)" :prop="'budgetList.' + index + '.yearValue3'" :rules="{required: true, message: '*', trigger: 'blur',}">
            <a-input-number v-model="item.yearValue3" @change="YearValue3Change(index)" :min="0" :step="0.01" style="width: 80%" />
          </a-form-model-item>
          <div v-else>{{parseFloat(item.yearValue3).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-col :span="3">
        <div class="special-middle" v-if="!item.isRequired">
          <a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="deleteBudgetArray(item)">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </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="4" class="bg-gray">
        <div class="special-middle">
          <div>{{ parseFloat(totalYearValue1).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>{{ parseFloat(totalYearValue2).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="4" class="bg-gray">
        <div class="special-middle">
          <div>{{ parseFloat(totalYearValue3).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-col :span="3" class="bg-gray">
        <div class="special-middle">
          <div></div>
        </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="addBudgetArray()">
            <a-icon type="plus" /> 添加 <span style="color:red;margin-left:10px"></span>
          </a-button>
        </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: "budgetThreeEdit",
  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.totalFee = this.totalYearValue1 + this.totalYearValue2 + this.totalYearValue3
    },
    //一、国内外进修费用
    educationFee () {
      this.budgetList[0].amountFee = this.budgetList[0].yearValue1 + this.budgetList[0].yearValue2 + this.budgetList[0].yearValue3
    },
    //二、学术交流费用
    scienceFee () {
      this.budgetList[1].amountFee = this.budgetList[1].yearValue1 + this.budgetList[1].yearValue2 + this.budgetList[1].yearValue3
    },
    //三、研究费用
    researchFee (index) {
      this.budgetList[index].amountFee = this.budgetList[index].yearValue1 + this.budgetList[index].yearValue2 + this.budgetList[index].yearValue3

      this.budgetList[2].yearValue1 = 0.00
      this.budgetList[2].yearValue2 = 0.00
      this.budgetList[2].yearValue3 = 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].amountFee = this.budgetList[2].yearValue1 + this.budgetList[2].yearValue2 + this.budgetList[2].yearValue3
    },
    //四、其他费用
    otherFee (index) {
      this.budgetList[index].amountFee = this.budgetList[index].yearValue1 + this.budgetList[index].yearValue2 + this.budgetList[index].yearValue3

      this.budgetList[8].yearValue1 = 0.00
      this.budgetList[8].yearValue2 = 0.00
      this.budgetList[8].yearValue3 = 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].amountFee = this.budgetList[8].yearValue1 + this.budgetList[8].yearValue2 + this.budgetList[8].yearValue3
    },
    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);
    }
  }
}
</script>

