<template>
    <div class="index">
        <router-view v-slot="{ Component }">
            <keep-alive :include="keeps">
                <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"
            class="bgBack"
        >
            <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>
export default {
    computed: {
        menus() {
            let menus = [
                {
                    name: 'home',
                    title: '赛事',
                    icon: require('@assets/tabbar_icon_01.png'),
                    preIcon: require('@assets/tabbar_icon_01_pre.png')
                },
                {
                    name: 'shop',
                    title: '商城',
                    icon: require('@assets/tabbar_icon_02.png'),
                    preIcon: require('@assets/tabbar_icon_02_pre.png')
                },
                {
                    name: 'mine',
                    title: '我的',
                    icon: require('@assets/tabbar_icon_04.png'),
                    preIcon: require('@assets/tabbar_icon_04_pre.png')
                }
            ];
            return menus;
        }
    },
    inject: ['keeps'],
    name: 'index',
    data() {
        return {
            menu: null,
            tabColor: '',
            active: 'home'
        };
    }
};
</script>

<style lang="less" scoped>
.container {
    box-sizing: border-box;
    flex-grow: 1;
    min-height: calc(var(--app-height) - 50px - var(--safe-bottom));
    padding-bottom: calc(50px + var(--safe-bottom));
}

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

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