<template>
  <el-col :span="24" class="">
      <el-col :span="2" :offset="2">
       <img class="logoImg" src="../assets/img/log.png"/>
      </el-col>
      <el-col :span="2" v-show="roles.indexOf(item.id) >= 0"  v-for="(item, index) of menuData" :key="item.id"
      @click.native="secondNavClick(item,index)">
        <span class="lineStyle" :class="{active:index == checkindex,menu_item:true}">{{item.name}}</span>

      </el-col>

      <el-col :span="2"  :offset="13">
        <div class="">
          <img class="userstyle" src="../assets/img/user.jpg"/>
          <span>李老师</span>
          <i class="el-icon-caret-bottom"></i>
          <img src="" alt="">
          <span>退出</span>
        </div>
      </el-col>
      <el-col :span="1"></el-col>
  </el-col>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: "navMenu",
  // props: {
  //   navsData: Array
  // },
  data() {
    return {
      menuData: [ {
    id: "2",
    name: "校区管理员",
    href: "SuperAdmin",
  },
  {
    id: "2",
    name: " 批改老师注册审核",
    href: "CheckTeacherAudit",
  },
  {
    id: "2",
    name: "批改老师薪酬表",
    href: "CheckTeacherPay",
  },
 ],
      checkindex: 0
    };
  },
  watch: {
    navsData(n) {
      this.navsData = n;
      this.initNav();
    }
  },
  methods: {
    // 初始化处理
    // initNav() {
    //   this.menuData = JSON.parse(JSON.stringify(this.navsData));
    // },
    secondNavClick(val, index) {
      this.$router.push("/home/" + val.href);
      this.checkindex = index;
    }
  },
  computed: {
      ...mapGetters(['name', 'avatar','roles'])
    },
  mounted() {
    // this.initNav();
  }
};
</script>
<style scoped>
/*.mainHeader{*/
  /*height: 110px;*/
  /*line-height:110px;*/
/*}*/
.menu_item {
  cursor: pointer;
  color:#999999; 
  font-size: 9px;
  font-family: serif;
  box-sizing:border-box;
  height: 80%;
  text-align:center;
  padding-bottom:19px ;
  /*display: inline-block;*/
}
.menu_item:hover {
  color:#52CC60 ;
  border-bottom:2px solid #52cc60;
}
.active {
  color:#52CC60 !important;
  border-bottom:2px solid #52cc60;
}
.menu_item+.menu_item {
  border-left: 1px solid #ffffff;
}
.logoImg{
  width:136px;
  height:52px;
}
.sishuLogo{
  margin-left:125px;
}
.userstyle{
  width:26px;
  height:26px;
  border-radius: 15px;
}
  .lineStyle{
    color: #999999;
    font-size: 18px;
  }
</style>
