<template>
    <div class="index" :class="[`index-${theme}`]">
        <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
            ref="tabbar"
            :class="bgClass"
            @change="changeTab"
        >
            <van-tabbar-item replace v-for="item in menus" :name="`${item.name}`" :key="item.name">
                <span>{{ item.title }}</span>
                <template #icon="props">
                    <van-icon v-if="props.active" class-prefix="font_family" :name="item.preIcon" />
                    <img v-else style="height: 28px" :src="item.icon" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { computed, onMounted, ref, watch } from 'vue-demi';
import { useRoute } from 'vue-router';
import { mapState, useStore } from 'vuex';
export default {
    setup() {
        const store = useStore();
        const route = useRoute();
        const bgClass = ref('bgBack');
        const setClass = () => {
            if (store.state.theme === 'theme4' && route.name === 'home') {
                bgClass.value = '';
            } else {
                bgClass.value = 'bgBack';
            }
        };
        onMounted(() => {
            setClass();
        });
        watch(route, () => {
            setClass();
        });

        return {
            bgClass
        };
    },
    computed: {
        ...mapState(['theme']),
        menus() {
            let menus = [
                {
                    name: 'home',
                    title: '首页',
                    icon: require('@assets/tabbar_icon_01.png'),
                    preIcon: 'icon-tabbar_icon_01'
                },
                {
                    name: 'discover',
                    title: '发现',
                    icon: require('@assets/tabbar_icon_02.png'),
                    preIcon: 'icon-tabbar_icon_02'
                },
                {
                    name: 'store',
                    title: '藏品室',
                    icon: require('@assets/tabbar_icon_03.png'),
                    preIcon: 'icon-tabbar_icon_03'
                },
                {
                    name: 'mine',
                    title: '我的',
                    icon: require('@assets/tabbar_icon_04.png'),
                    preIcon: 'icon-tabbar_icon_04'
                }
            ];
            if (this.$store.state.hopeMarket) {
                menus = [
                    {
                        name: 'home',
                        title: '首页',
                        icon: require('@assets/tabbar_icon_01.png'),
                        preIcon: require('@assets/tabbar_icon_01_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')
                    }
                ];
            }
            return menus;
        },
        tabClass() {
            return this.$route.path === '/home' ? '' : 'bgBack';
        }
    },
    inject: ['keeps'],
    name: 'index',
    data() {
        return {
            tabColor: '',
            active: 'home'
        };
    },
    methods: {
        changeTab(active) {
            this.$router.push({
                name: active
            });
        }
    },
    watch: {
        $route() {
            this.active = this.$route.name;
        }
    },
    mounted() {
        this.active = this.$route.name;
    }
};
</script>

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

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

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

.index-theme4 {
    --van-tabbar-item-active-color: var(--primlight);
    .bgBack {
        --van-tabbar-item-active-color: var(--prim);
    }
}
</style>
