let baseTabsMixin, baseTabPaneMixin;

baseTabsMixin = {
  props: {
    value: {
      type: [String, Number]
    }
  },
  data: function () {
    return {
      currentValue: this.value,
      navList: []
    };
  },
  methods: {
    tabCls: function (item) {
      return [
        'tabs-tab',
        {
          'tabs-tab-active': item.name === this.currentValue
        }
      ];
    },
    //遍历所有为pane的子元素
    getTabs() {
      let list = [];
      if (this.$slots.default) {
        this.$slots.default.filter(item => {
          return item.child !== undefined && item.child !== null;
        }).map(item => item.child).forEach(item => {
          if (item.$options.name === 'baseTabPane') {
            list.push(item);
          } else if (item.$attrs.tabPaneGrade === '2' || item.$attrs.tabPaneGrade === 2) {
            let items = item.$children.filter(function (thirdItem) {
              return thirdItem.$options.name === 'baseTabPane';
            });
            list.push(...items);
          }
        });
      }
      return list;
    },
    //将pane子元素中label name放进navList数组
    updateNav() {
      let navList = [];
      let _this = this;
      this.getTabs().forEach(function (pane, index) {
        navList.push({
          label: pane.label,
          name: pane.name || index,
          visible: pane.visible
        });

        // if (!pane.name) pane.name = index;
        if (index === 0) {
          if (!_this.currentValue) {
            _this.currentValue = pane.name || index;
          }
        }
      });
      this.navList = navList;
      this.updateStatus();
    },
    updateStatus() {
      let tabs = this.getTabs();
      let _this = this;
      //显示当前正在选中的
      tabs.forEach(function (tab) {
        return (tab.show = tab.name === _this.currentValue);
      });
    },
    handleChange: function (index) {
      let nav = this.navList[index];
      let name = nav.name;
      this.currentValue = name;
      this.$emit('input', name);
      this.$emit('on-click', name);
      this.getTabs()[index].$el.scrollIntoView();
    }
  },
  watch: {
    value: function (val) {
      this.currentValue = val;
    },
    currentValue: function () {
      this.updateStatus();
    }
  }
};

baseTabPaneMixin = {
  props: {
    name: {
      type: String
    },
    label: {
      type: String,
      default: ''
    },
    showFold: {
      type: Boolean,
      default: false
    },
    defaultShowContent: {
      type: Boolean,
      default: true
    },
    visible: {
      type: Boolean,
      default: undefined
    }
  },
  computed: {
    foldClass() {
      return this.showContent ? 'el-icon-arrow-up' : 'el-icon-arrow-down';
    }
  },
  beforeDestroy() {
    let navList = this.getParent().navList;
    if (navList.length <= 1) {
      this.updateNav();
    }
  },
  created() {
    if (this.showFold) {
      this.showContent = this.defaultShowContent;
    }
  },
  data: function () {
    return {
      show: true,
      showContent: true
    };
  },
  methods: {
    getParent() {
      if (this.$parent.$options.name === 'baseTabs') {
        return this.$parent;
      } else if (this.$parent.$parent && this.$parent.$parent.$options.name === 'baseTabs') {
        return this.$parent.$parent;
      }
    },
    updateNav() {
      let parentPanel = this.getParent();
      parentPanel && parentPanel.updateNav();
    },
    handleFold(val) {
      if (this.showFold) {
        this.showContent = (val !== null && val !== undefined ? val : !this.showContent);
      }
    }
  },
  watch: {
    label() {
      this.updateNav();
    }
  },
  mounted() {
    this.updateNav();
    if (this.visible !== undefined) {
      this.$watch('visible', (val) => {
        this.updateNav();
      })
    }
  }
};

export {
  baseTabsMixin,
  baseTabPaneMixin,
}
