<template>
  <div v-if="isActive" :class="`${$classPrefix}-tab-item`">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "IrbisTabItem",

  props: {
    label: String,
    disabled: Boolean,
    icon: String,
    closeable: Boolean
  },

  data() {
    return {
      isActive: false
    };
  },

  created() {
    if (!this.$parent.$data._isTabs) {
      this.$destroy();
      throw new Error("Use Tab only in Tabs component");
    }
    this.$parent.$data.tabs.push(this);
  },

  methods: {
    show() {
      this.isActive = true;
    },

    hide() {
      this.isActive = false;
    }
  },

  beforeDestroy() {
    const index = this.$parent.tabs.indexOf(this);
    if (index >= 0) {
      this.$parent.tabs.splice(index, 1);
    }
  }
};
</script>