<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">
              <template v-if="item.type">
                <a :href="item.path" target="_black">
                  <span>
                    {{ item.title }}
                  </span>
                </a>
              </template>
              <template v-else>
                <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>
              </template>
            </li>
          </template>
        </ul>
        <div class="login">
          <template v-if="Object.values(user).length">
            <div class="login-name">
              <span class="name">{{ user.realname || user.username }}</span>
              <span @click="handleLogout">退出</span>
            </div>
          </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 {
      dataForm: {
        username: `ezijing-${new Date().getTime()}`
      },
      title: '索菲亚大学金融方向工商管理硕士项目',
      navList: [
        {
          title: '首页',
          path: '/index'
        },
        {
          title: '项目介绍',
          path: '/introduce'
          // type: 1
        },
        {
          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', '/train/form'] },
          itemChi: [
            {
              title: '我是考生',
              path: '/hall?role=0'
            },
            {
              title: '我是老师',
              path: '/hall?role=1'
            },
            {
              title: '我是学校',
              path: '/hall?role=2'
            }
          ]
        },
        {
          title: '教·学服务',
          path: '/service',
          children: { path: ['/train/detail'] },
          itemChi: [
            {
              title: '教材中心',
              path: '/service'
            },
            {
              title: '教学资源（老师）',
              path: 'https://login.ezijing.com/xlearn/login/index',
              type: 1
            },
            {
              title: '课程学习（学生）',
              path: 'https://login.ezijing.com/xlearn/register',
              type: 1
            },
            {
              title: '实训学习',
              path: 'https://xtraining.ezijing.com/',
              type: 1
            }
          ]
        }
      ],
      isLogin: false,
      user: {},
      options: {
        baseUrl: webConf.url,
        register: {
          data: {
            username: `ezijing-${new Date().getTime()}`
          },
          fields: ['account', 'code', 'password']
        },
        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() {
    // this.loginSuccess()
    // console.log(JSON.parse(window.sessionStorage.userInfo))
    this.user = JSON.parse(window.sessionStorage.userInfo)
  },
  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 = {}
      if (this.$route.path !== '/index') {
        window.sessionStorage.userInfo = {}
        this.user = {}
        this.$router.push('/')
      } else {
        window.sessionStorage.userInfo = {}
        this.user = {}
        this.$router.go(0)
      }
    },
    onReady(isLogin, user = {}) {
      // this.isLogin = isLogin
      this.user = user
      window.G.UserInfo = user
      window.sessionStorage.userInfo = JSON.stringify(user)
    },
    loginSuccess(data) {
      this.passport.checkLoginStatus((isLogin, user = {}) => {
        window.sessionStorage.userInfo = JSON.stringify(user)
        this.isLogin = isLogin
        this.user = user
        // window.G.UserInfo = user
        // this.$router.go(0)
        this.$router.push('/my')
        window.location.reload()
      })
    }
  }
}
</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;
      .login-name {
        display: flex;
        .name {
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: right;
          margin-right: 10px;
        }
      }
    }
    .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>
