<template>
  <div class="nav">
      <ul>

        <li :class="{'navfirst': isActive('/login')}">
          <a href="#/" @click="goto('/login')"> 回到主页</a>
        </li>

        <li :class="{'navfirst': isActive('/center/home')}">
          <a href="#/center/home" @click="goto('/center/home')"> 学员中心</a>
        </li>

        <li :class="{'navfirst': isActive('/center/setting')}">
          <a href="#/center/setting" @click="goto('/center/setting')">账号设置</a>
        </li>

        <li :class="{'navfirst': isActive('/center/class/train')}">
          <a href="#/center/class/train" @click="goto('/center/class/train')">我的课程</a>
        </li>

        <li :class="{'navfirst': isActive('/center/market')}">
          <a href="#/center/market" @click="goto('/center/market')">推荐课程</a>
        </li>

        <li :class="{'navfirst': isActive('/center/myOrder')}" >
          <a href="#/center/myOrder" @click="goto('/center/myOrder')">我的订单</a>
        </li>

        <li :class="{'navfirst': isActive('/center/sign')}" >
          <a href="#/center/sign" @click="goto('/center/sign')">学时证明</a>
        </li>
      </ul>
    </div>
</template>

<script>
  import menu from './menu.js'
  export default {
    props: {
      user: {
        type: Object,
        default: {
          nickanme: ''
        }
      }
    },
    data() {
      return {
        exportLoading: false,
        menu:menu,
        listLoading: false,
        groups: [],
        tableData: []
      };
    },
    methods: {
      goState( item ){
        if( item.children){
          this.goSubState( item.children[0] );
        }else{
          this.goSubState( item );
        }
      },
      goSubState(item){
        if(item.path == this.$route.path) return;
        this.$router.push(item.path);
      },
      isActive( path ){
        let rpath = this.$route.path;
        return rpath.indexOf( path )> -1;
      },
      goto( route ){
        if(this.isActive(route)) return;
        this.$router.push( route );
      }
    }
  }
</script>

<style lang="less">
  @import "./index.css";
  .nav{
    height:50px;
    margin:1px auto;
    width:1009px;
    text-align: center;
    ul{
      display: inline-block;
    }
  }
  .nav ul li{ float:left; line-height:50px;font-size:1.25rem;}

  .nav a{ padding:0 20px; color: #999; display:block; height:50px;}

  .nav ul li a:hover{ background:#5584d1; color: #fff; text-decoration:none;}
  .navfirst a{ background:#3876da;  color: #fff; display:block;}
</style>
<style lang="less" scoped>

</style>
