<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>
    <div
      class="menu-item menu-item_template"
      :class="{ 'js-menu-item_active': currentRoute === 2 }"
      @click="selectPage(2, 'userCenter')"
    >
      <div class="menu-item_template-icon">
        <i class="iconfont">&#xe62a;</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 {
  data() {
    return {
      currentRoute: 0,
    };
  },
  methods: {
    selectPage(idnex, path) {
      if (idnex === 1) {
        window.open(UrlPrefixObj.model.CHAIN_BROWSER_URL_PREFIX);
      } else {
        this.currentRoute = idnex;
        this.$router.push({ path: path });
      }
    },
  },
};
</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 */
}

.menu-item_template {
  margin-top: 26px; /* 36 - 10 */
}

.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_template-icon {
  padding: 9px 0 8px 0;
  cursor: pointer;
  & > i {
    font-size: 16px;
  }
}

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