<template>
  <header class="app-header">
    <div class="nav-box">
      <div class="colors"></div>
      <div class="header-mian">
        <div class="logo-box" @click="$router.push({ path: '/' })">
          <img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg" alt="">
          <div class="logo-text">
            <p>1+X金融产品数字化营销职业技能等级证书</p>
          </div>
        </div>
        <ul class="nav-box">
          <template v-for="(item, index) in navList">
            <li :class="isClassShow(item)" :key="index">
              <router-link :to="item.path">
                <span>
                  {{ item.title }}
                </span>
              </router-link>
              <div class="item-child">
                <template v-for="(chi, index2) in item.itemChi">
                  <div class="li" :key="'chi'+index2" @click="goPage(chi.path, chi.type)">{{ chi.title }}</div>
                </template>
              </div>
            </li>
          </template>
        </ul>
        <div class="login">
          <template v-if="isLogin">
            <span @click="handleLogout">退出</span>
          </template>
          <template v-else>
            <span @click="handleLogin">用户登录</span>
            /
            <span @click="handleRegister">注册</span>
          </template>
        </div>
        <!-- <div class="login">
          <template v-if="isLogin">
            <div>{{ user.nickname || user.realname }}</div>
            <span>|</span>
            <div @click="handleLogout">退出</div>
          </template>
          <template v-else>
            <div @click="handleRegister">注册</div>
            <span>|</span>
            <div @click="handleLogin">登录</div>
          </template>
        </div> -->
      </div>
    </div>
    <vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
  </header>
</template>

<script>
// import login from './login'
export default {
  components: {
    // login
  },
  data() {
    return {
      title: '索菲亚大学金融方向工商管理硕士项目',
      navList: [
        {
          title: '首页',
          path: '/index'
        },
        {
          title: '项目介绍',
          path: '/introduce'
        },
        {
          title: '通知公告',
          path: '/news',
          children: { path: ['/news/detail'] },
          itemChi: [
            {
              title: '通知公告',
              path: '/news?type=0'
            },
            {
              title: '工作动态',
              path: '/news?type=1'
            }
          ]
        },
        {
          title: '办事大厅',
          path: '/hall',
          children: { path: ['/textBook/detail', '/textBook/chapter'] },
          itemChi: [
            {
              title: '我是考生',
              path: '/hall?role=0'
            },
            {
              title: '我是老师',
              path: '/hall?role=1'
            },
            {
              title: '我是学校',
              path: '/hall?role=2'
            }
          ]
        },
        {
          title: '教·学服务',
          path: '/service',
          children: { path: ['/train/detail', '/train/form'] },
          itemChi: [
            {
              title: '教材中心',
              path: '/service'
            },
            {
              title: '教学资源（老师）',
              path: 'https://login.ezijing.com/xlearn/register',
              type: 1
            },
            {
              title: '课程学习（学生）',
              path: 'https://login.ezijing.com/xlearn/register',
              type: 1
            },
            {
              title: '实操学习',
              path: 'https://xtraining.ezijing.com/',
              type: 1
            }
          ]
        }
      ],
      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)
            : ''
      }
    }
  },
  watch: {
    $route(route) {
      if (route.query.register) {
        this.handleRegister()
      }
    }
  },
  mounted() {    
  },
  methods: {
    goPage(path, n) {
      if (n) {
        window.location.href = path
      } else {
        this.$router.push({
          path: path
        })
        // this.$router.go(0)
      }
    },
    reg() {
      this.isLogin = false
      this.$router.push({ path: '/register' })
    },
    closeMask(blo) {
      this.isLogin = blo
    },
    handleLogin() {
      this.passport.login()
    },
    handleRegister() {
      this.passport.register()
    },
    handleLogout() {
      this.passport.logout()
      this.isLogin = false
      window.G.UserInfo = {}
      // window.location.href = window.location.href
      // 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>
.home-head{
  img{
    width: 100%;
    display: block;
    // height: 240px;
  }
}
.nav-box{
  position: relative;
  height: 70px;
  background: #A81A42;
}
.app-header{
  // position: relative;
  // height: 70px;
  // background: #A81A42;
  .colors{
    background: #fff;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .header-mian{
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    .login{
      margin-left: auto;
      color: #fff;
      cursor: pointer;
    }
    .logo-box{
      cursor: pointer;
      position: relative;
      z-index: 1;
      width: 529px;
      display: flex;
      align-items: center;
      // justify-content: center;
      height: 100%;
      background: #fff;
      img{
        width: 119px;
        height: 40px;
        margin-right: 40px;
      }
      .logo-text{
        text-align: center;
        font-size: 18px;
        color: #444;
        font-weight: bold;
        line-height: 25px;
      }
    }
    .nav-box{
      position: relative;
      z-index: 9;
      background: #A81A42;
      padding-left: 60px;
      display: flex;
      align-items: center;
      li{
        font-size: 14px;
        color: #FFFFFF;
        margin-right: 36px;
        position: relative;
        span{
          position: relative;
          z-index: 99;
        }
        &.active{
          font-weight: bold;
        }
        &:hover{
          .item-child{
            display: block;
          }
        }
        .item-child{
          display: none;
          width: 128px;
          position: absolute;
          top:0;
          left: 50%;
          transform: translateX(-50%);
          z-index: 9;
          padding-top: 26px;
          .li{
            width: 100%;
            height: 44px;
            border-top: 1px solid rgba(221,221,221,0.2);
            text-align: center;
            line-height: 44px;
            color: #fff;
            background: #A81A42;
            font-weight: normal !important;
            cursor: pointer;
            &:nth-child(1){
              border: none;
            }
          }
        }
      }
    }
  }
}
</style>
