<style scpoed>
.bSwiperout-wrapper {
  display: block;
  position: relative;
  width: 100vw;
  height: 100px;
}
.swiperout-container {
  display: flex;
  position: absolute;
  height: 100px;
  align-items: center;
  flex-wrap: nowrap;
}
.bSwiperout-content {
  flex-shrink: 0;
  display: flex;
  width: 100vw;
  height: 100%;
  padding: 0 30px;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

.title {
  font-size: 30px;
  color: #222;
}

.des {
  font-size: 24px;
  color: #666;
}

.bSwiperout-wrapper .btns {
  display: flex;
  width: 300px;
  height: 100px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 1;
}

.bSwiperout-wrapper .btns > div {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 24px;
  overflow: hidden;
}

.transitionActive {
  transition: left 0.3s ease-in-out;
}
</style>

<template>
  <div class="bSwiperout-wrapper">
    <div 
      :style="{
        left: contentLeft + 'px',
        borderTop: borderColor ? '1px ' + borderColor + ' solid' : 'none',
        borderBottom: borderColor ? '1px ' + borderColor + ' solid' : 'none'
      }"
      :class="{'swiperout-container': true, 'transitionActive': transitionActive}">
      <div
        @touchstart="contentTouchstart"
        @touchmove="contentTouchmove"
        @touchend="contentTouchend"
        class="bSwiperout-content"
      >
        <div v-if="title" class="title">{{title}}</div>
        <div v-if="des" class="des">{{des}}</div>
      </div>
      <div class="btns">
        <div
          v-for="(item, index) in buttons"
          @click="bSwiperoutClick(item, index)"
          :key="index"
          :style="{background: item.backgroundColor, color: item.textColor}"
          class="btn"
        >
          <img v-if="item.iconUrl" :src="item.iconUrl" />
          <div v-if="item.text">{{item.text}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  /**
   * title：左侧内容标题,
   * des：左侧内容描述
   * borderColor: 滑动条边框颜色
   * buttons: 向左滑动之后右侧按钮内容，背景颜色等，可以参考预置的结构
  */
  props: {
    title: {
      type: String,
      default: () => ''
    },
    des: {
      type: String,
      default: () => ''
    },
    borderColor: {
      type: String,
      default: () => '#EDEDED'
    },
    buttons: {
      type: Array,
      default: () => [
        {
          text: '喜欢',
          backgroundColor: '#f44',
          textColor: 'white'
        },
        {
          text: '返回',
          backgroundColor: '#1989fa',
          textColor: 'white'
        }
      ]
    }
  },
  data: () => {
    return {
      // Num 触摸事件开始时的X坐标
      touchStartX: undefined,
      // Num 触摸事件X轴滑动距离
      touchDistance: undefined,
      // Num 滑动条向左滑动的距离
      contentLeft: 0,
      // Num 滑动条向左最大滑动距离
      maxLeft: undefined,
      // Boolean 滑动条动画是否正在进行
      transitionActive: false
    }
  },
  mounted () {
    const that = this
    // 获取右侧按钮组宽度
    wx.createSelectorQuery().select('.btns').boundingClientRect(function (res) {
      that.maxLeft = res.width
    }).exec()
  },
  methods: {
    contentTouchstart (e) {
      this.touchStartX = e.clientX
    },
    contentTouchmove (e) {
      this.touchDistance = this.touchStartX - e.clientX
      if (this.contentLeft === -this.maxLeft) {
        return
      }
      if (this.touchDistance > 0 && this.touchDistance < this.maxLeft) {
        this.contentLeft = -this.touchDistance
      }
    },
    contentTouchend (e) {
      if (this.transitionActive) {
        return
      }
      if (this.touchDistance < 0 && this.contentLeft < 0) {
        this.translateRight()
      }
      if (this.touchDistance > 0) {
        this.translateLeft()
      }
    },
    // 滑动条自动向左偏移
    translateLeft () {
      this.transitionActive = true
      this.contentLeft = -this.maxLeft
      setTimeout(() => {
        this.transitionActive = false
      }, 300)
    },
    // 滑动条自动向右偏移
    translateRight () {
      this.transitionActive = true
      this.contentLeft = 0
      setTimeout(() => {
        this.transitionActive = false
      }, 300)
    },
    // 点击滑动条按钮
    bSwiperoutClick (data, index) {
      this.$emit('click', data, index)
    }
  }
}
</script>

