<template>
  <header class="app-header">
    <section class="app-header-main">
      <div class="poster"></div>
      <div class="handle-btn">
        <span @click="isLogin = true">用户登录</span>
        <span>\</span>
        <span @click="$router.push({ path: '/register' })">注册</span>
      </div>
    </section>
    <section class="app-header-menu">
      <ul>
        <template v-for="(item, index) in navList">
          <router-link :to="item.path" :key="index">
            <li
              :class="isClassShow(item)"
              >
              {{ item.title }}
            </li>
          </router-link>
        </template>
      </ul>
    </section>
    <vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
    <login v-if="isLogin" @closeMask="closeMask"></login>
  </header>
</template>

<script>
import login from './login'
export default {
  components: {
    login
  },
  data() {
    return {
      title: '索菲亚大学金融方向工商管理硕士项目',
      navList: [
        { title: '首页', path: '/index' },
        { title: '工作动态', path: '/news', children: { path: ['/news/detail'] } },
        { title: '教材中心', path: '/textBook', children: { path: ['/textBook/detail', '/textBook/chapter'] }},
        { title: '师资培训', path: '/train', children: { path: ['/train/detail', '/train/form'] } },
        { title: '考核站点', path: '/site' },
        { title: '证书成绩查询', path: '/query' }
      ],
      isLogin: false,
      user: null,
      options: {
        login: {
          account: {
            onSuccess: this.loginSuccess
          },
          phone: {
            onSuccess: this.loginSuccess
          }
        }
      }
    }
  },
  computed: {
    passport() {
      return this.$refs.passport 
    },
    isClassShow() {
      return (item) => {
        
        return this.$route.path === item.path
          ? 'active'
          : item.children
            ? ((_this) => {
              const isPath = item.children.path.find(item => {
                return item === _this.$route.path
              })
              return isPath && 'active'
            })(this)
            : ''
      }
    }
  },
  mounted() {    
  },
  watch: {
    // $route(route) {
    //   if (route.query.needLogin.path) {
    //     this.handleLogin()
    //   }
    // }
  },
  methods: {
    closeMask(blo) {
      this.isLogin = blo
    },
    handleLogin() {
      this.passport.login()
    },
    handleRegister() {
      this.passport.register()
    },
    handleLogout() {
      this.passport.logout()
      this.isLogin = false
      window.G.UserInfo = {}
      this.$router.push('/')
    },
    onReady(isLogin, user = {}) {
      // this.isLogin = isLogin
      this.user = user
      window.G.UserInfo = user
    },
    loginSuccess(data) {
      this.passport.checkLoginStatus((isLogin, user = {}) => {
        // this.isLogin = isLogin
        this.user = user
        this.$router.push('/my')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-header {
  background-color: #fff;
  .inner {
    max-width: 970px;
    margin: 0 auto;
  }
}
.app-header-main {
  position: relative;
  .poster{
    width: 100%;
    height: 220px;
    background: url(https://zws-imgs-pub.ezijing.com/static/public/7f46acc2486aec78c8fd4bdf5afd9589.png) center;
    background-size: cover;
  }
  .handle-btn{
    position: absolute;
    top: 16px;
    right: 24px;
    span{
      font-size: 14px;
      color: #FFFFFF;
      line-height: 20px;
      cursor: pointer;
    }
  }
}
.app-header-menu{
  width: 100%;
  height: 56px;
  background: linear-gradient(47deg, #C01540 0%, #C01540 7%, #D43960 26%, #FF87A5 100%, #C01540 100%);
  ul{
    display: flex;
    justify-content: center;
    li{
      width: 200px;
      height: 56px;
      text-align: center;
      line-height: 56px;
      font-size: 20px;
      color: #FFFFFF;
      cursor: pointer;
      &.active{
        font-size: 20px;
        color: #AF1B40;
        background: #fff;
      }
    }
  }
}
</style>
