<template>
  <div class="qf-tabs">
    <tab-nav class="qf-tabs-header" :onTabClick="handleTabClick" :type="type" :activeName="currentName" :tabPosition="tabPosition"
             ref="nav"></tab-nav>
    <div class="qf-tabs-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import TabNav from './tab-nav';

export default {
  name: 'QfTabs',
  components: {
    TabNav
  },
  props: {
    type: String,
    activeName: String,
    value: {},
    tabPosition: {
      type: String,
      default: 'top'
    }
  },
  provide() {
    return {
      rootTabs: this
    };
  },
  data() {
    return {
      currentName: this.value || this.activeName,
      panes: []
    };
  },
  watch: {
    activeName(value) {
      this.setCurrentName(value);
    },
    value(value) {
      this.setCurrentName(value);
    }
  },
  methods: {
    handleTabClick(tab, tabName, event) {
      if (tab.disabled) return;
      this.setCurrentName(tabName);
      this.$emit('click', tab, event);
    },
    setCurrentName(value) {
      this.currentName = value;
      this.$emit('input', value);
    },
    addPanes(item) {
      const index = this.$slots.default.filter(item => {
        return item.elm.nodeType === 1 && /\bqf-tab-pane\b/.test(item.elm.className);
      }).indexOf(item.$vnode);
      this.$refs.nav.addItem(item, index);
    },
    removePanes(item) {
      if (this.$refs.nav) {
        this.$refs.nav.removeItem(item);
      }
    }
  }
};
</script>
