<template>
  <div class="inv-top-menu-bar">
    <div class="top-menu" ref="manageNav">
      <div class="top-menu-list">
        <router-link
          v-for="(item, index) in list"
          :key="index"
          :class="item.active ? 't-btn active' : 't-btn'"
          :to="item.href"
        >
          {{ item.text }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollNav',
  props: ['list'],
  data () {
    return {
      activeIndex: 0
    }
  },
  mounted () {
    // 判断选中项是否超出可视范围
    let scrollWidthValue = this.$refs.manageNav.scrollWidth
    let clientWidthValue = this.$refs.manageNav.clientWidth
    this.activeIndex = this.list.findIndex(item => item.active)
    if (this.activeIndex > 3) {
      // 超出屏幕，自动滚动
      if (scrollWidthValue > clientWidthValue) {
        this.$refs.manageNav.scrollLeft = scrollWidthValue - clientWidthValue
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.inv-top-menu-bar {
  background: #ffffff;
  .top-menu {
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .top-menu-list {
    white-space: nowrap;
    .t-btn {
      position: relative;
      white-space: nowrap;
      display: inline-block;
      text-align: center;
      color: #666666;
      font-size: 15px;
      text-decoration: none;
      padding: 11px 16.5px 15px;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
      &::after {
        position: absolute;
        left: 50%;
        bottom: 6px;
        width: 16px;
        height: 3px;
        background-color: #1787fb;
        border-radius: 100%;
        transform: translate(-50%, 0);
      }
      &.active {
        color: #1787fb;
        &::after {
          content: ' ';
        }
      }
    }
  }
}
</style>
