<template>
    <div class="index">
        <router-view v-slot="{ Component }">
            <keep-alive :include="keeps.value">
                <component :is="Component" class="container barTop" />
            </keep-alive>
        </router-view>
        <van-tabbar
            :style="{ backgroundColor: tabColor }"
            v-model="active"
            z-index="20"
            safe-area-inset-bottom
            route
            ref="tabbar"
        >
            <van-tabbar-item replace v-for="item in menus" :name="item.name" :to="`/${item.name}`" :key="item.name">
                <span>{{ item.title }}</span>
                <template #icon="props">
                    <img :src="props.active ? item.preIcon : item.icon" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const menus = [
            {
                name: 'home',
                title: '首页',
                icon: require('@assets/tabbar_icon_01.png'),
                preIcon: require('@assets/tabbar_icon_01_pre.png')
            },
            {
                name: 'discover',
                title: '发现',
                icon: require('@assets/tabbar_icon_02.png'),
                preIcon: require('@assets/tabbar_icon_02_pre.png')
            },
            {
                name: 'store',
                title: '藏品室',
                icon: require('@assets/tabbar_icon_03.png'),
                preIcon: require('@assets/tabbar_icon_03_pre.png')
            },
            {
                name: 'mine',
                title: '我的',
                icon: require('@assets/tabbar_icon_04.png'),
                preIcon: require('@assets/tabbar_icon_04_pre.png')
            }
        ];
        const active = ref('home');
        return { active, menus };
    },
    inject: ['keeps'],
    name: 'index',
    data() {
        return {
            menu: null,
            tabColor: ''
        };
    }
};
</script>

<style lang="less" scoped>
.container {
    box-sizing: border-box;
    flex-grow: 1;
}

.index {
    background-color: @bg3;
    .flex-col();
    padding-top: 0 !important;
}

/deep/.van-hairline--top-bottom {
    &::after {
        border: 1px solid @bg3;
    }
    &.bgBack {
        background-color: #181818;
        &::after {
            border: 1px solid #181818;
        }
    }
}
</style>
