<template>
    <div class="header">
      <img src="@/assets/images/header.png" alt="" class="banner">
      <div class="header-content">
        <div class="person-info" v-if="isLogin">
          <router-link to="/center" class="user-name">
            <i class="icon"></i>
            {{ userInfo.name }}
          </router-link>
          <a href="javascript: void(0);" class="logout" @click="doLogout">
            <i class="icon"></i>
            退出
          </a>
        </div>
        <div class="person-info" v-else>
          <router-link to="/login" class="user-name">
            <i class="icon"></i>
            登录
          </router-link>
          <router-link to="/register" class="logout">
            <i class="icon"></i>
            注册
          </router-link>
        </div>
      </div>

      <div class="nav">
        <div class="nav-content">
          <div class="nav-list">
            <ul>
              <li>
                <router-link to="/" :class="{active: this.$route.path == '/'}">首页</router-link>
              </li>
              <li>
                <router-link to="/notice" :class="{active: this.$route.path == '/notice'}">最新公告</router-link>
              </li>
              <li>
                <router-link to="/policy" :class="{active: this.$route.path == '/policy'}">考试政策</router-link>
              </li>
              <li>
                <router-link to="/train" :class="{active: this.$route.path == '/train'}">培训机构</router-link>
              </li>
            </ul>
          </div>
<!--          <div class="nav-search">-->
<!--            <input type="text" placeholder="请输入搜索内容">-->
<!--            <button></button>-->
<!--          </div>-->
        </div>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
import url from '@/assets/public/url'
export default {
    name: 'Header',
    components: {},
    data () {
        return {
          token: '',
          userInfo: {},
          isLogin: false,
          url: url.loginUrl
        }
    },
    methods: {
      checkLogin: function () {
        var self = this
        var token = window.sessionStorage.getItem('token')
        if (token) {
          axios.get(self.url + 'app/user/get-app-user', {
            headers: {
              token: token
            }
          }).then(function (res) {
            if (res.status === 200) {
              self.userInfo = res.data
              self.isLogin = true
            } else {
              self.$router.push({
                path: 'login'
              })
            }
          })
        } else {
          self.isLogin = false
        }
      },
      doLogout: function () {
        var self = this
        this.$layer.open({
          content: '确认退出登录吗？',
          yes: function () {
            sessionStorage.clear()
            self.checkLogin()
            self.$layer.closeAll()
          }
        })
      }
    },
    mounted: function () {
      this.checkLogin()
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.header
  min-width 1200px
  position relative
  .header-content
    width 1200px
    margin 0 auto
    height 288px
    .person-info
      float right
      margin-top 20px
      a
        display inline-block
        font-size 16px
        color #fff
        margin-right 30px
        line-height 20px
        height 20px
        &.user-name
          i
            background url("~@/assets/images/icon_aggregate1.png") no-repeat left top
            background-position 0 0
            display inline-block
            width 17px
            height 20px
            vertical-align top
            margin-right 5px
        &.back
          padding-right 30px
          border-right 1px solid #1cb0ec
          margin-right 20px
          i
            background url("~@/assets/images/icon_aggregate1.png") no-repeat left top
            background-position -20px 0
            display inline-block
            width 19px
            height 20px
            vertical-align top
            margin-right 5px
        &.logout
          i
            background url("~@/assets/images/icon_aggregate1.png") no-repeat left top
            background-position -43px 0
            display inline-block
            width 17px
            height 16px
            vertical-align top
            margin-right 5px
  .banner
    position absolute
    top 0
    left 0
    z-index -1
    width 100%
    height 288px
  .nav
    margin-top -30px
    padding 18px 0 6px
    position relative
    height 48px
    background url("~@/assets/images/nav-bg.png") no-repeat center
    .nav-content
      width 1200px
      margin 0 auto
      overflow hidden
      .nav-list
        text-align center
        ul
          display inline-block
          overflow hidden
          width 100%
          li
            float left
            width 25%
            padding 0 28px
            box-sizing border-box
            position relative
            &:after
              content ''
              display block
              width 1px
              height 36px
              background #29c3f7
              position absolute
              top 50%
              right 0
              margin-top -18px
            &:last-child
              &:after
                display none
            a
              display block
              text-align center
              font-size 24px
              font-weight bold
              line-height 48px
              border-radius 24px
              color #fff
              &:hover, &.active
                background #55acf7
      .nav-search
        float left
        margin-left 20px
        width 236px
        font-size 0
        input
          vertical-align top
          width 170px
          height 48px
          padding 0 15px
          box-sizing border-box
          font-size 16px
          border none
          outline none
          color #000
          border-radius 23px 0 0 23px
        button
          vertical-align top
          width 65px
          height 48px
          border none
          outline none
          background url("~@/assets/images/search-btn.png") no-repeat center
          background-size 100% 100%
          cursor pointer
</style>
