<template>
  <div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item
        v-for="(item,index) in tabBarList"
        :key="item.key"
        :icon="active == index?item.imgUrlActive: item.imgUrl"
        :to="item.path"
        >{{ item.text }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {
  props:{
      index: {
      type: Number,
      default: 0
    },
  },
  
  data() {
    return {
      active: "0",
      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: "我的地盘"
        }
      ]
    };
  },
  mounted() {
    this.active = this.index
    this.tabBarList.forEach((item)=>{
        if(item.name==this.active){
            this.$router.push(item.path)
        }
    })
  },
  methods: {
    onChange(index) {
      this.active = index;
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
