<script setup>
import { ref } from 'vue'
import { AiOutlineHome, AiOutlineShoppingCart, AiOutlineUser } from 'vue-icons-plus/ai'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeTab = ref(0)

const tabs = [
    { label: '列表', route: '/', icon: AiOutlineHome },
    { label: '已购买', route: '/purchased', icon: AiOutlineShoppingCart },
    { label: '我的', route: '/profile', icon: AiOutlineUser }
]

const switchTab = (index, route) => {
    activeTab.value = index
    router.replace(route)
}
</script>

<template>
    <div class="h-screen flex flex-col bg-gray-50">
        <div class="flex-1 overflow-hidden">
            <router-view v-slot="{ Component }">
                <transition name="fade" mode="out-in">
                    <component :is="Component" />
                </transition>
            </router-view>
        </div>

        <nav class="flex-none bg-white border-t border-gray-200 shadow-[0_-1px_3px_rgba(0,0,0,0.05)]">
            <div class="flex justify-around items-center h-14 max-w-[480px] mx-auto px-2">
                <div v-for="(tab, index) in tabs" :key="index"
                    class="flex flex-col items-center justify-center w-full h-full py-1 select-none" :class="[
                        activeTab === index
                            ? 'text-primary-600'
                            : 'text-gray-500 hover:text-primary-500 active:text-primary-700'
                    ]" @click="switchTab(index, tab.route)">
                    <component :is="tab.icon" class="w-6 h-6 transition-colors duration-200" />
                    <span class="mt-1 text-xs font-medium">{{ tab.label }}</span>
                </div>
            </div>
        </nav>
    </div>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>
