<!-- tabbar -->
<template name="tabBar">
  <view class="tabbar">
    <view class="content">
      <view class="tabbar-warp"  v-for="(item, index) in roleList" :key="index" @tap="switchTab(index, item.code)">
        <view class="navigator" :class="currentIndex === index ? 'active' : ''">
          <view class="icon">
            <view :class="item.code" class="iconbgc"></view>
          </view>
          <view class="text">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: 'tabbar',
  components: {},
  props:{
    currentIndex:{
      type:Number,
      default: 0
    },
    role:{
      type:Array,
      role:[]
    }
  },
  data () {
    //这里存放数据
    return {
      roleList:[]
      // role: [
      //   { name: '首页管理', code: 'index' },
      //   { name: '订单管理', code: 'order' },
      //   { name: '商品管理', code: 'shop' }
      // ]
    };
  },
  onReady () {
    // this.roleList = this.$mStore.getters.hasrole.reverse()
    let role = uni.getStorageSync('role')
    this.roleList = role.reverse()
  },
  onLoad () {},
  //方法集合
  methods: {
    switchTab (index, url) {
      this.$emit('iscurrentIndex',index)
      this.$mRouter.switchTab({ route: `/pages/${url}/${url}` })
    }
  }
}
</script>
<style lang='scss' scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 110upx;
  align-items: center;
  background-color: #fff;
  border-top: 1upx solid rgba(0, 0, 0, 0.33);
  z-index: 99;
  .content {
    display: flex;
    align-items: center;
    height: 100%;
    .tabbar-warp {
      width: 33%;
      .navigator {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .icon {
          .iconbgc {
            width: 48upx;
            height: 48upx;
          }
          .index {
            background: url('../../static/images/index.png') no-repeat center
              center;
            background-size: contain;
          }
          .order {
            background: url('../../static/images/order.png') no-repeat center
              center;
            background-size: contain;
          }
          .goods {
            background: url('../../static/images/shop.png') no-repeat center
              center;
            background-size: contain;
          }
        }
        .text {
          margin-top: 3upx;
          font-size: 20upx;
          color: rgb(183, 183, 183);
        }
      }
     
      .active {
        .icon {
          .index {
            background: url('../../static/images/index_active.png') no-repeat center center;
            background-size: contain;
          }
          .order {
            background: url('../../static/images/order_active.png') no-repeat center center;
            background-size: contain;
          }
          .goods {
            background: url('../../static/images/shop_active.png') no-repeat center center;
            background-size: contain;
          }
        }
        .text {
          color: #7d66f3;
        }
      }
    }
  }
}
</style>