<template>
  <div>
    <!-- 搜索框与表格部分 -->
    <van-tabs
      v-model:active="active"
      shrink
      line-width="60px"
      color="#59B4FF"
      title-active-color="#59B4FF"
    >
      <van-tab title="我的申请">
        <div class=" bg-white px-4">
          <div class="mt-4 flex flex-col overflow-hidden h-full">
            <div class="py-4 pb-0 text-gray-500 font-semibold">历史申请</div>
            <Search />
            <HistoricalApplication  />
          </div>
          <!-- 底部提交按钮部分 -->
          <div class="fixed w-11/12 box-border bottom-10 " @click="toApplication">
            <van-button type="primary" block size="small">发起申请</van-button>
          </div>
        </div>

      </van-tab>

      <van-tab title="我的奖金">
        <div class="mt-4 bg-white">
          <div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
          <Search class="px-4 pt-0" />
          <BonusCollection class="px-4 mt-0" />
        </div>
        <div class="mt-4 bg-white">
          <div class="text-gray-500 font-semibold m-4 py-3 border-b">
            待领取奖金
          </div>
          <div class="text-ms text-gray-400 pl-4">可领取:</div>
          <div
            class="w-full h-20 text-gray-400 font-semibold text-center leading-loose"
            v-if="!isBonus"
          >
            暂无可领取的奖金
          </div>
          <div
            class="w-full h-20 text-blue-500 font-semibold text-center leading-loose text-2xl"
            v-if="isBonus"
          >
            500元
          </div>
          <div class="px-8">
            <van-button type="primary" size="small" block :disabled="!isBonus"
              >立即领取</van-button
            >
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const active = ref(0);
const isBonus = ref(true);

function toApplication() {
  const routeValue = router.currentRoute.value;
  const query = routeValue.query;
  router.push({ path: '/Initiate-application', query });
}
</script>

<style lang="less" scoped></style>
