<template>
  <div
    class="app"
    @touchstart.stop="checkTouchStart"
    @touchmove.stop="checkTouchMove"
    @touchend.stop="checkTouchEnd"
    ref="app"
  >
    <div :class="['cell_div_box']" ref="cdBox" :style="changeStyle">
      <div :class="['threeLeftButton']" ref="leftBox">
        <div
          :class="['button_style']"
          v-for="(item, index) in buttonsText"
          :key="index"
          :style="backColorChange(index)"
          @click="alertMessage(index)"
        >
          <text class="button_text" :style="colorChange(index)">{{
            item.value
          }}</text>
        </div>
      </div>
      <div :class="['cell1']" ref="midBox">
        <slot name="slideSlot"></slot>
      </div>
      <div :class="['threeRightButton']" ref="rightBox">
        <div
          :class="['button_style']"
          v-for="(item, index) in buttonsText"
          :key="'info2' + index"
          :style="backColorChange(index)"
          @click="alertMessage(index)"
        >
          <div class="button_text" v-if="item.value.length >= 4">
            <text :style="colorChange(index)">{{
              item.value.slice(0, item.value.length / 2)
            }}</text>
            <text :style="colorChange(index)">{{
              item.value.slice(2, 5)
            }}</text>
          </div>
          <div class="button_text" v-if="item.value.length <= 3">
            <text :style="colorChange(index)">{{
              item.value.slice(0, item.value.length)
            }}</text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const animation = weex.requireModule('animation')
