<template>
  <div
    class="qf-tab-pane"
    v-show="active"
    role="tabpanel"
    :aria-hidden="!active"
    :id="`pane-${paneName}`"
    :aria-labelledby="`tab-${paneName}`"
  >
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'QfTabPane',
    componentName: 'QfTabPane',

    props: {
      label: String,
      labelContent: Function,
      name: String,
      disabled: Boolean
    },

    data () {
      return {
        index: null
      };
    },

    computed: {
      active () {
        return this.$parent.currentName === (this.name || this.index);
      },
      paneName () {
        return this.name || this.index;
      }
    },

    mounted () {
      this.$parent.addPanes(this);
    },

    destroyed () {
      if (this.$el && this.$el.parentNode) {
        this.$el.parentNode.removeChild(this.$el);
      }
      this.$parent.removePanes(this);
    },

    watch: {
      label () {
        this.$parent.$forceUpdate();
      }
    }
  };
</script>
