<template>
  <div>
    <div class="w-full overflow-x-scroll">
      <table class="text-gray-500 mt-4 text-xs">
          <tr class="bg-gray-100">
            <td width="15%">申请人</td>
            <td width="16%">金额(元)</td>
            <td width="20%">时间</td>
            <td width="10%">操作</td>
          </tr>
          <tr v-for="item in arrayData" @click="viewDetails">
            <td>{{item.submitName}}</td>
            <td>{{item.money}}</td>
            <td>{{dayjs(item.submitTime - 0).format('YYYY-MM-DD')}}</td>
            <td>
              <div v-if="item.applyType === 0" class="flex flex-row justify-around">
                <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="w-1/2 mt-4 ml-48">
        <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
    </div>
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import {ref} from'vue';
const props = defineProps({ routeUrl : { type: Object, default: () => {} } });
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 currentPage = ref(1);

function viewDetails(){
  console.log(props.routeUrl)
}
</script>

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

</style>
