<template>
    <div class="index">
        <router-view v-slot="{ Component }">
            <keep-alive :include="keeps.value">
                <component class="com" :is="Component" />
            </keep-alive>
        </router-view>
        <van-tabbar
            v-model="active"
            z-index="20"
            safe-area-inset-bottom
            route
            active-color="#ffffff"
            inactive-color="#5F646F"
            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@3x (1).png'),
                preIcon: require('@assets/tabbar_icon_01@3x.png')
            },
            {
                name: 'discover',
                title: '发现',
                icon: require('@assets/tabbar_icon_02@3x.png'),
                preIcon: require('@assets/tabbar_icon_02@3x (1).png')
            },
            {
                name: 'store',
                title: '展览室',
                icon: require('@assets/tabbar_icon_03@3x.png'),
                preIcon: require('@assets/tabbar_icon_03@3x (1).png')
            },
            {
                name: 'mine',
                title: '我的',
                icon: require('@assets/tabbar_icon_04@3x (2).png'),
                preIcon: require('@assets/tabbar_icon_04@3x (1).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;
    background-color: @bg;
}
.com {
    // padding-top: 0 !important;
    padding-top: var(--safe-top)!important;
}
.van-tabbar {
    background: @bg;
}
/deep/ [class*='van-hairline']:after {
    border: none;
}
/deep/ .van-tabbar-item__icon img {
    width: 25px;
    height: 24px;
}
/deep/ .van-tabbar-item__text {
    font-size: 12px;
}
</style>
