<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> -->
  <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 replace to="/device" icon="setting">{{ $t('navBar.deviceInformation')}}</van-tabbar-item>
    <van-tabbar-item replace to="/robotranking" icon="label">{{ $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 } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    onMounted(() => {
    });
    const count = computed(() => {
      return store.state.cartCount;
    });

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

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