<template>
  <li class="qf-nav-item" :class="[selected ? 'is-current' : '']"
      @click.stop.prevent="handleClick">
    <slot name="icon"></slot>
    <span class="qf-nav-item-title">
      <slot></slot>
    </span>
  </li>
</template>

<script>
export default {
  name: 'QfNavItem',
  inject: ['rootMenu', 'groupMenu'],
  props: {
    routerLink: String
  },
  data() {
    return {
      selected: false
    };
  },
  created() {
    this.groupMenu.addItem(this);
  },
  beforeDestroy() {
    this.groupMenu.removeItem(this);
  },
  methods: {
    handleClick() {
      this.rootMenu.$emit('itemClick', this);
      if (this.routerLink) {
        this.$router.push(this.routerLink);
      }
    }
  }
};
</script>
