<style scoped>
.tab-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  background: #fff;
  position: fixed;
  z-index: 100;
  padding-bottom: 10px;
  font-size: 32px;
}

.tabs {
  display: flex;
  padding-bottom: 8px;
}
.tab-item {
  display: flex;
  flex: 1;
  text-align: center;
  line-height: 88px;
  flex-direction: column;
  align-items: center;
  position: relative;
  font-weight: 600;
}
.checkedTab {
  color: #117efe;
  font-weight: bold;
}

.tabRung {
  left: 0;
  top: 83px;
  height: 6px;
  background: rgba(17, 126, 254, 1);
  transition: transform 0.3s ease-in-out;
  border-radius: 4px;
}

.tabs {
  position: relative;
}
.tabRung {
  width:56px;
  height:6px;
  background:rgba(0,106,245,1);
  border-radius:3px;
}
</style>

<template>
  <div class="tab-container" :style="{'top': navHeight}">
    <div class="tabs">
      <div v-for="(item, index) in tabList"
          @click="changeTab(item, index)" 
          :key="index"
          class="tab-item"
          :class="{'checkedTab': checkedTab===index}"
          :data-index="index">
        <div> {{item}}</div>
        <div class="tabRung" v-if='checkedTab===index'></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tabList: {
      type: Array,
      required: true
    },
    tabChange: ['Function']
  },
  data () {
    return {
      checkedTab: 0
    }
  },
  onUnload () {
    this.checkedTab = 0
  },
  methods: {
    changeTab (item, index) {
      // 将视图更新和tab下标动画分割成两个事件
      this.checkedTab = index
      this.tabChange(item, index)
    },
    reset () {
      this.checkedTab = 0
    }
  }
}
</script>
