<template>
  <div>
    <div
      v-if="data.info.list && data.info.list.length"
      class="w-full overflow-x-scroll"
    >
      <table class="text-gray-500 mt-4 text-ms">
        <tr class="bg-gray-100 text-gray-400">
          <td class="name">申请人</td>
          <td class="money">金额(元)</td>
          <td class="time">时间</td>
          <td class="remark">备注</td>
        </tr>
        <tr v-for="item in data.info.list" class="text-gray-500">
          <td>{{ item.submitName }}</td>
          <td>
            {{ (+item.money / 100).toFixed(2) }}
          </td>
          <td>
            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD') }}
          </td>
          <td>
            {{ item.remark }}
          </td>
        </tr>
      </table>
      <div class="w-1/2 mt-4 ml-48">
        <el-pagination
          v-model="data.pageNum"
          :items-per-page="data.pageSize"
          :page-count="data.pages"
          mode="simple"
        />
      </div>
    </div>
    <el-empty v-else description="暂无数据" />
  </div>
</template>

<script setup>
import dayjs from 'dayjs';
import { personalHistory } from 'apis/finance';
import { ref, reactive, onMounted, nextTick } from 'vue';

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

const projectId = useProjectId();
const taskDetailId = useTaskId();
const taskName = useTaskName();

/**
 * 查看当前用户的费用申请历史信息（奖金）
 * @param { Number } pageNum
 * @param { Number } pageSize
 * @param { String } projectId
 * @param { String } name
 */
async function handlePersonalHistory() {
  try {
    const params = {
      param: {
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        projectId: projectId.value,
        taskDetailId: taskDetailId.value,
        taskName: taskName.value,
        type: 1,
      },
    };
    const res = await personalHistory(params);
    data.info = res;
    data.pageNum = res.pageNum ? +res.pageNum : 1;
    data.pageSize = res.pageSize ? +res.pageSize : 10;
    data.pages = res.pages ? +res.pages : 0;
  } catch (error) {
    console.error('error: ', error);
  }
}

function confirm() {
  alert('确认放款');
}

onMounted(() => {
  nextTick(() => {
    handlePersonalHistory();
  });
});
</script>

<style scoped lang="less">
table {
  width: 500px;
  td {
    border: 0.5px solid #ccc;
    padding: 0.85rem;
    width: 5.9375rem;
  }
  .name {
    width: 100px;
  }
  .money {
    width: 100px;
  }
  .time {
    width: 170px;
  }
  .remark {
    width: 120px;
  }
}

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