console.clear()
Vue.component('vue-tabs', {
  template: `<div class="tabs">
    <div class="tabs__list">
      <div 
        class="tabs__tab"
        :class="{'tabs__tab_active': i === active}"
        @click="changeTab(i)" 
        v-for="(label, i) in Tabs.labels"
        :key="i"
      >{{label}}</div>
    </div>
    <div class="tabs__container" ref="container">
      <div class="tabs__wrapper" ref="wrapper">
        <slot />
      </div>
    </div>
  </div>`,
  computed: {
    active() {
      return this.Tabs.active
    }
  },
  data() {
    return {
      Tabs: {
        labels: [],
        items: [],
        active: 0
      }
    }
  },
  methods: {
    setHeight() {
      const el = this.Tabs.items[this.active]
      const height = el.scrollHeight
      this.$refs.container.style.height = height + 'px'
    },
    scrollWrapper() {
      const {wrapper} = this.$refs
      const offset = 100 * this.active
      wrapper.style.transform = `translate3d(-${offset}%, 0, 0)`
    },
    changeTab(i) {
      this.Tabs.active = i
      this.setHeight()
      this.scrollWrapper()
    }
  },
  provide() {
    return {
      Tabs: this.Tabs
    }
  },
  mounted() {
    this.setHeight()
    this.scrollWrapper()
    this.debounce = _.debounce(this.setHeight, 50)
    window.addEventListener('resize', this.debounce)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.debounce)
  }
})

Vue.component('vue-tab', {
  template: `<div class="tabs__content"><slot /></div>`,
  props: ['label', 'active'],
  inject: ['Tabs'],
  created() {
    const length = this.Tabs.labels.push(this.label)
    if (this.active) {
      this.Tabs.active = length - 1
    }
  },
  mounted() {
    this.Tabs.items.push(this.$el)
  }
})

new Vue({
  el: '#app'
})