<template>
  <div>
    <div class="w-full overflow-x-scroll">
      <table>
          <tr class="table-header">
            <td width="15%">申请人</td>
            <td width="15%">金额(元)</td>
            <td width="30%">时间</td>
            <td width="20%">操作</td>
          </tr>
          <tr v-for="item in arrayData">
            <td>{{item.submitName}}</td>
            <td>{{item.money}}</td>
            <td>{{dayjs(item.submitTime - 0).format('YYYY-MM-DD hh:mm')}}</td>
            <td>
              <div v-if="item.applyType === 0" class="flex flex-row justify-between">
                <van-button type="success" size="mini" class="rounded">通过</van-button>
                <van-button type="danger" size="mini" class="rounded">驳回</van-button>
              </div>
              <div class="text-center" v-else :class="item.applyType === 1 ? 'text-gray-500' : 'text-red-500'">{{ item.applyType === 1 ? '已完成' : '已驳回' }}</div>
            </td>
          </tr>
      </table>
    </div>
    <div class="pagination">
        <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
    </div>
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import {ref, reactive} from'vue';

const arrayData = ref([
  {
    applyId: '001',
    submitName:'代用名',
    money:0,
    submitTime: '1643018415000',
    applyType: 0,
  },
   {
    applyId: '001',
    submitName:'代用名',
    money:0,
    submitTime: '1643018415000',
    applyType: 1,
  },
   {
    applyId: '001',
    submitName:'代用名',
    money:0,
    submitTime: '1643018415000',
    applyType: 0,
  },
   {
    applyId: '001',
    submitName:'代用名',
    money:0,
    submitTime: '1643018415000',
    applyType: 0,
  },
  {
    applyId: '001',
    submitName:'代用名',
    money:1000,
    submitTime: '1643018415000',
    applyType: 2,
  },
   {
    applyId: '001',
    submitName:'代用名',
    money:0,
    submitTime: '1643018415000',
    applyType: 0,
  },
   {
    applyId: '001',
    submitName:'代用名',
    money:0,
    submitTime: '1643018415000',
    applyType: 0,
  },
   {
    applyId: '001',
    submitName:'代用名',
    money:0,
    submitTime: '1643018415000',
    applyType: 0,
  }
]);
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);
const data = reactive({

})
</script>

<style scoped lang="less">
table {
    width: 120%;
    margin-top: 1rem;
    font-size: 14px;
    overflow-x: scroll;
    color:#797878 ;
    td {
      border: 0.5px solid #ccc;
      padding: 0.85rem;
      // width: 5.9375rem;
    }
    .table-header{
      background-color: #F2F2F2;
      color: #A0A0A0;
    }
  }
  .pagination{
    width:50%;
    margin-left: 50%;
    margin-top:1rem
  }

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

</style>
