<template>
  <div>
    <bxs-tab>
      <bxs-tab-item>第一项</bxs-tab-item>
      <bxs-tab-item>第二项</bxs-tab-item>
      <bxs-tab-item>第三项</bxs-tab-item>
    </bxs-tab>
    <div style="height:50px" />
    <bxs-tab
      :index="1"
      @change="tabChange1"
      >
      <bxs-tab-item>第一项</bxs-tab-item>
      <bxs-tab-item>第二项</bxs-tab-item>
      <bxs-tab-item>第三项</bxs-tab-item>
      <bxs-tab-item>第四项</bxs-tab-item>
      <bxs-tab-item>第五项</bxs-tab-item>
    </bxs-tab>
    <div style="height:50px" />
    <bxs-tab
      :index="2"
      @change="tabChange2"
      >
      <bxs-tab-item>第一项</bxs-tab-item>
      <bxs-tab-item>第二项</bxs-tab-item>
      <bxs-tab-item>第三项</bxs-tab-item>
      <bxs-tab-item>第四项</bxs-tab-item>
      <bxs-tab-item>第五项</bxs-tab-item>
      <bxs-tab-item>第六项</bxs-tab-item>
      <bxs-tab-item>第七项</bxs-tab-item>
    </bxs-tab>
    <div style="height:50px" />
    <bxs-tab
      :index="0"
      @change="tabChange3"
      >
      <bxs-tab-item>两个</bxs-tab-item>
      <bxs-tab-item>三个字</bxs-tab-item>
      <bxs-tab-item>四个字咯</bxs-tab-item>
      <bxs-tab-item>第四项</bxs-tab-item>
      <bxs-tab-item>第五项</bxs-tab-item>
      <bxs-tab-item>第六项</bxs-tab-item>
      <bxs-tab-item>第七项</bxs-tab-item>
    </bxs-tab>
    <div style="height:50px" />
    <bxs-tab :index="activeIndex">
      <bxs-tab-item>增加</bxs-tab-item>
      <bxs-tab-item>动态</bxs-tab-item>
      <bxs-tab-item>改变</bxs-tab-item>
      <bxs-tab-item>index</bxs-tab-item>
      <bxs-tab-item>特性</bxs-tab-item>
    </bxs-tab>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 0,
    }
  },
  mounted() {
    this.timer = window.setInterval(() => {
      const randomIndex = parseInt(Math.random() * 5, 10)
      this.activeIndex = randomIndex
    }, 1000)
  },
  beforeDestroy() {
    window.clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    tabChange1(index) {
      console.log('example1 demo:', index)
    },
    tabChange2(index) {
      console.log('example2 demo:', index)
    },
    tabChange3(index) {
      console.log('example3 demo:', index)
    },
  },
}
</script>
