<template>
    <!-- 右侧导航栏 -->
  <el-menu
    router
    :default-active=" viewName"
    class="el-menu-vertical-demo"
    background-color="#121834"
    popper-append-to-body="false"
    text-color="#B9C0DE"
    active-text-color="#fff">
      <el-menu-item v-for="item in navItem" :key="item.routerName" :index="item.routerName">
        <span>{{item.navTitle}}</span>
      </el-menu-item>
    </el-menu>
</template>

<script>
export default {
  name: 'NavBar',
  data(){
    return{
      viewName: 'ModifyOrgan',//页面初始化显示 
    }
  },
  props:{
    navItem:{
      type: Array
    }
  },
  mounted(){
    // if(window.location.href.split('/')[4] == ''){
    //     this.viewName = 'ModifyOrgan'
    // }else{
    //  this.viewName =  window.location.href.split('/')[4]
    //  }
  },
  watch:{
        $route:{
            handler(newRouter){
                // this.curTagName=newRouter.name;
                this.viewName=newRouter.name
            },
            immediate: true
        }
    },
}
</script>

<style scoped>
.el-menu-vertical-demo{
  width: 100%;
  height: 100%;
  padding-top: 46px;
  box-sizing: border-box;
}
.el-menu {
  border-right: solid 0px #e6e6e6;
}
.el-menu-vertical-demo .is-active{
  background-color: #375AC7 !important;
}
.el-menu-item{
  padding: 0 !important;
  width: 100%;
  height: 50px !important;
  line-height: 50px !important;
  text-align: left !important;
  padding-left: 15px !important;
}
.el-menu-item span{
  display: inline-block;
  width: 84px;
  height: 20px;
  font-size: 14px;
  font-family: '思源黑体 Medium';
  font-weight: 500;
  line-height: 20px;
}

</style>