<template>
    <div class="h-98rem">
        <van-tabbar class="h-98rem" v-model="active" safe-area-inset-bottom>
            <van-tabbar-item @click="tab.onClick" v-for="(tab, index) in tabList" :key="index">

                <template #icon="props">
                    <div class="flex items-center flex-col">
                        <img class="w-60rem h-60rem object-contain"
                            :src="props.active ? tab.activeIcon : tab.icon" />
                        <span
                            :class="`${props.active ? 'text-primary' : 'text-[#010101]'} text-size-20rem`">{{$t(tab.title)}}</span>
                    </div>

                </template>
            </van-tabbar-item>

        </van-tabbar>

    </div>

</template>

<script>
export default {

    data() {
        return {
            currentPath: this.$route.path,
            tabList: [
                {
                    icon: '/imgs/tab-home.png',
                    activeIcon: '/imgs/tab-home-checked.png',

                    title: '首页',
                    onClick: () => { 
                        this.$router.push("/home")
                    }
                },
                {
                    icon: '/imgs/tab-publish.png',
                    activeIcon: '/imgs/tab-publish-checked.png',
                    title: '投稿',
                    onClick: () => { 
                        this.$router.push("/publish")
                    }
                },
                {
                    icon: '/imgs/tab-aboutus.png',
                    activeIcon: '/imgs/tab-aboutus-checked.png',
                    title:'关于我们',
                    onClick: () => { 
                        this.$router.push("/aboutus")
                    }
                },
                {
                    icon: '/imgs/tab-user.png',
                    activeIcon: '/imgs/tab-user-checked.png',
                    title: '我的',
                    onClick: () => { 
                        this.$router.push("/user")
                    }
                },
            ]
        }
    },
    watch: {
        $route: function (next) {

            this.currentPath = next.path;
        },
    },
    computed: {
        active: (vm) => {

            const routes = ['/home', '/publish', '/aboutus', '/user']
            return routes.findIndex(path => path === vm.currentPath)

        }
    }
}
</script>

