<template>
  <el-tooltip
    placement="right"
    popper-class="bio-menu__tip"
    :disabled="!!disabled"
    :open-delay="400"
    effect="dark"
    :content="navItem.name">
    <div
      class="bio-menu-title"
      :class="[
        `level-${navItem.level}`,
        {sub: navItem.children && navItem.children.length},
        {'is-active': isActive}
      ]"
      @click="clickHandler()">

      <!--icon-->
      <i v-if="navItem.level === '1'"
         class="bio-font bio-menu__icon"
         :class="'bio-icon__' + (navItem[iconKey] || 'position')"/>

      <!--占位元素，体现缩进-->
      <i v-if="navItem.level === '2'" class="bio-menu__icon level2"/>

      <i v-if="navItem.level === '3'" class="bio-menu__icon level3"/>

      <span class="bio-menu-title__text only-one-line">
        {{navItem.name}}
      </span>
    </div>
  </el-tooltip>
</template>

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

export default {
  name: 'menuItemTile',

  mixins: [
    utilsM
  ],

  computed: {
    disabled() {
      return !this.collapse || this.navItem.children && this.navItem.children.length && !this.navItem.children.filter((value)=>{ return value.type === '4'; }).length;
    }
  },

  methods: {
    clickHandler() {
      this.$emit('clickHandler');
    }
  }
};
</script>

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

@mixin bio-menu-height ($height: 48px, $heightMini: 48px) {
  height: $height;
  line-height: $height;
  @media (max-width:1400px) {
    height: $heightMini;
    line-height: $heightMini;
  }
}

$bio-menu-tip-color: lighten($main-color, 30%);

.bio-menu-title {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  @include bio-menu-height(36px, 30px);

  &.level-1 {
    font-size: 16px;
  }

  &.sub, &.level-1 {
    @include bio-menu-height;
  }

  &:hover, &:focus {
    background-color: #E6EEFF;
    cursor: pointer;
  }
}

.bio-menu__icon {
  display: inline-flex;
  align-items: center;
  width: 30px;
  height: 100%;
  font-size: 16px;
  &.level3 {
    width: 50px;
  }
}

.bio-menu-title__text {
  width: calc(100% - 30px);
}

.bio-menu__tip {
  background-color: $bio-menu-tip-color !important;
  color: #fff !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);

  &.is-dark {
    background: $bio-menu-tip-color;

    &[x-placement^=bottom] {
      .popper__arrow {
        border-bottom-color: $bio-menu-tip-color;
      }
    }

    &[x-placement^=top] {
      .popper__arrow {
        border-top-color: $bio-menu-tip-color;
      }
    }

    &[x-placement^=left] {
      .popper__arrow {
        border-left-color: $bio-menu-tip-color;
      }
    }

    &[x-placement^=right] {
      .popper__arrow {
        border-right-color: $bio-menu-tip-color;
      }
    }

    &[x-placement^=bottom] {
      .popper__arrow::after {
        border-bottom-color: $bio-menu-tip-color;
      }
    }

    &[x-placement^=top] {
      .popper__arrow::after {
        border-top-color: $bio-menu-tip-color;
      }
    }

    &[x-placement^=left] {
      .popper__arrow::after {
        border-left-color: $bio-menu-tip-color;
      }
    }

    &[x-placement^=right] {
      .popper__arrow::after {
        border-right-color: $bio-menu-tip-color;
      }
    }
  }
}
</style>
