<script>
import { Tabs } from 'element-ui'
export default {
  name: 'ElTabs',
  extends: Tabs,
  props: {
    defaultActiveFirst: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  watch: {
    value(val) {
      const tab = this.panes.find((tab) => {
        return tab.name === val
      })
      if (tab) {
        tab.$emit('tabActive')
        for (const el of (tab.$children || [])) {
          if (typeof el.onTabActive === 'function') {
            el.onTabActive()
          }
        }
      }
    }
  },
  mounted() {
    if (this.defaultActiveFirst && this.panes.length > 0) {
      this.setCurrentName(this.panes[0].name)
    }
  }
}
</script>