const dom = weex.requireModule('dom')
const globalEvent = weex.requireModule('globalEvent')
import { Core } from '../../index'
export default {
  data() {
    return {
      leftShow: true,
      rightShow: false,
      startX: 0,
      startY: 0,
      distanceX: 0,
      lbuttonMargin: false,
      moveX: 0,
      moveLength: 0,
      leftSlideFlag: false,
      distanceXFlag: 0,
      isMoveEnd: false,
      buttonBox_width: 0,
      button_width: 0,
      swipeX: true,
      swipeY: true
    }
  },
  props: {
    slideDirection: {
      //1:支持左滑按钮出来(按钮在右边)
      //2：支持右滑按钮出来(按钮在左边)
      type: Number,
      default: 1 //默认支持右滑
    },
    buttonsText: {
      type: Array,
      default: () => [
        { value: '删除', background_color: '#F56428', color: '#ffffff' }
      ]
    },
    backAccept: {
      type: Number,
      default: 0
    }
  },
  methods: {
    alertMessage(index) {
      Core.toast(this.buttonsText[index].value)
      this.distanceX = 0
    },
    backColorChange(index) {
      const style1 = {
        backgroundColor: this.buttonsText[index].background_color
      }
      return style1
    },
    colorChange(index) {
      const style2 = {
        fontSize: '32px',
        color: this.buttonsText[index].color
      }
      return style2
    },
    checkTouchStart(e) {
      const result = dom.getComponentRect(this.$refs.leftBox, option => {
        this.buttonBox_width = option.size.width
      })
      //Core.alert(e)
      if (this.slideDirection === 1) {
        //按钮在右边
        this.startX = e.changedTouches[0].pageX
        this.startY = e.changedTouches[0].pageY
      } else if (this.slideDirection === 2) {
        //按钮在左边
        this.startX = e.changedTouches[0].pageX
        this.startY = e.changedTouches[0].pageY
      }
      e.preventDefault()
    },
    checkTouchMove(e) {
      //判断pageY和pageX
      if (this.slideDirection === 1) {
        this.moveX = e.changedTouches[0].pageX
        let x = e.changedTouches[0].pageX
        let y = e.changedTouches[0].pageY
        if (Math.abs(x - this.startX) > Math.abs(y - this.startY)) {
          if (
            this.startX > x &&
            this.distanceX !== -this.buttonBox_width &&
            x - this.startX >= -this.buttonBox_width
          ) {
            this.distanceXFlag = x - this.startX
            this.distanceX = x - this.startX
          } else if (
            this.startX < x &&
            this.distanceX !== 0 &&
            x - this.startX <= this.buttonBox_width
          ) {
            this.distanceXFlag = x - this.startX
            this.distanceX = -this.buttonBox_width + x - this.startX
          }
        }
      } else if (this.slideDirection === 2) {
        this.moveX = e.changedTouches[0].pageX
        let x = e.changedTouches[0].pageX
        let y = e.changedTouches[0].pageY
        if (Math.abs(x - this.startX) > Math.abs(y - this.startY)) {
          if (
            this.startX > x &&
            this.distanceX !== 0 &&
            x - this.startX > -this.buttonBox_width
          ) {
            //左滑，禁止在没滑出按钮的时候左滑
            this.distanceXFlag = x - this.startX //小于0
            this.distanceX = this.buttonBox_width - (this.startX - x)
          } else if (
            this.startX < x &&
            this.distanceX !== this.buttonBox_width &&
            x - this.startX <= this.buttonBox_width
          ) {
            //右滑，禁止在按钮全部滑出的时候右滑
            this.distanceXFlag = x - this.startX //大于0
            this.distanceX = x - this.startX
          }
        }
      }
      e.preventDefault()
    },
    checkTouchEnd() {
      this.isMoveEnd = true
      if (this.slideDirection === 1) {
        if (this.distanceXFlag > -80 && this.distanceXFlag < 0) {
          //当左滑没有超出一个按钮宽度大小的距离，按钮回退
          this.distanceX = 0
        } else if (
          this.distanceXFlag < -80 &&
          this.distanceXFlag > -this.buttonBox_width
        ) {
          this.distanceX = -this.buttonBox_width
        } else if (this.distanceXFlag <= -this.buttonBox_width) {
          this.distanceX = -this.buttonBox_width
        } else if (this.distanceXFlag >= 80) {
          this.distanceX = 0
        } else if (this.distanceXFlag < 80 && this.distanceXFlag > 0) {
          this.distanceX = -this.buttonBox_width
        }
      } else if (this.slideDirection === 2) {
        if (this.distanceXFlag < 80 && this.distanceXFlag > 0) {
          //当右滑没有超出一个按钮宽度大小的距离，按钮回退
          this.distanceX = 0
        } else if (this.distanceXFlag > 80) {
          //当右滑超出一个按钮宽度大小，按钮全部滑出
          this.distanceX = this.buttonBox_width
        } else if (this.distanceXFlag < -80) {
          //当左滑按钮回去
          this.distanceX = 0
        } else if (this.distanceXFlag > -80 && this.distanceXFlag < 0) {
          this.distanceX = this.buttonBox_width
        }
      }
    }
  },
  mounted() {
    //this.$alert(this.backAccept)
  },
  computed: {
    changeStyle() {
      let { distanceX } = this
      const style = {
        transitionProperty: 'transform',
        transform: `translateX(${this.distanceX}px)`,
        'transition-duration': this.isMoveEnd ? '2s' : '0',
        'transition-timing-function': 'linear'
      }
      return style
    }
  },
  watch: {
    backAccept: function(newValue, oldValue) {
      if (this.backAccept === 1) {
        if (
          this.distanceX === this.buttonBox_width ||
          this.distanceX === -this.buttonBox_width
        ) {
          this.distanceX = 0
        }
      }
    }
  }
}
</script>

<style scoped>
.app {
  position: relative;
  width: 750px;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.cell_div_box {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  flex-direction: row;
  margin-bottom: 4px;
  /* justify-content: space-between;
  box-sizing: content-box; */
}
.cell1 {
  align-items: stretch;
  width: 750px;
}
.button_style {
  width: 160px;
  /* height: 160px; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.button_text {
  margin-left: 32px;
  margin-right: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.threeLeftButton,
.threeRightButton {
  display: flex;
  align-items: stretch;
  flex-direction: row;
}
</style>
