<template>
  <van-tabbar v-model="active" @change="changeTabbar" active-color="#3296fa" inactive-color="#333">
    <van-tabbar-item v-for="(item,index) in tabbars" :key="index" :to="(item.path)">
      <div class="van-tabbar-item__icon">
        <i class="awsui-iconfont" v-html="item.icon"></i>
      </div>
      <div class="van-tabbar-item__text">{{item.title}}</div>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
  export default {
    name: 'tabbar',
    data () {
      return {
        active: 0,
        tabbars: [
          {
            path: '/',
            name: 'knwlhome',
            title: '首页',
            icon: '&#xe862;'
          },
          {
            path: '/knwldir',
            name: 'knwldir',
            title: '目录',
            icon: '&#59223;'
          },
          {
            path: '/myknwl',
            name: 'myknwl',
            title: '我的',
            icon: '&#58939;'
          }
        ]
      }
    },
    methods: {
		changeTabbar(){
			localStorage.setItem("activeTab",'');
		}
	},
    created () {
      if (this.$route.name === 'knwlhome') {
        this.active = 0
      } else if (this.$route.name === 'knwldir') {
        this.active = 1
      } else if (this.$route.name === 'myknwl') {
        this.active = 2
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .van-tabbar-item {
    text-align: center;
    color: #333333;
    font-size: 13px;
  }

  .van-tabbar-item__icon {
    margin-top: -3px;
  }

  .van-tabbar--fixed {
    border-top: 0.33px solid #e9e9e9;
  }
</style>
