<template>
  <div class="qf-tab-item" :class="[active ? 'is-active': '', `is-${ tabPosition }`]" @click="onClick">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'QfTabItem',

  inject: ['rootNav'],

  props: {
    label: String,
    name: String
  },

  computed: {
    active () {
      return this.rootNav.currentName === this.name;
    },
    paneName () {
      return this.name;
    },
    tabPosition() {
      return this.rootNav.tabPosition;
    }
  },

  created () {
    this.rootNav.addItem(this);
  },

  beforeDestroy () {
    this.rootNav.removeItem(this);
  },

  methods: {
    onClick(event) {
      this.rootNav.onClick(this, event);
      this.$emit('click');
    }
  }
};
</script>
