<template>
  <el-aside class="side_bar">
    <div class="nav_menu">
      <el-menu
        :default-active="activeMenuName"
      
        text-color="#666"
        :router="true"
      >
        <el-menu-item
          v-for="(item, index) in menuList"
          :key="index"
          :index="item.externalLink" class="menu_one_item"
        >
          <div class="menu_one_title">
              <i class="iconfont" :class="item.icon"></i><span>{{ item.menuName }}</span>
          </div>
        </el-menu-item>
      </el-menu>
    </div>
  </el-aside>
</template>
<script>
export default {
  name: "SideBarItem",
  props: {
    menuList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      activeMenuName: "",
    };
  },
  watch: {
    $route() {
      this.activeMenu();
    },
  },
  created() {
    this.activeMenu();
  },
  mounted() {
    this.activeMenu();
  },
  methods: {
    activeMenu() {
      const route = this.$route;
      const { path } = route;

      // if(path == '/userInfo'){
      //   this.activeMenuName = "/userInfo/personInfo";
      // }else if(path.includes('examMarking')){
      // console.log("打印当前路由地址path",path);
      // console.log("打印menuList",this.menuList);
      if(path=='/examMarking/help/detail')
      {
        // console.log("进来了",);
        this.activeMenuName = '/examMarking/help';
      }
      else
      {
          this.activeMenuName = path;
      }
      // console.log("打印当前选中菜单activeMenuName",this.activeMenuName);
      // this.activeMenuName = path;
      // }
    },
  },
};
</script>
<style lang="scss" scoped>

.side_bar {
    width: 170px !important;
    border-radius: 10px;
    position: fixed;
    background-color: #fff;
    border-radius: 10px;
    padding-bottom: 12px;
  }
@media screen and (max-width: 1400px) {
  .side_bar {
    width: 150px !important;
    border-radius: 10px;
    position: fixed;
    // background-color: #fff;
    border-radius: 10px;
    padding-bottom: 2px;
  }
}


</style>
