<template>
  <div>
    <div v-if="data.info.taskFinanceList && data.info.taskFinanceList.list && data.info.taskFinanceList.list.length">
      <table class="w-full text-gray-500 mt-4 text-ms">
          <tr class="bg-gray-100">
            <td class="name">任务名称</td>
            <td class="">预算(元)</td>
            <td class="">奖金(元)</td>
          </tr>
          <tr v-for="item in data.info.taskFinanceList.list">
            <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" @change="handleUpdateFinance(item)" @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" @change="handleUpdateFinance(item)" @blur="item.showBonusEdit = false" />
            </td>
          </tr>
          <tr>
            <td>合计</td>
            <td>{{data.info.budget || 0}}</td>
            <td>{{data.info.bonus || 0}}</td>
          </tr>
      </table>
      <div class="w-1/2 mt-4 ml-48">
          <van-pagination v-model="data.pageNum" :items-per-page="data.pageSize" :page-count="data.pages" mode="simple" />
      </div>
    </div>
    <van-empty v-else description="暂无数据" />
  </div>
</template>

<script setup>
import { queryProjectFinance, updateFinance } from 'apis/projectFinance'
import {ref, reactive, onMounted, nextTick} from'vue'

const data = reactive({
  info: {},
  pageNum: 1,
  pageSize: 10,
  pages: 0
})

const projectId = useProjectId()

/**
 * 查看项目下的所有任务对应的财务信息
 * @param { Number } pageNum
 * @param { Number } pageSize
 * @param { String } projectId
 * @param { String } name
 */
async function handleProjectFinance(){
  try {
    const params = {
      param:{
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        projectId: projectId.value
      }
    }
    const res = await queryProjectFinance(params)
    data.info = res
    data.pageNum = res.taskFinanceList && res.taskFinanceList.pageNum ? +res.taskFinanceList.pageNum : 1
    data.pageSize = res.taskFinanceList && res.taskFinanceList.pageSize ? +res.taskFinanceList.pageSize : 10
    data.pages = res.taskFinanceList && res.taskFinanceList.pages ? +res.taskFinanceList.pages : 0
  } catch (error) {
    console.error('error: ', error);
  }
}

/**
 * 修改任务或项目的预算和奖金信息
 * @param { Number } bonus 奖金
 * @param { Number } budget 预算
 * @param { String } taskDetailId 任务详情id
 * @param { String } taskFinanceId 任务财务信息id
 */
async function handleUpdateFinance(item){
  try {
    const params = {
      param:{
        bonus: item.bonus,
        budget: item.budget,
        taskDetailId: item.taskDetailId,
        taskFinanceId: item.taskFinanceId,
      }
    }
    const res = await updateFinance(params)
    handleProjectFinance()
  } catch (error) {
    console.error('error: ', error);
  }
}

onMounted(() => {
  nextTick(() => {
    handleProjectFinance()
  })
})
</script>

<style scoped lang="less">
table {
    td {
      border: 0.5px solid #ccc;
      padding: 0.85rem;
      width: 5.9375rem;
    }
    .name{
      width:50%
    }
  }

.input-box{
  padding: 0!important;
  border-bottom: 1px solid #ccc
}
</style>
