<template>
  <div>
      <!-- 占位导航栏div，防止导航栏挡住内容 -->
    <div style="width:100%;height:2rem"></div>
    <van-tabbar v-model="active" @change="onChange">
      <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 {
  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
  },
  methods: {
    onChange(index) {
      this.active = index;
      if(this.active==index){
            this.tabBarList.forEach((item)=>{
                if(item.name==this.active){
                    this.$router.push(item.path)
                }
            })
      }else{
      }
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>
