<template>
  <div v-if="data.info.list && data.info.list.length">
    <div class="w-full overflow-x-scroll">
      <table class="text-gray-500 mt-4 text-ms">
          <tr class="bg-gray-100">
            <td width="15%">申请人</td>
            <td width="16%">金额(元)</td>
            <td width="30%">时间</td>
            <td width="20%">操作</td>
          </tr>
          <tr v-for="item in data.info.list">
            <td>{{item.submitName}}</td>
            <td>{{item.money}}</td>
            <td>{{dayjs(item.submitTime - 0).format('YYYY-MM-DD')}}</td>
            <td>
              <div v-if="!item.applyType" class="flex flex-row justify-between">
              <!-- <van-popover v-model:show="showPopover">
                <div>侧司法所</div>
                <template #reference>
                  <van-button type="success" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 1)">通过</van-button>
                  <van-button type="danger" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 1)">驳回</van-button>
                </template>
              </van-popover> -->
                <van-button type="success" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 1)">通过</van-button>
                <van-button type="danger" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 1)">驳回</van-button>
              </div>
              <div class="text-center" v-else :class="item.applyType === 1 ? 'text-blue-500' : 'text-red-500'">{{ item.applyType === 1 ? '已完成' : '已驳回' }}</div>
            </td>
          </tr>
      </table>
    </div>
    <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="暂无数据" />
</template>

<script setup>
import dayjs from "dayjs";
import {ref, reactive, onMounted, nextTick} from'vue';
import { queryNeedCheckByMe, audit } from 'apis/finance';
import { Toast } from 'vant';

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

const taskId = useTaskId()

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

onMounted(() => {
  nextTick(() => {
    handleFinanceOfProject()
  })
})

// 填写备注
function showRemark(financeCheckId, checkStatus){
  data.showPopover = true
}

/**
 * 审批
 * @param { Number } checkStatus 审核状态 1已通过 2驳回
 * @param { String } financeCheckId 审核id
 * @param { String } remark 备注
 */
async function handleAudit(financeCheckId, checkStatus){
  try {
    const params = {
      param:{
        financeCheckId,
        checkStatus,
        remark: ''
      }
    }
    // const res = await audit(params)
    Toast('审批成功');
    handleFinanceOfProject()
  } catch (error) {
    console.error('error: ', error);
  }
}
</script>

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

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

</style>
