<template>
    <div>
        <!-- 占位导航栏div，防止导航栏挡住内容 -->
        <van-tabbar v-model="active" @change="onChange" route>
            <van-tabbar-item
                v-for="(item, index) in tabBarList"
                :key="index"
                :icon="active == item.name ? item.imgUrlActive : item.imgUrl"
                >{{ item.text }}</van-tabbar-item
            >
        </van-tabbar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 1,
            tabBarList: [
                {
                    key: "1",
                    name: "0",
                    imgUrl: require("@/assets/tabBar/new.png"),
                    imgUrlActive: require("@/assets/tabBar/new-active.png"),
                    path: "/message-center",
                    text: "消息中心",
                },
                {
                    key: "2",
                    name: "1",
                    imgUrl: require("@/assets/tabBar/workbench.png"),
                    imgUrlActive: require("@/assets/tabBar/workbench-active.png"),
                    path: "/save-workbench",
                    text: "安全工作台",
                },
                {
                    key: "3",
                    name: "2",
                    imgUrl: require("@/assets/tabBar/my.png"),
                    imgUrlActive: require("@/assets/tabBar/my-active.png"),
                    path: "/my",
                    text: "我的地盘",
                },
            ],
        };
    },
    methods: {
        onChange(index) {
            if (this.active == index) {
                this.tabBarList.forEach((item) => {
                    if (item.name == this.active) {
                        this.$router.push(item.path);
                    }
                });
            }
        },
    },
};
</script>