<template>
  <div class="navigator-container" ref="navigato">
    <ul class="tab-list" ref="tabList">
      <li v-for="(item, index) in navList" class="tab-item" @click="selectNav(item)" :key="index">
        <p :class="{'link-active': item.id === currentTabIndex}">
          <span class="label">{{ item.name }}</span>
          <span class="value">{{ item.value }}</span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    props: {
      // 渲染的列表数据
      navList: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data () {
      return {
        currentTabIndex: 1, // 当前默认tab
        scroll: null
      }
    },
    mounted () {
      this.funInitBScroll()
      this._initTabListWidth()
      const timer = setTimeout(() => {
        clearTimeout(timer)
        // this._adjust(this.currentTabIndex)
      }, 500)
    },
    methods: {
      funInitTabIndex (index) {
        this.currentTabIndex = index
      },
      funInitBScroll () {
        const options = {
          probeType: 1,
          click: true,
          scrollY: false,
          scrollX: true,
          scrollbar: false,
          startY: 0,
          freeScroll: false,
          mouseWheel: true,
          bounce: true,
          zoom: false
        }
        this.scroll = new BScroll(this.$refs.navigato, options)
      },
      selectNav (item) {
        if (item === undefined) {
          return
        }
        this.currentTabIndex = item.id
        this.$emit('funChange', item.id)
        // this._adjust(item.id)
      },
      _initTabListWidth () {
        const tabList = this.$refs.tabList
        const items = tabList.children
        let width = 0
        for (let i = 0; i < items.length; i++) {
          width += items[i].clientWidth
        }
        tabList.style.width = (width + 1) + 'px'
      },
      // 导航类目超过一屏在使用
      _adjust (tabId) {
        const viewportWidth = this.$refs.navigato.clientWidth
        const tabListWidth = this.$refs.tabList.clientWidth
        const minTranslate = Math.min(0, viewportWidth - tabListWidth)
        const middleTranslate = viewportWidth / 2
        const items = this.$refs.tabList.children
        let width = 0
        this.navList.every((item, index) => {
          if (item.id === tabId) {
            return false
          }
          width += items[index].clientWidth
          return true
        })
        let translate = middleTranslate - width
        translate = Math.max(minTranslate, Math.min(0, translate))
        this.scroll.scrollTo(translate, 0, 300)
      }
    }
  }
</script>
<style lang='scss' scoped>
  .navigator-container {
    width: 100%;
    height: 47px;
    margin-top: 9px;
    font-size: 0;
    overflow: hidden;

    p {
      display: inline-block;
    }

    .tab-item {
      display: inline-block;
      width: 125px;
      text-align: center;

      p {
        position: relative;
        left: 0;
        top: 0;

        &.link-active {
          .value {
            font-weight: 500;
            color: #C9A585;
          }

          &:after {
            position: absolute;
            left: 0;
            bottom: 0;
            content: '';
            width: 100%;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
          }
        }
      }

      .label {
        display: inline-block;
        line-height: 47px;
        font-size: 16px;
        font-weight: 500;
        color: #333;
      }

      .value {
        display: inline-block;
        margin-left: 4px;
        line-height: 47px;
        font-size: 18px;
        color: #999;
      }
    }
  }
</style>
