<style lang="less">
.component-scroller-x {
  width: 100%;
  height: 100%;
  position: relative;
  white-space: nowrap;
}

.component-scroller-x .scroller-content {
  white-space: nowrap;
  display: inline-block;
}

.scroller-bar {
  position: absolute;
  height: 8rpx;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4rpx;
  /* opacity: 0; */
  transition: opacity 2s ease 0s;
  left: 0;
  bottom: 0;
}
</style>

<template>
  <div
    class="{{containerId+'-scroller-x' + ' component-scroller-x'}}"
    v-on:touchmove="touchMove"
    v-on:touchstart="touchStart"
    v-on:touchend="touchEnd"
  >
    <div class="scroller-content" style="{{'transform:translateX('+translateX+'px);'}}">
      <slot></slot>
    </div>
    <div
      class="scroller-bar"
      style="{{'width:'+barWidth+'px;opacity:' + (showScrollBar?'1':'0')+';'+'transform:translateX('+scrollBartranslateX*2+'rpx);'}}"
      v-if="hasScrollBar"
    ></div>
  </div>
</template>

<script>
import wepy from '@wepy/core';
let Timer = null;
let startX = 0;
let startTmie;
let scale;
wepy.component({
  data: {
    barWidth: 0,
    hasScrollBar: true,
    showScrollBar: false,
    translateX: 0,
    scrollBartranslateX: 0,
    maxTranslate: 0
  },
  props: {
    canMove: {
      type: Boolean,
      default: true
    },
    scrollLeft: {
      type: Number,
      default: 0
    },
    containerId: String
  },
  ready() {
    const { containerId } = this;
    // 防止内容还未加载完毕，获取内容宽度是0，计算有误
    setTimeout(() => {
      this.$wx
        .createSelectorQuery()
        .select(`.${containerId}-scroller-x`)
        .boundingClientRect()
        .select(`.${containerId}-scroller-x .scroller-content`)
        .boundingClientRect()
        .exec(ret => {
          let wrapperWidth = ret[0].width;
          let listWidth = ret[1].width;
          scale = wrapperWidth / listWidth;
          let maxTranslate = wrapperWidth - listWidth;
          this.barWidth = wrapperWidth * scale;
          this.hasScrollBar = maxTranslate < 0;
          this.maxTranslate = maxTranslate;
          this.setScrollLeft(this.scrollLeft);
        });
    }, 200);
  },
  watch: {
    scrollLeft: function(newScrollLeft, oldScrollLeft) {
      if (oldScrollLeft !== newScrollLeft && this.maxTranslate !== 0) {
        this.setScrollLeft(newScrollLeft);
      }
    }
  },
  methods: {
    setScrollLeft(scrollLeft) {
      const { maxTranslate } = this;
      let translateX = scrollLeft < maxTranslate ? maxTranslate : scrollLeft; //如果超过了边界，设为最大值为边界
      if (scrollLeft == null) {
        return;
      }
      this.translateX = translateX;
    },
    touchStart(e) {
      if (!this.judgeCanMove()) {
        return;
      }
      if (Timer) {
        clearInterval(Timer); //当手指按下的时候清除掉MTween中的定时器，目的就是当手指按下的时候，如果动画还在执行，让其停止
      }
      startX = Number(e.touches[0].pageX);
      startTmie = new Date().getTime();
      // 产品要求隐藏滚动条
      // this.showScrollBar();
    },
    touchMove(e) {
      if (!this.judgeCanMove()) {
        return;
      }
      let touch = e.touches[0],
        x = Number(touch.pageX);
      let touchLength = parseInt(x - startX);
      startX = x;

      let translateX = this.translateX + touchLength;

      const { maxTranslate } = this;
      if (Math.abs(translateX) > Math.abs(maxTranslate)) {
        // this.hideScrollBar();
        return;
      }

      if (translateX > 0) {
        // console.log('h滑动了最左边');
        return;
      }
      this.translateX = translateX;
      this.scrollBartranslateX = -translateX * scale;
      this.$emit('componet-scroller-x-scroll', translateX);
    },
    touchEnd() {
      this.hideScrollBar();
      this.$emit('componet-scroller-x-scrollend');
    },
    showScrollBar() {
      this.showScrollBar = true;
    },
    hideScrollBar() {
      this.showScrollBar = false;
    },
    judgeCanMove() {
      return this.canMove && this.hasScrollBar;
    }
  }
});
</script>