<template>
  <div :class="b('pane')"
       v-show="isSelected">
    <slot v-if="slotInited" />
  </div>
</template>

<script>


import { Component,FindParent } from 'eye-core';

export default Component({

  name: 'tab',

  mixins: [ FindParent ],

  props: {
    title: String,
    disabled: Boolean
  },

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

  computed: {
    index() {
      return this.parent ? this.parent.tabs.indexOf(this) : 0;
    },

    isSelected() {
      return this.parent ? this.index === this.parent.curActive : false;
    }
  },

  watch: {
    'parent.curActive'() {
      if (this.isSelected) {
        this.slotInited = true;
      }
    }
  },

  onCreate() {
    this.findParent('eye-tabs');
    this.parent.tabs.push(this);
  },

  onDestroy() {
    this.parent.tabs.splice(this.index, 1);
  }
});
</script>
