<template>
  <!--有子项-->
  <div
    v-if="tabMenuHandler(navItem, true)"
    class="bio-menu-submenu"
    :class="[
      `level-${navItem.level}`,
      {collapse: navItem.collapse},
    ]">
    <el-popover
      trigger="hover"
      placement="right-start"
      transition="el-zoom-in-left"
      popper-class="bio-menu-subpop"
      :open-delay="300"
      :disabled="!collapse">
      <div class="bio-menu-pop-ul">
        <menuPopItem
          v-for="(secondNav, secondNavIndex) in navItem.children"
          :key="secondNavIndex"
          :nav-item="secondNav"
          :defaultActive="defaultActive"
          @clickMenuItem="clickMenuItem"/>
      </div>

      <template slot="reference">
        <menuItemTile
          :navItem="navItem"
          :collapse="collapse"
          :defaultActive="defaultActive"
          :iconKey="iconKey"
          @clickHandler="collapseHandler"/>
      </template>
    </el-popover>

    <i class="bio-menu-arrow"></i>

    <el-collapse-transition v-if="navItem.children">
      <div v-show="navItem.collapse" class="bio-menu-submenu__box">
        <bio-menu-item
          v-for="(secondNav, secondNavIndex) in navItem.children"
          :key="secondNavIndex"
          :nav-item="secondNav"
          :defaultActive="defaultActive"
          @clickMenuItem="clickMenuItem"/>
      </div>
    </el-collapse-transition>
  </div>

  <!--无子项-->
  <div
    v-else
    class="bio-menu-item"
    :class="`level-${navItem.level}`"
    @click="clickMenuItem(navItem)">
    <menuItemTile
      :navItem="navItem"
      :collapse="collapse"
      :defaultActive="defaultActive"
      :iconKey="iconKey"
      @clickHandler="collapseHandler"/>
  </div>
</template>

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

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

  components: {
    menuItemTile,
    menuPopItem
  },

  mixins: [
    utilsM
  ],

  methods: {
    collapseHandler() {
      if (this.navItem.children && this.navItem.children.length) {
        const collapse = !!this.navItem.collapse;
        this.$set(this.navItem, 'collapse', !collapse);
      }
    }
  }
};
</script>

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

.bio-menu-submenu {
  position: relative;

  &.collapse {
    & > .bio-menu-arrow {
      transform: translateY(3px);
      &:before {
        transform: rotate(-45deg) translateX(2.5px);
      }

      &:after {
        transform: rotate(45deg) translateX(-2.5px);
      }
    }
  }

  & > .bio-menu-arrow {
    top: 20px;
    transition: transform linear .3s;
    @media (max-width:1400px) {
      top: 18px;
    }
  }

  .bio-menu-arrow {
    position: absolute;
    right: 20px;
    width: 10px;

    &:before, &:after {
      content: '';
      position: absolute;
      width: 6px;
      height: 1px;
      background-color: #666;
      border-radius: 2px;
      transition: background .3s cubic-bezier(.645,.045,.355,1),transform .3s cubic-bezier(.645,.045,.355,1),top .3s cubic-bezier(.645,.045,.355,1),color .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1);
    }

    &:before {
      transform: rotate(45deg) translateX(2.5px);
    }

    &:after {
      transform: rotate(-45deg) translateX(-2.5px);
    }
  }
}

.bio-menu-subpop {
  padding: 0;
}

.bio-menu-pop-ul {
  padding: 5px;
  max-height: 400px;
  overflow: auto;
  @include scrollbar;
}
</style>
