<script setup>
import {getStaticImg} from '@/hooks/common.js'
import { useRouter } from 'vue-router'
import {getCurrentInstance, computed} from 'vue'
const { appContext : { config: { globalProperties } } } = getCurrentInstance();

const router=useRouter()

const tabbarList = computed(() => {
    return [
        {
            name:"home",
            icon:getStaticImg('tabbar/home.png'),
            iconActive:getStaticImg('tabbar/home-s.png'),
            text: globalProperties.$t('tabbar.home'),
            path:"/tabbar/home"
        },
        {
            name:"user",
            icon:getStaticImg('tabbar/user.png'),
            iconActive:getStaticImg('tabbar/user-s.png'),
            text:globalProperties.$t('tabbar.my'),
            path:"/tabbar/user"
        }
    ]
})

function goPage(item){
    router.replace(item.path)
}

</script>

<template>
    <div class="tabbar-page">
        <router-view></router-view>
        <div class="tabbar-box">
            <div 
                :class="['tabbar-item',$route.path==item.path?'tabbar-item_active':'']"
                v-for="item in tabbarList"
                :key="item.name"
                @click="goPage(item)"
            >   
                <div class="tabbar-item-con">
                    <img class="icon" :src="$route.path==item.path?item.iconActive:item.icon" />
                    <div class="text">{{item.text}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.tabbar-box{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: #FFFFFF;
    box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.08);
    height: 112px;
    display: flex;
    align-items: center;
    .tabbar-item{
        flex: 1;
        padding: 16px;
        height: 100%;
        position: relative;
        &::after{
            content: '';
            width: 1px;
            height: calc(100% - 32px);
            background-color: $border-color;
            position: absolute;
            top: 16px;
            right: 0;
        }
        .tabbar-item-con{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            .icon{
                width: 48px;
                height: 48px;
            }
            .text{
                font-size: 20px;
                margin-top: 5px;
            }
        }
        &:last-child::after{
            display: none;
        }
    }
    .tabbar-item_active{
        .tabbar-item-con{
            background-color: #F2F3FF;
            border-radius: 112px;
            // .text{
            //     color: $theme-color;
            // }
        }
    }
}
@media screen and (min-width:$media-width){
    .tabbar-box{
        display: none;
    }
}
</style>