<template>
  <!-- 底部横条 -->
  <!-- <div class="nav-bar van-hairline--top">
    <ul class="nav-list">
      <router-link class="nav-list-item active" to="home">
        <div class="nbicon">
          <van-image class="navIconImage dailyImage" :src="homeUrl"/>
          <van-image class="navIconImage activeImage" :src="homeActiveUrl"/>
        </div>
        <span>{{$t('navBar.homePage')}}</span>
      </router-link>
      <router-link class="nav-list-item" to="device">
        <div class="nbicon">
          <van-image class="navIconImage dailyImage" :src="deviceUrl"/>
          <van-image class="navIconImage activeImage" :src="deviceActiveUrl"/>
        </div>
        <span>{{$t('navBar.deviceInformation')}}</span>
      </router-link>
      <router-link class="nav-list-item" to="robotranking">
        <div class="nbicon">
          <van-image class="navIconImage dailyImage" :src="rankingUrl"/>
          <van-image class="navIconImage activeImage" :src="rankingActiveUrl"/>
        </div>
        <span>{{$t('navBar.machineRanking')}}</span>
      </router-link>
      <router-link class="nav-list-item" to="user">
        <div class="nbicon">
          <van-image class="navIconImage dailyImage" :src="userUrl"/>
          <van-image class="navIconImage activeImage" :src="userActiveUrl"/>
        </div>
        <span>{{$t('navBar.personalCenter')}}</span>
      </router-link>
    </ul>
  </div> -->
  <!-- <div> -->
  <van-tabbar route active-color="#4d6add" inactive-color="#404d74" class="nav-bar">
    <van-tabbar-item replace to="/home" icon="home-o">{{ $t('navBar.homePage') }}</van-tabbar-item>
    <van-tabbar-item v-if="isDeviceData" replace to="/device" :dot="hasAlarm" icon="setting-o">{{
      $t('navBar.deviceInformation') }}</van-tabbar-item>
    <van-tabbar-item v-if="isRankingData" replace to="/robotranking" icon="bar-chart-o">{{ $t('navBar.machineRanking') }}</van-tabbar-item>
    <van-tabbar-item replace to="/user" icon="user-o">{{ $t('navBar.personalCenter') }}</van-tabbar-item>
  </van-tabbar>
  <!-- </div> -->
</template>

<script>
import { onMounted, computed, ref } from "vue";
import { useStore } from "vuex";
import { getLoginUser } from "../common/js/utils";
// import { useRouter } from "vue-router";

export default {
  props: {
    hasAlarm: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    // const router = useRouter()
    const store = useStore();
    const user = getLoginUser();
    onMounted(() => {
      // const token = getLocal('token')
      // const path = route.path
      // if (token && !['/home', '/category'].includes(path)) {
      //   store.dispatch('updateCart')
      // }
      isDeviceData.value = user.menuCodeList.some((item) => {
        return item === "M1";
      });

    });
    // 设备管理权限
    const isDeviceData = ref(false);
    const count = computed(() => {
      return store.state.cartCount;
    });
    // 机器排行权限
    const isRankingData = computed(() => {
      return user.menuCodeList.some((item) => {
        return item === "M11";
      });
    });

    return {
      count,
      isDeviceData,
      isRankingData
    };
  },
};
</script>

<style lang="less" scoped>
@import "../common/style/mixin";

.nav-bar {
  //   position: fixed;
  //   left: 0;
  //   bottom: 0;
  //   width: 100%;
  //   padding: 5px 0;
  //   z-index: 1000;
  //   background: #fff;
  //   transform: translateZ(0);
  //   -webkit-transform: translateZ(0);

  //   .nav-list {
  //     width: 100%;
  //     .fj();
  //     flex-direction: row;
  //     padding: 0;

  //     .navIconImage {
  //       width: 22px;
  //       height: 22px;
  //     }

  //     .dailyImage {
  //       display: inline-block;
  //     }

  //     .activeImage {
  //       display: none;
  //     }

  //     .nav-list-item {
  //       display: flex;
  //       flex: 1;
  //       flex-direction: column;
  //       text-align: center;
  //       color: #666;

  //       &.router-link-active {
  //         color: rgba(77, 106, 221, 1);

  //         .dailyImage {
  //           display: none;
  //         }

  //         .activeImage {
  //           display: inline-block;
  //         }
  //       }

  //       i {
  //         text-align: center;
  //         font-size: 22px;
  //       }

  //       span {
  //         font-size: 12px;
  //       }

  //       .van-icon-shopping-cart-o {
  //         margin: 0 auto;
  //         margin-bottom: 2px;
  //       }
  //     }
  //   }
  .nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: white;
  box-shadow: 0 -2px 12px rgba(77,106,221,0.1);
  z-index: 100;
}

}
</style>
