<template>
  <ul class="nav-item-box" @mouseleave="navLeave">
    <template v-for="(item, index) in navData">
      <li>
        <div :class="getNameActive(item)">
          <template v-if="!item.path">
            <template v-if="item.onClick">
              <span @click="item.onClick">{{ item.name }}</span>
            </template>
            <template v-else>
              {{ item.name }}
            </template>
          </template>
          <template v-else>
            <nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
          </template>
        </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'"
                @mouseenter="levelShow(level2Item)"
                @mouseleave="levelShow(level2Item, 'out')"
              >
                <app-link :to="level2Item.path">
                  <div class="name">
                    {{ level2Item.name }}
                  </div>
                  <div class="el-icon-arrow-right" v-if="level2Item.children"></div>
                </app-link>
              </div>
            </template>
          </div>
        </div>
      </li>
    </template>
  </ul>
</template>
<script>
import AppLink from '@/components/Link'
export default {
  name: 'AppMenu',
  components: { AppLink },
  data() {
    const _this = this
    return {
      navData: [
        {
          name: '项目介绍',
          path: '/'
        },
        // 项目介绍
        {
          name: '清控国际学院',
          path: '/ezijing'
        },
        {
          name: '巴黎PPA商学院',
          path: '/ppa'
        },
        {
          name: '博士课程',
          path: '/course'
        },
        {
          name: '教授团队',
          path: '/team/tab1',
          children: [
            { name: '教授导师', path: '/team/tab1' },
            { name: '清华研究', path: '/team/tab2' }
          ]
        },
        {
          name: '教学安排',
          path: '/plan/tab1',
          children: [
            { name: '教学教务', path: '/plan/tab1' },
            { name: '学位颁授', path: '/plan/tab2' }
          ]
        },
        {
          name: '报名申请',
          path: '/apply/tab1',
          children: [
            { name: '学习费用', path: '/apply/tab1' },
            { name: '申请流程', path: '/apply/tab2' },
            { name: '在线报名', path: '/my/account' }
          ]
        }
        // 项目优势
        // {
        //   name: this.$t('menu.course'),
        //   path: '/about/course',
        //   children: [
        //     { name: this.$t('menu.courseChild.set'), path: '/about/course' },
        //     { name: this.$t('menu.courseChild.teachers'), path: '/about/teacher' }
        //   ]
        // },
        // 学校介绍
        // {
        //   name: this.$t('menu.school'),
        //   path: '/school/school3',
        //   children: [
        //     //   // { name: this.$t('menu.schoolChild.school1'), path: '/school/school1' },
        //     //   // { name: this.$t('menu.schoolChild.school2'), path: '/school/school2' },
        //     { name: this.$t('menu.schoolChild.school3'), path: '/school/school3' }
        //     // { name: this.$t('menu.courseChild.teachers'), path: '/about/teacher' }
        //   ]
        // },
        // 学历认证
        // {
        //   name: this.$t('menu.academic'),
        //   path: '/academic/academic'
        // },
        // // 报名流程
        // {
        //   name: this.$t('menu.enroll'),
        //   path: '/enroll/process',
        //   children: [
        //     { name: this.$t('menu.enrollChild.process'), path: '/enroll/process' },
        //     // { name: this.$t('menu.enrollChild.brochure'), path: '/enroll/brochure' },
        //     { name: this.$t('menu.enrollChild.apply'), path: '/enroll/apply' }
        //   ]
        // },
        // // 资料下载
        // {
        //   name: this.$t('menu.dataDownload'),
        //   path: '/dataDownload/dataDownload'
        // },
        // // 归国政策
        // {
        //   name: '就业福利',
        //   path: '/returnPolicy/returnPolicy',
        //   children: [
        //     { name: '高薪就业', path: '/returnPolicy/salary' },
        //     // { name: this.$t('menu.enrollChild.brochure'), path: '/enroll/brochure' },
        //     { name: '归国政策', path: '/returnPolicy/returnPolicy' }
        //   ]
        // },
        // // 常见问题
        // // {
        // //   name: this.$t('menu.question'),
        // //   path: '/question/question'
        // // },
        // // 报名申请
        // {
        //   name: this.$t('menu.apply'),
        //   path: '/my'
        // }
      ],
      time: null
    }
  },
  methods: {
    navLeave() {
      this.navData.map(item => {
        if (item.children) {
          item.children.map(cItem => {
            cItem.isShow = false
          })
        }
      })
      this.$forceUpdate()
    },
    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()
      }
    }
  },
  computed: {
    user() {
      return this.$store.state.user || {}
    },
    getNameActive() {
      return item => {
        const currentPath = this.$route.path
        // if (currentPath.includes(item.path)) {
        if (currentPath === item.path) {
          return 'name active'
        } else {
          let className = 'name'
          if (item.children) {
            item.children.map(cData => {
              currentPath.includes(cData.path) && (className = 'name active')
            })
          }
          return className
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.nav-item-box {
  display: flex;
  justify-content: space-between;
  li {
    position: relative;
    .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;
          }
        }
      }
    }
  }
}
</style>
