<template>
  <div class="head-main">
    <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')" :class="isEn === false ? 'cn' : ''">中文</span>/<span :class="isEn === true ? 'cn' : ''" @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)">
              <AppLink :to="item.path">{{ item.name }}</AppLink>
            </div>

            <div class="child-item" v-if="item.children">
              <div class="one-level">
                <template v-for="(level2Item, level2Index) in item.children">
                  <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" :class="isEn === true ? 'name1' : ''" v-html="level2Item.name"></div>
                    <div class="el-icon-arrow-right" v-if="level2Item.children"></div>
                  </div>
                </template>
              </div>
              <template v-for="(level2Item, level2Index) in item.children">
                <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="isEn === true ? 'name1' : 'name'"
                    v-for="(level3Item, level3Index) in level2Item.children"
                    :key="level3Index + level3Item">
                    {{ level3Item.name }}
                  </div>
                </div>
              </template>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
import AppLink from '@/components/Link'

export default {
  components: { AppLink },
  data() {
    return {
      navData: [
        {
          name: this.$t('menu.about'),
          path: '/about/introduce',
          children: [
            {
              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: '/digital/yx_1',
          children: [
            {
              name: '院校',
              isShow: false,
              children: [
                {
                  name: '数字技能实训中心',
                  path: '/digital/yx_1'
                },
                {
                  name: '数字经济实验室'
                  // path: '/digital/yx_2'
                },
                {
                  name: '专业数字化改造提升',
                  path: '/digital/yx_3'
                },
                {
                  name: '数字经济新商科产业学院',
                  path: '/digital/yx_2'
                },
                {
                  name: '未来技术产业学院',
                  path: '/digital/yx_2'
                },
                {
                  name: '1+X金融产品数字化营销',
                  path: 'https://x.ezijing.com',
                  pathType: 1
                }
              ]
            },
            {
              name: '政府',
              isShow: false,
              children: [
                {
                  name: '数字技能公共实训基地',
                  path: '/digital/zf_1'
                }
              ]
            },
            {
              name: '职业技能大赛'
              // path: '/digital/yx_4'
            }

            // {
            //   name: '企业',
            //   isShow: false,
            //   children: [
            //     {
            //       name: '全球数字领导力学者博士项目',
            //       path: 'https://dld.ezijing.com',
            //       pathType: 1
            //     },
            //     {
            //       name: '数字时代领航人才EMBA项目',
            //       path: 'https://marywood.ezijing.com',
            //       pathType: 1
            //     },
            //     {
            //       name: '企业人才定制化服务',
            //       path: ''
            //     }
            //   ]
            // }
          ]
        },
        // {
        //   name: this.$t('menu.base'),
        //   path: '/practice',
        //   children: [
        //     {
        //       name: this.$t('menu.baseChild.industry'),
        //       path: '/practice/industry',
        //       isShow: false
        //     },
        //     {
        //       name: this.$t('menu.baseChild.laboratory'),
        //       path: '/practice/laboratory',
        //       isShow: false,
        //       isShowChild: false,
        //       children: [
        //         {
        //           name: '商业数据分析实验室',
        //           path: '/practice/laboratory/analysis'
        //         },
        //         {
        //           name: '数字营销实验室',
        //           path: '/practice/laboratory/marketing'
        //         }
        //       ]
        //     },
        //     {
        //       name: this.$t('menu.baseChild.career'),
        //       path: '/practice/skill',
        //       isShow: false,
        //       isShowChild: false,
        //       children: [
        //         {
        //           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: this.$t('menu.baseChild.economy'),
        //       path: '/practice/talent',
        //       isShow: false
        //     },
        //     {
        //       name: this.$t('menu.baseChild.degital'),
        //       path: '/practice/study',
        //       isShow: false
        //     },
        //     {
        //       name: this.$t('menu.baseChild.example'),
        //       isShow: false,
        //       path: '/services/college/case'
        //     }
        //   ]
        // },

        // {
        //   name: this.$t('menu.industrial'),
        //   path: '/services',
        //   children: [
        //     {
        //       name: this.$t('menu.industrialChild.saas'),
        //       path: 'https://e-saas.ezijing.com/',
        //       pathType: 1,
        //       isShow: false
        //     },
        //     {
        //       name: this.$t('menu.industrialChild.professional'),
        //       path: '/services/professional',
        //       isShow: false
        //     },
        //     {
        //       name: this.$t('menu.industrialChild.laboratory'),
        //       path: '/practice/laboratory',
        //       isShow: false,
        //       isShowChild: false,

        //       children: [
        //         {
        //           name: this.$t('menu.industrialCollegeChild.data'),
        //           path: '/practice/laboratory/analysis'
        //         },
        //         {
        //           name: '数字营销实验室',
        //           path: '/practice/laboratory/marketing'
        //         }
        //       ]
        //     },
        //     {
        //       name: this.$t('menu.industrialChild.teach'),
        //       path: '/services/teach',
        //       isShow: false
        //     },
        //     {
        //       name: this.$t('menu.industrialChild.school'),
        //       path: '/services/school',
        //       isShow: false
        //     },
        //     {
        //       name: this.$t('menu.industrialChild.employment'),
        //       path: '/services/employment',
        //       isShow: false
        //     },
        //     {
        //       name: this.$t('menu.industrialChild.example'),
        //       path: '/services/college/case',
        //       isShow: false
        //     }
        //   ]
        // },
        {
          name: this.$t('menu.degree'),
          path: '/internationalDegree',
          children: [
            {
              name: this.$t('menu.degreeChild.master'),
              isShow: false,
              children: [
                {
                  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: 'EMBA',
              isShow: false,
              children: [
                {
                  name: '领航数字时代EMBA',
                  path: 'http://marywood.ezijing.com/',
                  pathType: 1
                }
              ]
            },
            {
              name: this.$t('menu.degreeChild.mba'),
              isShow: false,
              children: [
                {
                  name: this.$t('menu.degreeChild.mbaChild.mba'),
                  path: 'http://marywood.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: '工商管理博士DBA',
              isShow: false,
              children: [
                {
                  name: '全球科技创新管理学者项目',
                  path: 'https://cbu-online.ezijing.com/',
                  pathType: 1
                }
              ]
            },
            {
              name: '企业家学者DBA',
              isShow: false,
              children: [
                {
                  name: '数字领导力企业家学者（DBA）',
                  path: 'https://dld.ezijing.com/',
                  pathType: 1
                }
              ]
            }
          ]
        },
        {
          name: this.$t('menu.abroad'),
          path: '/studyAbroad',
          children: [
            {
              name: this.$t('menu.degreeChild.master'),
              isShow: false,
              children: [
                {
                  name: this.$t('menu.degreeChild.masterChild.sbu'),
                  path: 'https://sbu-plus.ezijing.com/',
                  pathType: 1
                },
                {
                  name: this.$t('menu.degreeChild.masterChild.sit'),
                  path: 'https://sit-plus.ezijing.com/',
                  pathType: 1
                },
                {
                  name: '德保罗大学金融学硕士保研项目',
                  path: 'https://depaul-plus.ezijing.com/',
                  pathType: 1
                },
                {
                  name: '迈阿密大学硕士保研项目',
                  path: 'https://umiami-plus.ezijing.com/',
                  pathType: 1
                }
              ]
            },
            {
              name: this.$t('menu.degreeChild.doctor'),
              isShow: false,
              children: [
                {
                  name: this.$t('menu.degreeChild.doctorChild.cbu_plus'),
                  path: 'https://cbu-plus.ezijing.com/',
                  pathType: 1
                }
                // {
                //   name: this.$t('menu.degreeChild.doctorChild.cbu_online'),
                //   path: 'https://cbu-online.ezijing.com/',
                //   pathType: 1
                // }
              ]
            }
          ]
        },
        {
          name: '职业认证',
          children: [
            {
              name: '1+X金融产品数字化营销',
              path: 'https://x.ezijing.com',
              pathType: 1
            },
            {
              name: '私人财富风险管理(PRP)课程',
              path: 'https://prp.ezijing.com',
              pathType: 1
            },
            {
              name: '金融保险（FI）系列课程',
              path: 'https://paa.ezijing.com',
              pathType: 1
            }
          ]
        },
        {
          name: this.$t('menu.story'),
          path: '/alumnus/story',
          isShow: false
        }
      ],
      time: null,
      isEn: false
    }
  },
  mounted() {
    this.isEn = this.$cookies.get('lang') === 'en-US'
    this.$store.dispatch('checkLogin')
    if (this.isEn) {
      this.navData.map(item => {
        item?.children?.map(it => {
          if (it.isShowChild === false) {
            it.children = ''
          }
          return it
        })
        return item
      })
    }
  },
  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 && 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 })
          }
        }
      }
    },
    levelShow(item, isOut) {
      if (item.children) {
        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.children) {
          item.children.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.children) {
            item.children.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-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>
