<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.push(route)
}
</script>

<template>
    <div class="h-screen flex flex-col bg-gray-50">
        <div class="flex-1 overflow-hidden">
            <router-view v-slot="{ Component }">
                <keep-alive>
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>

        <nav class="flex-none bg-white border-t border-gray-200">
            <div class="flex justify-around items-center h-14">
                <div v-for="(tab, index) in tabs" :key="index"
                    class="flex flex-col items-center justify-center w-full h-full py-1 focus:outline-none" :class="[
                        activeTab === index
                            ? 'text-blue-600'
                            : 'text-gray-600 hover:text-blue-600 active:text-blue-700'
                    ]" @click="switchTab(index, tab.route)">
                    <component :is="tab.icon" class="w-6 h-6" />
                    <span class="mt-1 text-xs">{{ tab.label }}</span>
                </div>
            </div>
        </nav>
    </div>
</template>

<style scoped>
/* Remove all existing styles */
</style>
