<template>
  <nav class="app-menu">
    <ul>
      <tree-item :item="item" v-for="(item, index) in list" :key="index" class="first"></tree-item>
      <template>
        <client-only>
          <div class="login_con">
            <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>
          </div>
        </client-only>
      </template>
      <!-- <div class="tool-box" @click="switchLocale">
        <div class="item">
          <div class="icon"></div>
          <div class="text">中文/EN</div>
        </div>
      </div> -->
    </ul>
  </nav>
</template>

<script>
import TreeItem from '@/components/TreeItem'
export default {
  components: { TreeItem },
  computed: {
    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)}`
        : ''
    }
  },
  data() {
    return {
      list: [
        {
          name: this.$t('menu.about'),
          children: [
            { name: this.$t('menu.aboutChild.about'), path: '/about/introduce' },
            { name: this.$t('menu.aboutChild.culture'), path: '/about/culture' },
            { name: this.$t('menu.aboutChild.news'), path: '/about/news' },
            { name: this.$t('menu.aboutChild.msg'), path: '/about/message' },
            { name: this.$t('menu.aboutChild.openLesson'), path: '/about/lesson' },
            { name: this.$t('menu.aboutChild.contact'), path: '/about/contact' }
          ]
        },
        // {
        //   name: this.$t('menu.services'),
        //   children: [
        //     {
        //       name: this.$t('menu.servicesChild.cert'),
        //       children: [
        //         { name: this.$t('menu.servicesChild.career'), path: '/services/job' },
        //         { name: this.$t('menu.servicesChild.program'), path: '/services/major' },
        //         { name: this.$t('menu.servicesChild.x'), href: 'https://x.ezijing.com' }
        //         // { name: '数字金融客户服务证书', onClick: this.showTips },
        //         // { name: '酒店及旅游业的数字化营销证书', onClick: this.showTips },
        //         // { name: '青少年儿童心理以及行为指导证书', onClick: this.showTips }
        //       ]
        //     },
        //     {
        //       name: this.$t('menu.servicesChild.college'),
        //       children: [
        //         { name: this.$t('menu.servicesChild.collegeChild.college'), path: '/services/college' },
        //         { name: this.$t('menu.servicesChild.highLevel'), path: '/services/employment' },
        //         { name: this.$t('menu.servicesChild.collegeChild.saas'), href: 'https://x-learning.ezijing.com' }
        //       ]
        //     },
        //     {
        //       name: this.$t('menu.servicesChild.online'),
        //       children: [
        //         { name: this.$t('menu.servicesChild.onlineChild.core'), path: '/services/solution' },
        //         { name: this.$t('menu.servicesChild.onlineChild.prp'), href: 'https://prp.ezijing.com/' }
        //         // { name: this.$t('menu.servicesChild.onlineChild.joint'), onClick: this.showTips }
        //       ]
        //     }
        //   ]
        // },
        {
          name: this.$t('menu.industrialCollege'),
          children: [
            {
              name: this.$t('menu.industrialCollegeChild.corePower'),
              path: '/services/college'
            },
            {
              name: this.$t('menu.industrialCollegeChild.program'),
              path: '/services/major'
            },
            {
              name: this.$t('menu.industrialCollegeChild.saas'),
              href: 'https://e-saas.ezijing.com'
            },
            {
              name: this.$t('menu.industrialCollegeChild.internship'),
              path: '/services/employment'
            },
            {
              name: '商业数据分析实验室',
              path: '/services/dataAnalysis'
            }
          ]
        },
        {
          name: this.$t('menu.degree'),
          path: '/internationalDegree',
          children: [
            // {
            //   name: this.$t('menu.degreeChild.bachelor'),
            //   children: [{ name: this.$t('menu.degreeChild.bachelorChild.shms'), onClick: this.showTips }]
            // },
            {
              name: this.$t('menu.degreeChild.master'),
              children: [
                { name: this.$t('menu.degreeChild.masterChild.msf'), href: 'https://kelley.ezijing.com' },
                { name: this.$t('menu.degreeChild.masterChild.med'), href: 'https://cu.ezijing.com' },
                { name: this.$t('menu.degreeChild.masterChild.map'), href: 'https://ciis.ezijing.com' }
                // {
                //   name: this.$t('menu.degreeChild.masterChild.studyAbroadMaster'),
                //   href: 'https://marywood-plus.ezijing.com'
                // },
                // { name: '金融学硕士1+1', href: 'https://sbu-plus.ezijing.com' }
              ]
            },
            {
              name: this.$t('menu.degreeChild.mba'),
              children: [
                { name: this.$t('menu.degreeChild.mbaChild.mba'), href: 'https://marywood.ezijing.com' },
                // { name: this.$t('menu.degreeChild.mbaChild.finance'), href: 'https://sofia.ezijing.com' },
                { name: this.$t('menu.degreeChild.mbaChild.internatidnal'), href: 'https://shms.ezijing.com' },
                { name: this.$t('menu.degreeChild.mbaChild.caas'), href: 'https://caas.ezijing.com' }
              ]
            }
            // {
            //   name: this.$t('menu.degreeChild.doctor'),
            //   children: [
            //     // { name: this.$t('menu.degreeChild.doctorChild.dba'), onClick: this.showTips },
            //     { name: this.$t('menu.degreeChild.doctorChild.edd'), href: 'https://cbu-plus.ezijing.com' },
            //     { name: this.$t('menu.degreeChild.doctorChild.studyAbroad'), onClick: this.showTips }
            //   ]
            // }
          ]
        },
        // {
        //   name: this.$t('menu.onlineEdu'),
        //   children: [
        //     {
        //       name: this.$t('menu.onlineEduChild.service'),
        //       path: '/services/solution'
        //     },
        //     {
        //       name: this.$t('menu.onlineEduChild.prp'),
        //       href: 'https://prp.ezijing.com/'
        //     }
        //   ]
        // },
        {
          name: '留学中心',
          path: '/studyAbroad',
          children: [
            {
              name: '国际大一1+3（即将推出）',
              onClick: this.showTips
            },
            {
              name: '工商管理硕士1+1',
              href: 'https://marywood-plus.ezijing.com/'
            },
            {
              name: '管理信息系统硕士1+1',
              href: 'https://marywood-plus.ezijing.com/'
            },
            {
              name: '金融学硕士1+1',
              href: 'https://sbu-plus.ezijing.com/'
            },
            {
              name: this.$t('menu.degreeChild.doctorChild.edd'),
              href: 'https://cbu-plus.ezijing.com'
            }
          ]
        },
        {
          name: this.$t('menu.industrialCollegeChild.cert'),
          path: '/services/job',
          children: [
            {
              name: this.$t('menu.industrialCollegeChild.x'),
              href: 'https://x.ezijing.com'
            },
            {
              name: this.$t('menu.onlineEduChild.prp'),
              href: 'https://prp.ezijing.com/'
            },
            {
              name: '高管培训（数字创新管理）',
              onClick: this.showTips
            }
          ]
        },
        {
          name: this.$t('menu.alumni'),
          children: [
            { name: this.$t('menu.alumniChild.alumni'), path: '/alumnus' },
            { name: this.$t('menu.alumniChild.alumniZijinghua'), path: '/alumnus/flower' },
            { name: this.$t('menu.alumniChild.alumniStory'), path: '/alumnus/story' },
            { name: this.$t('menu.alumniChild.roadmap'), path: '/roadmap' }
            // { name: '校友风采', path: '/alumnus/style' }
          ]
        }
        // {
        //   name: this.$t('menu.apply'),
        //   onClick: () => {
        //     this.$emit('showApplyForm')
        //   }
        // }
      ]
    }
  },
  methods: {
    showTips() {
      this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
    },
    switchLocale() {
      const lang = this.$store.state.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
      this.$cookies.set('lang', lang, { domain: 'ezijing.com' })
      process.client && location.reload()
    },
    logout() {
      this.$store.dispatch('logout')
    }
  },
  mounted() {
    this.$store.dispatch('checkLogin')
  }
}
</script>

<style lang="scss">
.app-menu {
  // position: fixed;
  // left: 0;
  // right: 0;
  // top: 0.62rem;
  // bottom: 0;
  padding: 0 0.15rem;
  min-height: 100vh;
  background-color: #fff;
  .first > .cell .cell-title {
    font-size: 0.14rem;
    font-weight: bold;
  }
  .first > .tree-item-group {
    padding: 0;
  }
}
.tool-box {
  padding: 0.85rem 0;
  display: flex;
  justify-content: center;
  background: #fff;
  .item {
    .icon {
      width: 0.5rem;
      height: 0.5rem;
      background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/change-lang.png);
      background-size: 100% 100%;
      margin: 0 auto;
    }
    .text {
      font-size: 0.14rem;
      line-height: 100%;
      color: #999999;
      margin-top: 0.1rem;
      text-align: center;
    }
  }
}
.login_con {
  margin-top: 0.5rem;
  padding-left: 1rem;
  .user {
    margin-left: auto;
    font-size: 0.07rem;
    em {
      font-size: 0.07rem;
      font-style: normal;
      padding: 0 0.07rem;
    }
    .logout {
      cursor: pointer;
    }
  }
  .login-btn-box {
    margin-left: auto;
    display: flex;
    div {
      width: 0.72rem;
      height: 0.24rem;
      box-sizing: border-box;
      text-align: center;
      line-height: 0.24rem;
      font-size: 0.08rem;
      border-radius: 6px;
      margin-left: 0.1rem;
      cursor: pointer;
    }
    .login {
      background: #aa1941;
      color: #fff;
      cursor: pointer;
    }
    .register {
      color: #333333;
      border: 1px solid #eaeaea;
      cursor: pointer;
    }
  }
}
</style>
