<template>
    <div class="header">
      <div class="header-box">
        <div class="head-container">
          <router-link to="/" tag="div" class="title">
            <h1>包头市安全生产报名培训考试服务平台</h1>
            <p>Baotou Workplace Safety Registration Training And Examination Service Platform</p>
          </router-link>
          <div class="nav">
            <ul>
              <router-link to="/" tag="li" :class="{active: this.$route.path == '/'}">首页</router-link>
              <router-link to="/notice" tag="li" :class="{active: this.$route.path == '/notice'}">最新公告</router-link>
              <router-link to="/policy" tag="li" :class="{active: this.$route.path == '/policy'}">考试政策</router-link>
              <router-link to="/train" tag="li" :class="{active: this.$route.path == '/train'}">培训机构</router-link>
              <router-link to="/common" tag="li" :class="{active: this.$route.path == '/common'}">常见问题</router-link>
            </ul>
          </div>
          <div class="login" v-if="!isLogin">
            <router-link to="/login" class="login-btn">登录</router-link>
            <router-link to="/register" class="register-btn">注册</router-link>
          </div>
          <div class="login" v-else>
            <router-link to="/center" class="login-btn" :title="userInfo.name">{{ userInfo.name }}</router-link>
            <a href="javascript: void(0);" class="logout-btn" @click="doLogout">退出登录</a>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
import url from '@/assets/public/url'
export default {
    name: 'Header',
    components: {},
    data () {
        return {
          token: window.sessionStorage.getItem('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()
            if (self.$route.path == '/') {
              self.$router.go(0)
            }
          }
        })
      }
    },
    mounted: function () {
      this.checkLogin()
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.header
  height 500px
  min-width 1200px
  background url("~@/assets/images/head-bg.jpg") no-repeat center
  background-size: auto 100%
  .header-box
    height 110px
    box-sizing border-box
    background url("~@/assets/images/login-head-bg.png") no-repeat
    background-size: 100% 100%
    .head-container
      width 1200px

      margin 0 auto
      padding-top 20px
      overflow hidden
      .title
        float left
        margin-right 30px
        cursor pointer
        h1
          font-size 22px
          color #fff
          font-weight normal
          margin-bottom 5px
        p
          font-size 12px
          color #fff
      .nav
        float left
        margin-top 5px
        ul
          &:after
            content ''
            display block
            clear both
          li
            float left
            padding 0 15px
            font-size 18px
            color #fff
            border-right 2px solid #fff
            cursor pointer
            position relative
            &:last-child
              border none
            &.active
              &:after
                content ''
                display block
                width 40px
                height 3px
                border-radius 3px
                background #fff300
                position absolute
                bottom -10px
                left 50%
                margin-left -20px
      .login
        float right
        margin-top 5px
        a
          display inline-block
          padding-left 25px
          font-size 16px
          color #fff
          vertical-align top
          &.login-btn
            width 100px
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            box-sizing border-box
            background url("~@/assets/images/login-icon.png") no-repeat left center
            background-size 18px 18px
            padding-right 10px
            border-right 1px solid #fff
            margin-right 10px
          &.register-btn
            background url("~@/assets/images/register-icon.png") no-repeat left 1.5px
            background-size 20px 20px
          &.logout-btn
            background url("~@/assets/images/logout-icon.png") no-repeat left 1.5px
            background-size 20px 20px
</style>
