<template>
    <div class="mx-auto max-w-xl">
        <div class="">
            <RouterView />
        </div>
        <div
            class="fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600">
            <div class="grid h-full max-w-xl grid-cols-5 mx-auto font-medium">
                <button type="button" v-for="item in bottomNavList" :key="item.name" @click="handleClick(item.path)"
                    class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
                    <SvgIcon :name="item.path === activePath ? item.activeIcon : item.inactiveIcon" class="w-7 h-7"/>
                    <span :class="item.path == activePath ? 'text-[#F96825] ' : 'text-[#1C274C]'"
                        class="font-medium text-ss">{{
                            item.name }}</span>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import SvgIcon from '@/components/SvgIcon.vue'
import { useI18n } from 'vue-i18n';
import {getH5Pages} from '@/api/pages'

const { t } = useI18n()

const route = useRoute();


const router = useRouter()
const activePath = ref('/home')
const bottomNavList = [
    {
        name: t('main.home'),
        activeIcon: 'home_selected',
        inactiveIcon: 'home_unselected',
        path: '/home'
    },
    {
        name: t('main.order'),
        activeIcon: 'order_selected',
        inactiveIcon: 'order_unselected',
        path: '/order'
    },
    {
        name: t('main.start'),
        activeIcon: 'start_selected',
        inactiveIcon: 'start_unselected',
        path: '/start'
    },
    {
        name: t('main.service'),
        activeIcon: 'service_selected',
        inactiveIcon: 'service_unselected',
        path: '/service'
    },
    {  name: t('main.profile'),  activeIcon: 'profile_selected',    inactiveIcon: 'profile_unselected',    path: '/profile'
    }]
const handleClick = (path: string) => {
    activePath.value = path
    router.push(path)
}
// 监听路由变化
watch(route, (newRoute) => {
    activePath.value = newRoute.path;
});

const getH5PagesList = async () => {
    const res = await getH5Pages()
    console.log(res)
}

// 挂载时
onMounted(() => {
    activePath.value = route.path;
})

</script>