<template>
  <ul class="nav-item-box" @mouseleave="navLeave">
    <!-- <template v-for="(item, index) in navData"> -->
    <li v-for="(item, index) in navData" :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>
            <div
              v-for="(level2Item, level2Index) in item.childern"
              :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: '/emba'
        },
        {
          name: this.$t('menu.course'),
          path: '/training'
        },
        {
          name: this.$t('menu.news'),
          path: '/contact'
        }
      ],
      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>
