<template>
  <div class="vertical-menu-box">
    <div class="vertical-menu-title">
      <img src="@/assets/home_images/mark_sup.png">
      <span>供应</span>
    </div>
    <div class="vertical-menu-label touch"><span :class="menuIndex==='1'?'active':''" @click="menuClick('/console/product')">产品管理</span></div>
    <div class="vertical-menu-label touch"><span :class="menuIndex==='2'?'active':''" @click="menuClick('/console/replyLog')">被询价记录</span></div>
    <el-divider />
    <div class="vertical-menu-title">
      <img src="@/assets/home_images/mark_pro.png">
      <span>采购</span>
    </div>
    <div class="vertical-menu-label touch"><span :class="menuIndex==='3'?'active':''" @click="menuClick('/console/collectPro')">收藏的产品</span></div>
    <div class="vertical-menu-label touch"><span :class="menuIndex==='4'?'active':''" @click="menuClick('/console/collectSup')">收藏的供应商</span></div>
    <div class="vertical-menu-label touch"><span :class="menuIndex==='5'?'active':''" @click="menuClick('/console/askLog')">询价记录</span></div>
  </div>
</template>
<script>
export default {
  props: {
    menuIndex: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      currentMenuObj: null
    }
  },
  mounted() {
    this.$nextTick(() => {})
  },
  methods: {
    menuClick(path) {
      this.$router.push({ path: path })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
  cursor:pointer;
}
.vertical-menu-box {
  padding-top: 20px;
  padding-left: 14px;
  width: 100%;
  height: 66vh;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
  border-radius: 10px;
  .vertical-menu-label {
    padding: 12px 28px;
    font-size: 16px;
    color: black;
    span {
      opacity: 0.8;
    }
    span:hover {
      opacity: 1;
    }
    .active {
      color: #0342AB;
    }
  }
  .vertical-menu-title {
    position: relative;
    margin: 10px 0;
    font-size: 20px;
    font-weight: bold;
    color: #191919;
    line-height: 42px;
    img {
      position: absolute;
      top: 9px;
      width: 24px;
      height: 24px;
    }
    span {
      padding: 0 28px;
    }
  }
}
</style>
