<template>
  <van-config-provider theme="light">
    <router-view v-slot="{ Component }">
      <keep-alive include="Home,MyRegistrations,MyReviews">
        <component :is="Component" />
      </keep-alive>
    </router-view>

    <van-tabbar v-model="active" route v-if="showTabBar">
      <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/registrations/my" icon="coupon-o">报名</van-tabbar-item>
      <van-tabbar-item replace to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </van-config-provider>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const active = ref(0);

const showTabBar = computed(() => {
  // Show tabbar only on top-level pages
  const tabs = ['/home', '/user', '/registrations/my'];
  return tabs.includes(route.path);
});
</script>

<style>
/* Global fix for Vant Toast/Dialog rendering */
.van-toast, .van-dialog, .van-notify, .van-image-preview {
  z-index: 9999 !important;
}

/* Force Toast visibility */
.van-toast {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important;
  .van-toast__text {
    color: #fff !important;
  }
  .van-icon {
     color: #fff !important;
  }
}
</style>
