<template>
  <div>
    <table class="w-full text-gray-500 mt-4 text-xs">
        <tr class="bg-gray-100">
          <td class="40">任务名称</td>
          <td class="25">预算(元)</td>
          <td class="25">奖金(元)</td>
        </tr>
        <tr v-for="item in arrayData" @click="dataDetails">
          <td>{{item.name}}</td>
          <td>
            <div v-if="!item.showBudgetEdit" @click="item.showBudgetEdit = true">{{item.budget}}</div>
            <van-field v-else v-model="item.budget" type="number" class="input-box" @blur="item.showBudgetEdit = false" />
          </td>
          <td>
            <div v-if="!item.showBonusEdit" @click="item.showBonusEdit = true">{{item.bonus}}</div>
            <van-field v-else v-model="item.bonus" type="number" class="input-box" @blur="item.showBonusEdit = false" />
          </td>
        </tr>
        <tr>
          <td>合计</td>
          <td>{{sumBudget}}</td>
          <td>{{sumBonus}}</td>
        </tr>
    </table>
    <div class="w-1/2 mt-4 ml-48">
        <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
    </div>
  </div>
</template>

<script setup>
import {ref} from'vue'
const arrayData = ref([
  {
    name:'财务条插件界面设计',
    budget:1000,
    bonus:0,
    showBudgetEdit: false,
    showBonusEdit: false,
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:0,
    showBudgetEdit: false,
    showBonusEdit: false,
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:0,
    showBudgetEdit: false,
    showBonusEdit: false,
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:200,
    showBudgetEdit: false,
    showBonusEdit: false,
  },
  {
    name:'财务条插件界面设计',
    budget:1000,
    bonus:0,
    showBudgetEdit: false,
    showBonusEdit: false,
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:0,
    showBudgetEdit: false,
    showBonusEdit: false,
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:0,
    showBudgetEdit: false,
    showBonusEdit: false,
  },
   {
    name:'财务条插件界面设计',
    budget:0,
    bonus:200,
    showBudgetEdit: false,
    showBonusEdit: false,
  }
]);
const sumBudget = arrayData.value.reduce((sum, e) => sum + e.budget, 0);
const sumBonus = arrayData.value.reduce((sum, e) => sum + e.bonus, 0);
const currentPage = ref(1);
</script>

<style scoped lang="less">
td{
    border: 0.5px solid #ccc;
    padding: 0.7rem;
}
.input-box{
  width:45px;
  padding: 0!important;
  border-bottom: 1px solid #ccc
}
</style>
