<template>
  <div>
    <van-tabbar v-model="Active">
      <van-tabbar-item replace to="/dashboard/home">
        <template slot-scope="props">
          <div class="tabbar-item-icon">
            <van-icon v-if="!props.active" name="wap-home-o" />
            <van-icon v-if="props.active" name="wap-home" />
          </div>
          <div class="tabbar-item-text">
            首页
          </div>
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/dashboard/category">


        <template slot-scope="props">
          <div class="tabbar-item-icon">
            <van-icon v-if="!props.active" name="friends-o" />
            <van-icon v-if="props.active" name="friends" />
          </div>
          <div class="tabbar-item-text">
            客户管理
          </div>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {Button, Icon, Loading} from 'vant';

export default {
  name: "tabbar",
  props: {
    Active: Number
  },
  components: {
    VanIcon:Icon,
  },
  data() {
    return {
      // active: Number(sessionStorage.getItem('tabBarActiveIndex')) || 0,
    }
  },
}
</script>

<style scoped>
#dashboard {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  position: relative;
}

.van-tabbar{
  z-index: 99;
  position: fixed;
  padding-bottom: 12px;
}

.tabbar-item-icon{
  font-size: 24px;
  margin-bottom: 4px;
  text-align: center;
}

.van-tabbar-item--active{
  color: #1989fa !important;
}

.tabbar-item-text{
  font-size: 14px;
  text-align: center;
}
</style>