
<template>
  <div ref="container" style="side-tab">
    <div>
      <sticky :container="container" :disabled="!sticky">
        <sideBar style="float:left" v-model="currentIndex" @change="onChange">
          <sidebarItem
            v-for="item in children"
            :key="item._index"
            :dot="item.dot"
            :info="item.info"
            :title="item.title"
            :disabled="item.disabled"
            :url="showAll === true ? ('#' + item.computedName) : ''"
          ></sidebarItem>
        </sideBar>
      </sticky>
    </div>
    <div :style="contentStyle">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import { ParentMixin } from '../mixins/relation';
import { createNamespace, isDef, addUnit } from '../utils';
import sticky from '../sticky'
import sideBar from '../sidebar'
import sidebarItem from '../sidebar-item'
export default {
  name: 'SideTabs',
  mixins: [ParentMixin('sideTabs')],
  components: {
    sticky,
    sideBar,
    sidebarItem
  },
  /**
   * 当前导航项的索引
   */
  model: {
    prop: 'active'
  },
  props: {
    /**
     * 当前导航项的索引
     */
    active: {
      type: [Number, String],
      default: 0
    },
    /**
     * 是否使用粘性定位布局
     */
    sticky: {
      type: Boolean,
      default: false
    },
    /**
     * 是否一屏显示所有内容
     */
    showAll: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      // 当前索引
      currentIndex: 0, // 传给sideBar后会实时更新
      // 旧的索引
      oldIndex: null,
      container: null
    };
  },
  computed: {
    contentStyle() {
      var style = 'padding-left:85px;';

      if (this.children && this.children.length > 0) {
        style += `min-height:${this.children.length * 60}px`;
      }

      return style;
    },

    currentName() {
      const activeTab = this.children[this.currentIndex];

      if (activeTab) {
        return activeTab.computedName;
      }
    }
  },
  watch: {
     active(name) {
      if (name !== this.currentName) {
        this.setCurrentIndexByName(name);
      }
    },

    children() {
      this.setCurrentIndexByName(this.currentName || this.active);
    },
  },
  mounted() {
    if(this.sticky){
      
    }
   
  },
  methods: {
     // correct the index of active tab
    setCurrentIndexByName(name) {
      const matched = this.children.filter(tab => tab.computedName === name);
      const defaultIndex = (this.children[0] || {}).index || 0;
      this.setCurrentIndex(matched.length ? matched[0].index : defaultIndex);
    },

    setCurrentIndex(currentIndex) {
      currentIndex = this.findAvailableTab(currentIndex);

      if (isDef(currentIndex) && currentIndex !== this.oldIndex) {
        const shouldEmitChange = this.currentIndex !== null;
        // this.currentIndex = currentIndex; 
        this.oldIndex = currentIndex;
        this.$emit('input', this.currentName);

        if (shouldEmitChange) {
          this.$emit('change', this.currentName, this.children[currentIndex].title, currentIndex);
        }
      }
    },

    findAvailableTab(index) {
      const diff = index < this.currentIndex ? -1 : 1;

      while (index >= 0 && index < this.children.length) {
        if (!this.children[index].disabled) {
          return index;
        }

        index += diff;
      }
    },
    onChange(index) {
      this.setCurrentIndex(index);
    }
  }
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>