<template>
  <!--有子项-->
  <div class="menu-pop-sub" v-if="tabMenuHandler(navItem)">
    <div
      class="bio-menu-pop-li"
      :class="[
      `level-${navItem.level}`,
      {'is-active': isActive}
    ]"
      @click="clickMenuItem(navItem)">
      {{navItem.name}}
    </div>

    <div v-if="navItem.children" class="menu-pop-sub__box">
      <menu-pop-item
        v-for="(secondNav, secondNavIndex) in navItem.children"
        :key="secondNavIndex"
        :nav-item="secondNav"
        :defaultActive="defaultActive"
        @clickMenuItem="clickMenuItem"/>
    </div>
  </div>

  <!--无子项-->
  <div
    v-else
    class="bio-menu-pop-li"
    :class="[
      `level-${navItem.level}`,
      {'is-active': isActive}
    ]"
    @click="clickMenuItem(navItem)">
    {{navItem.name}}
  </div>
</template>

<script>
import utilsM from './mixins/utilsM';

export default {
  name: 'menu-pop-item',

  mixins: [
    utilsM
  ]
};
</script>

<style lang="scss">
@import "../../theme-chalk/src/bio-scss/variables";

.bio-menu-pop-li {
  padding: 6px 10px;
  width: 180px;
  border-radius: 2px;
  font-size: 14px;
  @media (max-width:1400px) {
    font-size: 12px;
    width: 160px;
  }
  @include only-one-line;

  &:hover, &:focus {
    color: $main-color;
    cursor: pointer;
  }

  &.is-active {
    color: $main-color;
    font-weight: 600;
  }
}

.menu-pop-sub__box {
  .bio-menu-pop-li {
    padding-left: 30px;
  }
}
</style>
