<template>
  <div>
    <div class="head-main">
      <div class="color-bar"></div>
      <div class="head-top-content">
        <div class="max-width-content">
          <div class="logo-box">
            <router-link to="/">
              <img src="/images/logo.png" />
            </router-link>
          </div>
          <div class="login">
            <template v-if="Object.values(user).length">
              <div class="login-name">
                <span class="name">{{ user.realname || user.username }}</span>
                &nbsp;&nbsp;
                <span @click="handleLogout">退出</span>
              </div>
            </template>
            <template v-else>
              <span @click="handleLogin">用户登录</span>
              /
              <span @click="handleRegister">注册</span>
            </template>
          </div>
        </div>
      </div>
      <div class="head-nav-content max-width-content">
        <ul :class="{ 'nav-item-box': true }">
          <li v-for="(item, index) in navData" :key="index" :class="getNameActive(item)">
            <div class="nav-item">
              <router-link :to="item.path">{{ item.name }}</router-link>
            </div>
            <ul v-if="item.children">
              <li v-for="child in item.children" :key="child.path" :class="getNameActive(child)">
                <div class="nav-item">
                  <router-link :to="child.path">{{ child.name }}</router-link>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navData: [
        { name: '首页', path: '/index' },
        { name: '通知公告', path: '/news' },
        {
          name: '智能数据分析与实战应用',
          path: '/product',
          children: [
            { name: '智能数据分析与实战应用（初级）', path: '/product?tab=1' },
            { name: '智能数据分析与实战应用（中级）', path: '/product?tab=2' },
            { name: '智能数据分析与实战应用（高级）', path: '/product?tab=3' },
          ],
        },
        {
          name: '智能数字营销与实战应用',
          path: '/disabled',
          children: [
            { name: '智能数字营销与实战应用（初级）', path: '/disabled' },
            { name: '智能数字营销与实战应用（中级）', path: '/disabled' },
            { name: '智能数字营销与实战应用（高级）', path: '/disabled' },
          ],
        },
        {
          name: '人工智能通识应用',
          path: '/AI',
          children: [
            { name: '人工智能通识应用（初级）', path: '/AI?tab=1' },
            { name: '人工智能通识应用（中级）', path: '/AI?tab=2' },
            { name: '人工智能通识应用（高级）', path: '/AI?tab=3' },
          ],
        },
        { name: '技能培训', path: '/train' },
        // { name: '教科研服务', path: '/service' },
        {
          name: '认证中心',
          path: '/attestation',
          children: [
            { name: '我是老师', path: '/attestation/teacher' },
            { name: '我是学生', path: '/attestation/student' },
          ],
        },
      ],
      user: {},
      isLogin: false,
      options: {
        baseUrl: import.meta.env.VITE_API_BASE_URL,
        register: {
          data: {
            username: `ezijing-${new Date().getTime()}`,
          },
          fields: ['account', 'code', 'password'],
        },
        login: {
          account: { onSuccess: this.loginSuccess },
          phone: { onSuccess: this.loginSuccess },
        },
      },
    }
  },
  methods: {
    reg() {
      this.isLogin = false
      this.$router.push({ path: '/register' })
    },
    handleLogin() {
      this.passport.login()
    },
    handleRegister() {
      this.passport.register()
    },
    handleLogout() {
      this.passport.logout()
      this.isLogin = false
      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.sessionStorage.userInfo = JSON.stringify(user)
    },
    loginSuccess() {
      this.passport.checkLoginStatus((isLogin, user = {}) => {
        window.sessionStorage.userInfo = JSON.stringify(user)
        this.isLogin = isLogin
        this.user = user
        this.$router.push('/my')
        window.location.reload()
      })
    },
  },
  computed: {
    passport() {
      return this.$refs.passport
    },
    getNameActive() {
      return (item) => {
        const currentPath = this.$route.path
        if (currentPath.includes(item.path)) {
          return 'active'
        } else {
          let className = ''
          if (item.children) {
            item.children.map((cData) => {
              cData.path === currentPath && (className = 'active')
            })
          }
          return className
        }
      }
    },
  },
  watch: {
    $route(route) {
      if (route.query.register) {
        this.handleRegister()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.head-main {
  background: #fff;
  .color-bar {
    height: 10px;
    background: #aa1941;
  }
  .head-top-content {
    border-bottom: 1px solid #ebebeb;
    padding: 22px 0;
    .max-width-content {
      display: flex;
      align-items: center;
      img {
        height: 50px;
        cursor: pointer;
        display: block;
      }
      .logo-box {
        flex: 1;
      }
      .user {
        margin-left: auto;
        font-size: 14px;
        em {
          font-size: 14px;
          font-style: normal;
          padding: 0 14px;
        }
        .logout {
          cursor: pointer;
        }
      }
      .login-btn-box {
        margin-left: auto;
        display: flex;
        div {
          width: 72px;
          height: 24px;
          box-sizing: border-box;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
          border-radius: 6px;
          margin-left: 10px;
          cursor: pointer;
        }
        .login {
          background: #aa1941;
          color: #fff;
        }
        .register {
          color: #333333;
          border: 1px solid #eaeaea;
        }
      }
      .language {
        margin-left: 24px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        .cn {
          color: #aa1941;
        }
      }
    }
  }
  .max-width-content {
    width: 1200px;
    margin: 0 auto;
  }
  .head-nav-content {
    min-height: 72px;
    display: flex;
    // align-items: center;
    .nav-item-box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      a {
        color: inherit;
      }
      > li {
        position: relative;
        &:hover,
        &.active {
          > .nav-item {
            color: #aa1941;
          }
        }
        &:hover {
          ul {
            display: block;
          }
        }
        > .nav-item {
          line-height: 72px;
          font-size: 22px;
          color: #333333;
          cursor: pointer;
        }

        ul {
          display: none;
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 72px;
          left: -10px;
          background: #fff;
          z-index: 999;
          padding: 20px 24px;
          border-top: 4px solid rgba(170, 25, 65, 1);
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
          li {
            &:hover,
            &.active {
              .nav-item {
                color: rgba(170, 25, 65, 1);
              }
            }
            .nav-item {
              color: #333;
              font-size: 16px;
              font-weight: 400;
              letter-spacing: 1px;
              line-height: 3;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}
</style>
