<template>
  <ul class="nav-item-box" @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">{{ 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.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')"
              >
                <app-link :to="level2Item.path">
                  <div class="name">
                    {{ level2Item.name }}
                  </div>
                  <div class="el-icon-arrow-right" v-if="level2Item.childern"></div>
                </app-link>
              </div>
            </template>
          </div>
        </div>
      </li>
    </template>
  </ul>
</template>
<script>
import AppLink from '@/components/Link'
export default {
  name: 'AppMenu',
  components: { AppLink },
  data() {
    return {
      navData: [
        {
          name: this.$t('menu.project'),
          path: '/project-intro/bg',
          childern: [
            { name: this.$t('menu.projectChild.bg'), path: '/project-intro/bg' },
            { name: this.$t('menu.projectChild.feature'), path: '/project-intro/charac' },
            { name: this.$t('menu.projectChild.cert'), path: '/project-intro/certificate' }
          ]
        },
        {
          name: this.$t('menu.course'),
          path: '/about/course',
          childern: [
            { name: this.$t('menu.courseChild.set'), path: '/about/course' },
            { name: this.$t('menu.courseChild.teachers'), path: '/about/teacher' }
          ]
        },
        {
          name: this.$t('menu.news'),
          path: '/news/hot',
          childern: [
            { name: this.$t('menu.newsChild.hot'), path: '/news/hot' },
            { name: this.$t('menu.newsChild.interview'), path: '/news/interview' }
          ]
        },
        {
          name: this.$t('menu.recruit'),
          path: '/apply/relevant',
          childern: [
            { name: this.$t('menu.recruitChild.apply'), path: '/apply/relevant' },
            { name: this.$t('menu.recruitChild.cost'), path: '/apply/support' },
            { name: this.$t('menu.recruitChild.problem'), path: '/apply/problem' }
          ]
        },
        {
          name: this.$t('menu.alumni'),
          path: '/alumni/outstanding',
          childern: [
            { name: this.$t('menu.alumniChild.outstanding'), path: '/alumni/outstanding' },
            { name: this.$t('menu.alumniChild.share'), path: '/alumni/sharing' }
          ]
        },
        {
          name: this.$t('menu.enroll'),
          path: '/my/account'
        }
      ],
      time: null
    }
  },
  methods: {
    navLeave() {
      this.navData.map(item => {
        if (item.childern) {
          item.childern.map(cItem => {
            cItem.isShow = false
          })
        }
      })
      this.$forceUpdate()
    },
    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()
      }
    }
  },
  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 => {
              currentPath.includes(cData.path) && (className = 'name active')
            })
          }
          return className
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.nav-item-box {
  padding-left: 11px;
  display: flex;
  li {
    position: relative;
    margin-right: 60px;
    .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>
