<template>
  <!-- 左侧导航栏 -->
  <nav class="main_menu">
    <div
      class="menu-item menu-item_first"
      :class="{ 'js-menu-item_active': currentRoute === 0 }"
      @click="selectPage(0, '/categoryManage')"
    >
      <div class="menu-item_subject-icon">
        <i class="iconfont">&#xe62b;</i>
      </div>
      <div class="menu-item-label">存证</div>
      <div class="menu-item-active_border"></div>
    </div>
    <div
      class="menu-item menu-item_product"
      :class="{ 'js-menu-item_active': currentRoute === 1 }"
      @click="selectPage(1)"
    >
      <div class="menu-item_product-icon">
        <i class="iconfont">&#xe629;</i>
      </div>
      <div class="menu-item-label">溯源</div>
      <div class="menu-item-active_border"></div>
    </div>
  </nav>
</template>

<script>
let UrlPrefixObj = require("@/config/UrlPrefix");
export default {
  computed: {
    currentRoute() {
      return this.$store.getters.get_currentRoute;
    },
  },
  methods: {
    // 路由切换
    selectPage(idnex, path) {
      this.$store
        .dispatch("selectPage", idnex)
        .then(() => {
          if (idnex === 1) {
            window.open(UrlPrefixObj.model.CHAIN_BROWSER_URL_PREFIX);
          } else {
            if (this.$route.path === path) return;
            this.$router.push({ path: path });
          }
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped lang="less">
.main_menu {
  width: 62px;
  height: 100%;
  background: #27272a;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 12px;
}

.menu-item {
  height: 60px;
  position: relative;
}

.menu-item_first {
  margin-top: 79px;
}

.menu-item_product {
  margin-top: 21px; /* 30 - 9 */
}



.js-menu-item_active {
  background: #39393e;
  cursor: pointer;
  & > .menu-item-active_border {
    display: initial;
  }
}

.menu-item-active_border {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #3f79fe;
}

.menu-item_subject-icon {
  padding: 14px 0 5px 0;
  & > i {
    font-size: 14px;
  }
}

.menu-item_product-icon {
  padding: 12px 0 6px 0;
  cursor: pointer;
  & > i {
    font-size: 15px;
  }
}



.menu-item-label {
  line-height: 17px;
}
</style>
