<template>
  <div>
    <!-- 头部选项卡部分 -->
     <van-nav-bar
      title="财务条"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 搜索框与表格部分 -->
    <van-tabs v-model:active="active" shrink line-width="60px" color="#59B4FF" title-active-color="#59B4FF">
      <van-tab title="我的申请">
        <div class="financial-management">
          <span class="title">历史申请</span>
          <div v-if="isShow">
            <Search />
            <Table />
          </div>
          <div v-if="!isShow" class="no-data">
              暂无历史记录
          </div>

        </div>
        <!-- 底部提交按钮部分 -->
        <div class="foot">
          <NuxtLink to="/Initiate-application">
               <van-button type="primary" block>发起申请</van-button>
          </NuxtLink>
        </div>
      </van-tab>
    <van-tab title="我的奖金">我的奖金</van-tab>
  </van-tabs>
  </div>

</template>


<script setup>
import {ref} from 'vue'

const active = ref(0);
const isShow = ref(true);
const currentPage = ref(1)
const applyData = ref([
  {
    applicant:'代用名1',
    money:100,
    time:'2021/12/31 12:31',
    type: 1
  },
  {
    applicant:'代用名2',
    money:100,
    time:'2021/12/31 12:31',
    type: 2
  },
  {
    applicant:'代用名1',
    money:100,
    time:'2021/12/31 12:31',
    type: 3
  },
  {
    applicant:'代用名2',
    money:100,
    time:'2021/12/31 12:31',
    type: 3
  },
  {
    applicant:'代用名1',
    money:100,
    time:'2021/12/31 12:31',
    type: 1
  },
  {
    applicant:'代用名2',
    money:100,
    time:'2021/12/31 12:31',
    type: 2
  }
]);

function onClickLeft(){
  console.log('返回上一页')
}

</script>


<style lang="less" scoped>
.no-data{
  color: #A0A0A0;
  font-size: 18px;
  font-weight:600;
  text-align: center;
  padding: 2rem 0;
}
.apply-time{
  width:40%;
}
.foot{
  width:100%;
  padding:1rem 2rem;
  position:fixed;
  bottom: 0px;
}
.green{
  color: rgb(11, 194, 11);
}
.red{
  color: rgb(248, 56, 56);
}
</style>
