<template>
  <div class="components flex-v">
    <div class="tabNav flex-h" :style="{backgroundColor: backgroundColor || '#fff'}">
      <a
        class="flex-item"
        v-for="(item, index) in data"
        :key="index"
        @click="cutNav(index)"
        :style="{fontSize: fontSize + 'px', fontWeight: index === activeIndex ? 'bolder' : 'normal'}"
      >{{item.value}}</a>
      <div class="activeLine" id="activeLine"></div>
    </div>
    <div class="flex-item">
      <div>
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide class="swiper-slide" v-for="(item, index) in data" :key="index">
            <slot :name="'slideTabH-' + item.id"></slot>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'slideTabH',
  props: ['data', 'fontSize', 'activeColor', 'normalColor', 'backgroundColor', 'initIndex'],
  data () {
    var _self = this
    return {
      leftArr: [],
      widthArr: [],
      activeWidth: 0,
      activeIndex: 0,
      stepNum: 120,
      swiperOption: {
        watchSlidesProgress: true,
        initialSlide: _self.activeIndex,
        on: {
          init () {
            document.getElementById('activeLine').style.width = _self.widthArr[_self.activeIndex * _self.stepNum] + 'px'
            document.getElementById('activeLine').style.left = _self.leftArr[_self.activeIndex * _self.stepNum] + 'px'
          },
          setTranslate (translate) { // 滑动偏移量监听
            var num = (-translate / document.body.clientWidth * _self.stepNum).toFixed(0)
            if (num >= 0 && num <= (_self.data.length - 1) * _self.stepNum) {
              document.getElementById('activeLine').style.width = _self.widthArr[num] + 'px'
              document.getElementById('activeLine').style.left = _self.leftArr[num] + 'px'
            }
          },
          touchStart () {
            document.getElementById('activeLine').style.transition = ''
            document.getElementById('activeLine').style.WebkitTransition = ''
          },
          touchEnd () {
            document.getElementById('activeLine').style.transition = '300ms'
            document.getElementById('activeLine').style.WebkitTransition = '300ms'
            if (this.realIndex !== _self.activeIndex) {
              document.getElementById('activeLine').style.width = (_self.widthArr[this.realIndex * _self.stepNum]) + 'px'
              document.getElementById('activeLine').style.left = (_self.leftArr[this.realIndex * _self.stepNum]) + 'px'
            }
          },
          setTransition (speed) {
            if (this.realIndex !== _self.activeIndex) {
              document.getElementById('activeLine').style.width = (_self.widthArr[this.realIndex * _self.stepNum]) + 'px'
              document.getElementById('activeLine').style.left = (_self.leftArr[this.realIndex * _self.stepNum]) + 'px'
            }
          },
          transitionEnd () {
            _self.activeIndex = this.activeIndex
            _self.$emit('slideChange', this.activeIndex)
          }
        }
      }
    }
  },
  computed: {
    MySwiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  created () {
    this.activeIndex = this.initIndex || 0
    var aLeft = (document.body.clientWidth / this.data.length).toFixed(0)
    this.data.map((item, index) => {
      this.widthArr.push((item.value.length / 2).toFixed(2) * (this.fontSize || 15))
      this.leftArr.push((aLeft * index - 0) + ((aLeft / 2).toFixed(0) - 0) - this.widthArr[index] / 2)
    })
    this.activeWidth = this.widthArr[this.activeIndex]
    this.widthArr = this.calcArr(this.widthArr, this.stepNum)
    this.leftArr = this.calcArr(this.leftArr, this.stepNum)
  },
  mounted () {
    this.$nextTick(() => {
    })
  },
  methods: {
    cutNav (index) { // 切换nav
      document.getElementById('activeLine').style.transition = '300ms'
      document.getElementById('activeLine').style.WebkitTransition = '300ms'
      this.MySwiper.slideTo(index, 0, false)
    },
    calcArr (arr, num) { // 构造间隔数组：arr-原数组；num-间隔数
      arr = arr || []
      num = num || 20
      var aArr = []
      arr.map((item, index) => {
        if (index < arr.length - 1) {
          aArr.push([])
          for (var n = 0; n < num; n++) {
            aArr[index].push(item + (arr[index + 1] - item) * (n + 1) / num)
          }
        }
      })
      return [arr[0]].concat(...aArr)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.components {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .tabNav {
    background: #fff;
    position: relative;
    overflow: visible;
    box-shadow: 0 0 0.1rem 0.02rem rgba(0, 0, 0, 0.05);
    z-index: 100;
    > a {
      line-height: 0.45rem;
      text-align: center;
      color: #333;
      position: relative;
      z-index: 1001;
      background: #fff;
    }
    .activeLine {
      height: 0.02rem;
      background: #fc6243;
      position: absolute;
      left: 0;
      bottom: -.02rem;
      z-index: 1000;
      box-shadow: 0 0 .1rem .01rem rgba(252, 98, 67, 0.9);
    }
  }
  > .flex-item {
    position: relative;
    > div {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      overflow: hidden;
      > div {
        width: 100%;
        height: 100%;
      }
    }
  }
  .swiper-slide {
    background: #f8f8f8;
    position: relative;
    z-index: 1;
  }
}
</style>
