<template>
  <div class="head-mian">
    <div class="color-bar"></div>
    <div class="head-top-content">
      <div class="max-width-content">
        <div class="logo-box">
          <img
            :src="
              $cookies.get('lang') == 'en-US'
                ? 'https://webapp-pub.ezijing.com/www/pc/en-logo.png'
                : 'https://zws-imgs-pub.ezijing.com/static/public/0411340f9306b908eda54b5d66668f50.png'
            "
            @click="goPage('/')"
          />
        </div>
        <template v-if="$route.path === '/roadmap'">
          <client-only>
            <div class="user" v-if="user.id">
              <span>{{ user.realname || user.nickname }}</span
              ><em>|</em><span class="logout" @click="logout">退出</span>
            </div>
            <div class="login-btn-box" v-else>
              <div class="login"><a :href="loginURL" :key="loginURL">登录</a></div>
              <div class="register">
                <a :href="registerURL">注册</a>
              </div>
            </div>
          </client-only>
        </template>
        <!-- <div class="language">
          <span @click="switchLocale('zh-CN')">中文</span
          ><span style="display:none" @click="switchLocale('en-US')">EN</span>
        </div> -->
      </div>
    </div>
    <div class="head-nav-content max-width-content">
      <ul :class="{ 'nav-item-box': true, isEn: isEn }" @mouseleave="navLeave">
        <template v-for="(item, index) in navData">
          <li :key="index">
            <div :class="getNameActive(item)">
              <template v-if="!item.path">
                <template v-if="item.click">
                  <span @click="showEnroll" v-html="item.name"></span>
                </template>
                <template v-else v-html="item.name"> </template>
              </template>
              <template v-else>
                <nuxt-link :to="item.path"> <div v-html="item.name"></div></nuxt-link>
              </template>
            </div>
            <div class="child-item" v-if="item.childern">
              <div class="one-level">
                <template v-for="(level2Item, level2Index) in item.childern">
                  <div
                    :class="$route.path === level2Item.path || level2Item.isShow ? 'li active' : 'li'"
                    :key="level2Index + 'level2'"
                    @mouseenter="levelShow(level2Item)"
                    @mouseleave="levelShow(level2Item, 'out')"
                  >
                    <div
                      @click="goPage(level2Item.path, level2Item.pathType)"
                      class="name"
                      v-html="level2Item.name"
                    ></div>
                    <div class="el-icon-arrow-right" v-if="level2Item.childern"></div>
                  </div>
                </template>
              </div>
              <template v-for="(level2Item, level2Index) in item.childern">
                <div
                  class="two-level"
                  :key="level2Index + 'two-level2'"
                  v-if="level2Item.isShow"
                  @mouseenter="level3Show"
                  @mouseleave="level3Show(level2Item, 'out')"
                >
                  <div
                    @click="goPage(level3Item.path, level3Item.pathType)"
                    class="name"
                    v-for="(level3Item, level3Index) in level2Item.childern"
                    :key="level3Index + level3Item"
                  >
                    {{ level3Item.name }}
                  </div>
                </div>
              </template>
            </div>
          </li>
        </template>
      </ul>
      <div class="search-box"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navData: [
        {
          name: this.$t('menu.about'),
          path: '/about/introduce',
          childern: [
            {
              name: this.$t('menu.aboutChild.about'),
              isShow: false,
              path: '/about/introduce'
            },
            {
              name: this.$t('menu.aboutChild.culture'),
              isShow: false,
              path: '/about/culture'
            },
            {
              name: this.$t('menu.aboutChild.news'),
              isShow: false,
              path: '/about/news'
            },

            {
              name: this.$t('menu.aboutChild.openLesson'),
              isShow: false,
              path: '/about/lesson'
            },
            {
              name: this.$t('menu.aboutChild.contact'),
              isShow: false,
              path: '/about/contact'
            }
          ]
        },
        {
          name: '实践基地',
          path: '/practice',
          childern: [
            {
              name: '数字经济产业学院',
              path: '/practice/industry'
            },
            {
              name: '数字经济实验室',
              path: '/practice/laboratory',
              childern: [
                {
                  name: '商业数据分析实验室',
                  path: '/practice/laboratory/analysis'
                },
                {
                  name: '数字营销实验室',
                  path: '/practice/laboratory/marketing'
                }
              ]
            },
            {
              name: ' 数字经济职业技能中心',
              path: '/practice/skill',
              childern: [
                {
                  name: '1+X金融产品数字化营销职业技能等级证书',
                  path: 'https://x.ezijing.com/index',
                  pathType: 1
                },
                {
                  name: '私人财富风险管理顾问',
                  path: 'https://prp.ezijing.com/index',
                  pathType: 1
                },
                {
                  name: '人社部职业证书',
                  path: 'https://vst.ezijing.com/',
                  pathType: 1
                }
              ]
            },
            {
              name: '数字经济产业&人才服务平台',
              path: '/practice/talent'
            },
            {
              name: '数字化转型高级研修项目',
              path: '/practice/study'

              // pathType: 3
            },
            {
              name: '服务案例',
              path: '/services/college/case'
            }
          ]
        },

        {
          name: '产业学院',
          path: '/services/college',
          childern: [
            {
              name: '紫荆E-SAAS平台',
              path: 'https://e-saas.ezijing.com/',
              pathType: 1
            },
            {
              name: '专业共建数字化改造',
              path: '/services/professional'
            },
            {
              name: '数字经济实验室',
              path: '/practice/laboratory',
              childern: [
                {
                  name: '商业数据分析实验室',
                  path: '/practice/laboratory/analysis'
                },
                {
                  name: '数字营销实验室',
                  path: '/practice/laboratory/marketing'
                }
              ]
            },
            {
              name: '教学研发',
              path: '/services/teach'
            },
            {
              name: '引产入校',
              path: '/services/school'
            },
            {
              name: '实习就业',
              path: '/services/employment'
            },
            {
              name: '落地案例',
              path: '/services/college/case'
            }
          ]
        },
        {
          name: '国际学位',
          path: '/internationalDegree',
          childern: [
            {
              name: this.$t('menu.degreeChild.master'),
              isShow: false,
              childern: [
                {
                  name: this.$t('menu.degreeChild.masterChild.msf'),
                  path: 'https://kelley.ezijing.com',
                  pathType: 1
                },
                {
                  name: this.$t('menu.degreeChild.masterChild.med'),
                  path: 'https://cu.ezijing.com',
                  pathType: 1
                },
                {
                  name: this.$t('menu.degreeChild.masterChild.map'),
                  path: 'https://ciis.ezijing.com',
                  pathType: 1
                },
                {
                  name: this.$t('menu.degreeChild.masterChild.jmed'),
                  path: ' https://cuw.ezijing.com/index',
                  pathType: 1
                }
                // {
                //   name: this.$t('menu.degreeChild.masterChild.paln'),
                //   path: 'https://cfflp.ezijing.com',
                //   pathType: 1
                // },
                // {
                //   name: this.$t('menu.degreeChild.masterChild.studyAbroadMaster'),
                //   path: 'https://marywood-plus.ezijing.com/',
                //   pathType: 1
                // }
                // {
                //   name: '金融学硕士1+1',
                //   path: 'https://sbu-plus.ezijing.com/',
                //   pathType: 1
                // }
              ]
            },
            {
              name: this.$t('menu.degreeChild.mba'),
              isShow: false,
              childern: [
                {
                  name: this.$t('menu.degreeChild.mbaChild.mba'),
                  path: 'http://marywood.ezijing.com/',
                  pathType: 1
                },
                // {
                //   name: this.$t('menu.degreeChild.mbaChild.finance'),
                //   path: 'https://sofia.ezijing.com',
                //   pathType: 1
                // },
                {
                  name: this.$t('menu.degreeChild.mbaChild.internatidnal'),
                  path: 'https://shms.ezijing.com',
                  pathType: 1
                },
                {
                  name: this.$t('menu.degreeChild.mbaChild.caas'),
                  path: 'https://caas.ezijing.com',
                  pathType: 1
                }
              ]
            }
          ]
        },
        {
          name: '留学深造',
          path: '/studyAbroad',
          childern: [
            {
              name: '硕士',
              isShow: false,
              childern: [
                {
                  name: '纽约州立大学石溪分校金融硕士保研项目',
                  path: 'https://sbu-plus.ezijing.com/',
                  pathType: 1
                },
                {
                  name: '斯蒂文斯理工学院工程管理硕士保研项目',
                  path: 'https://sit-plus.ezijing.com/',
                  pathType: 1
                }
              ]
            },
            {
              name: '博士',
              isShow: false,
              childern: [
                {
                  name: '加州浸会大学全日制工商管理博士项目（DBA）',
                  path: 'https://cbu-plus.ezijing.com/',
                  pathType: 1
                },
                {
                  name: '加州浸会大学在线工商管理博士项目（DBA）',
                  path: 'https://cbu-online.ezijing.com/',
                  pathType: 1
                }
              ]
            }
          ]
        },
        {
          name: '校友故事',
          path: '/alumnus/story'
          // childern: [
          //   {
          //     name: '数字化转型高级研修项目',
          //     // path: 'https://x.ezijing.com',
          //     pathType: 3
          //   },
          //   {
          //     name: '成功案例',
          //     path: '/services/college/case',
          //     pathType: 1
          //   }
          // ]
        }
      ],
      time: null,
      isEn: false
    }
  },
  mounted() {
    this.isEn = this.$cookies.get('lang') === 'en-US'
    this.$store.dispatch('checkLogin')
  },
  methods: {
    logout() {
      this.$store.dispatch('logout')
      window.location.reload()
    },
    switchLocale(locale) {
      this.$cookies.set('lang', locale, { domain: 'ezijing.com' })
      this.isEn = this.$cookies.get('lang') === 'en-US'
      process.client && 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 })
          }
        }
      }
    },
    levelShow(item, isOut) {
      if (item.childern) {
        if (isOut) {
          clearTimeout(this.time)
          this.time = setTimeout(() => {
            item.isShow = false
          }, 500)
          return
        }
        this.navLeave()
        item.isShow = true
      } else {
        this.navLeave()
      }
    },
    level3Show(item, isOut) {
      if (isOut) {
        item.isShow = false
      } else {
        clearTimeout(this.time)
      }
    },
    navLeave() {
      this.navData.map(item => {
        if (item.childern) {
          item.childern.map(cItem => {
            cItem.isShow = false
          })
        }
      })
      this.$forceUpdate()
    },
    showEnroll() {
      const dom = document.getElementById('show-enroll')
      const dom2 = document.getElementById('show-enroll-content')
      const dom3 = document.getElementById('show-enroll-wx')
      dom.style.display = 'block'
      dom2.style.display = 'block'
      dom3.style.display = 'none'
    }
  },
  computed: {
    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
        }
      }
    },
    user() {
      return this.$store.state.user || {}
    },
    loginURL() {
      return process.client
        ? `${process.env.loginURL}/login/index?redirect_uri=${encodeURIComponent(
            location.origin + this.$route.fullPath
          )}`
        : ''
    },
    registerURL() {
      return process.client
        ? `${process.env.loginURL}/register?redirect_uri=${encodeURIComponent(location.origin + this.$route.fullPath)}`
        : ''
    }
  }
}
</script>
<style lang="scss" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.head-mian {
  width: 100%;
  min-width: 1200px;
  background: #fff;
  .color-bar {
    height: 10px;
    background: #aa1941;
  }
  .head-top-content {
    // width: 1200px;
    // margin: 0 auto;
    border: 1px solid #ebebeb;
    padding: 23px 0 22px;
    .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;
      }
    }
  }
  .max-width-content {
    width: 1200px;
    margin: 0 auto;
  }
  .head-nav-content {
    height: 72px;
    display: flex;
    // align-items: center;
    .nav-item-box {
      padding-left: 11px;
      display: flex;
      li {
        position: relative;
        margin-right: 50px;
        .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 {
              // font-weight: 500;
              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;
            .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;
              }
            }
          }
        }
      }
    }
    .nav-item-box.isEn {
      li {
        margin-right: 20px;
        name {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
