<template>
  <!-- 底部横条 -->
  <van-tabbar route active-color="#2d87c8" inactive-color="#404d74">
    <van-tabbar-item replace to="/home" icon="wap-home">{{ $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="contact">{{ $t('navBar.personalCenter') }}</van-tabbar-item>
  </van-tabbar>
</template>

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

export default {
  setup() {
    const store = useStore();
    const user = getLoginUser();

    // 设备管理权限
    const isDeviceData = ref(false);
    onMounted(() => {
      isDeviceData.value = user.menuCodeList.some((item) => {
        return item === "M1";
      });
    });
    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;
  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>
