<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">
            <div :class="getNameActive(item)">
              <router-link :to="item.path"> <div v-html="item.name"></div></router-link>
            </div>
          </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' },
        { name: '技能培训', path: '/train' },
        // { name: '教科研服务', path: '/service' },
        { name: '认证中心', path: '/attestation' },
      ],
      time: null,
      isEn: false,
      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 },
        },
      },
    }
  },
  mounted() {},
  methods: {
    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
      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(data) {
      this.passport.checkLoginStatus((isLogin, user = {}) => {
        window.sessionStorage.userInfo = JSON.stringify(user)
        this.isLogin = isLogin
        this.user = user
        this.$router.push('/my')
        window.location.reload()
      })
    },
    goPage(path, goType) {
      if (parseInt(goType) === 3) {
        this.$message('暂未开通，敬请期待')
      } else {
        if (path) {
          if (goType === 1) {
            window.open(path)
          } else if (goType === 2) {
            window.location.href = path
          } else {
            this.$router.push({ path: path })
          }
        }
      }
    },
  },
  computed: {
    passport() {
      return this.$refs.passport
    },
    getNameActive() {
      return (item) => {
        const currentPath = this.$route.path
        if (currentPath.includes(item.path)) {
          return 'name active'
        } else {
          let className = 'name'
          if (item.childern) {
            item.childern.map((cData) => {
              cData.path === currentPath && (className = 'name 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;
      li {
        position: relative;
        // margin-right: 50px;
        .name1 {
          line-height: 1.5;
        }
        .name {
          line-height: 72px;
          font-size: 22px;
          color: #333333;
          cursor: pointer;
          a {
            color: #333333;
            font-size: 22px;
            text-decoration: none;
          }
          &.active {
            font-weight: 500;
            color: #aa1941;
            a {
              color: #aa1941;
            }
          }
        }
        &:hover {
          .name {
            color: #aa1941;
            font-weight: 500;
            a {
              // font-weight: 500;
              color: #aa1941;
            }
          }
          .child-item {
            .one-level {
              display: block;
            }
          }
        }
        .child-item {
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 72px;
          left: -10px;
          display: flex;
          background: #fff;
          z-index: 999;
          .one-level {
            padding: 36px 24px 0;
            border-top: 4px solid rgba(170, 25, 65, 1);
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
            display: none;
            .li {
              margin-bottom: 36px;
              display: flex;
              justify-content: space-between;
              &.active {
                .name {
                  color: rgba(170, 25, 65, 1);
                }
              }
              .name {
                font-weight: 400;
                line-height: 100%;
                color: #333333;
                font-size: 16px;
                white-space: nowrap;
                a {
                  color: #333333;
                  font-size: 16px;
                }
              }
              .el-icon-arrow-right {
                color: rgba(51, 51, 51, 1);
                margin-left: 15px;
              }
              &:hover {
                .name {
                  color: rgba(170, 25, 65, 1);
                  a {
                    color: rgba(170, 25, 65, 1);
                  }
                }
                .el-icon-arrow-right {
                  color: rgba(170, 25, 65, 1);
                }
              }
            }
          }
          .two-level {
            pointer-events: auto;
            padding: 34px 41px 0 24px;
            .name1 {
              font-size: 16px;
              font-weight: 400;
              line-height: 20px;
              color: #333333;
              margin-bottom: 36px;
              white-space: nowrap;

              &:hover {
                color: rgba(170, 25, 65, 1);
              }
              a {
                font-size: 16px;
                font-weight: 400;
                line-height: 20px;
                color: #333333;
                margin-bottom: 36px;
              }
            }
            .name {
              font-size: 16px;
              font-weight: 400;
              line-height: 20px;
              color: #333333;
              margin-bottom: 36px;
              white-space: nowrap;
              &:hover {
                color: rgba(170, 25, 65, 1);
              }
              a {
                font-size: 16px;
                font-weight: 400;
                line-height: 20px;
                color: #333333;
                margin-bottom: 36px;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
}
</style>
