<template>
  <div class="bottom-tab-bar">
    <tabbar v-model="activeIndex">
      <tabbar-item
       :link="{ path: item.path, replace: true }"
        v-for="(item,index) in menuList"
        :key="`tab_${index}`"
      >
        <i class="iconfont" slot="icon" v-html="item.icon"></i>
        <span slot="label">{{ item.label }}</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
    name: 'TabBar',
    props: {
        menus: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    components: {
        Tabbar,
        TabbarItem
    },
    data () {
        return {
            activeIndex: 0
        }
    },
    computed: {
        menuList () {
            return this.menus.filter(item => { return item.permission === undefined || item.permission })
        }
    },
    watch: {
        $route (to, from) {
            this.activeIndex = this.menuList.findIndex(item => item.belongTo === to.meta.belongTo)
        }
    },
    filters: {},
    created  () {
        this.activeIndex = this.menuList.findIndex(item => item.belongTo === this.$route.meta.belongTo)
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
.bottom-tab-bar {
  height: 1.08rem;
  /deep/.weui-tabbar {
    .weui-tabbar__icon {
        .iconfont {
          font-size: 24px;
        }
    }
    .weui-tabbar__label {
      margin-bottom: 0;
    }
  }
}
</style>
