<template>
    <div class="index">
        <router-view v-slot="{ Component }">
            <component :is="Component" class="container barTop" />
        </router-view>

        <van-tabbar v-model="active" route>
            <van-tabbar-item name="home" to="/home">
                <span>{{ $t('tab.home') }}</span>
                <template #icon="props">
                    <img :src="props.active ? homeImgPre : homeImg" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item name="watching" to="/watching">
                <span>{{ $t('tab.watching') }}</span>
                <template #icon="props">
                    <img :src="props.active ? videoImgPre : videoImg" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item name="mine" to="/mine">
                <span>{{ $t('tab.mine') }}</span>
                <template #icon="props">
                    <img :src="props.active ? mineImgPre : mineImg" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import homeImg from '@/assets/tabbar_icon_01.png'
import homeImgPre from '@/assets/tabbar_icon_01_pre.png'
import videoImg from '@/assets/tabbar_icon_02.png'
import videoImgPre from '@/assets/tabbar_icon_02_pre.png'
import mineImg from '@/assets/tabbar_icon_03.png'
import mineImgPre from '@/assets/tabbar_icon_03_pre.png'
import { useRoute } from 'vue-router'

const active = ref('home')

const route = useRoute()
active.value = route.name
</script>

<style lang="less" scoped>
.index {
    --van-tabbar-background: #11131e;
    --van-tabbar-item-active-background: #11131e;
    --van-tabbar-item-text-color: #61657a;
    --van-tabbar-item-active-color: #fff;
    --van-border-width: 0;
    --van-tabbar-item-font-size: 10px;
    --van-tabbar-item-icon-margin-bottom: 0;
    padding-bottom: 50px;
    /deep/.van-tabbar-item__icon {
        img {
            height: 28px;
        }
    }
}
</style>
