<template>
  <div :class="cusClass" class="swipeout-list">
    <div ref="item" :class="bottomBorder" class="option-item" data-type="0">
      <div
        class="list-box"
        @touchstart.capture="touchStart"
        @touchend.capture="touchEnd">
        <slot/>
      </div>
      <slot name="buttons"/>
    </div>
  </div>
</template>

<script>
import optionButton from './OptionButton'

export default {
  name: 'ItemOption',
  components: {optionButton},
  props: {
    deleteText: {
      type: String,
      default: '删除',
    },
    editText: {
      type: String,
      default: '编辑',
    },
    buttonWidth: {
      type: Number,
      default: 70,
    },
    cusClass: {
      type: String,
      default: '',
    },
    hasBorder: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      dis: 0,
      buttons: 0,
      startX: 0, // 触摸位置
      endX: 0, // 结束位置
      optionItem: [],
    }
  },
  computed: {
    bottomBorder () {
      return this.hasBorder ? 'vux-1px-b' : ''
    },
  },
  mounted () {
    this.init()
  },
  /* updated () {
    this.init()
  }, */
  methods: {
    touchStart (ev) {
      this.$refs.item.style.transform = 'translate3d(0px,0px,0px)'
      this.reset()
      ev = ev || event
      // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
      if (ev.touches.length === 1) {
        // 记录开始位置
        this.startX = ev.touches[0].clientX
      }
    },
    touchEnd (e) {
      let parentElement = e.currentTarget.parentElement
      this.endX = e.changedTouches[0].clientX
      // console.log(this.endX)
      if (parentElement.dataset.type === '0' && this.startX - this.endX > 30) {
        parentElement.dataset.type = '1'
        parentElement.style.transform = 'translate3d(-' + this.dis + 'px,0px,0px)'
      }
      if (parentElement.dataset.type === '1' && this.startX - this.endX < -30) {
        parentElement.style.transform = 'translate3d(0px,0px,0px)'
        parentElement.dataset.type = '0'
      }
      this.startX = 0
      this.endX = 0
    },
    // 初始化
    init () {
      let vm = this
      let childerLength = vm.optionItem.length
      vm.dis = vm.buttonWidth * (childerLength)
      vm.optionItem.forEach((option, index) => {
        option.$el.style.right = '-' + (vm.buttonWidth * (index + 1)) + 'px'
      })
    },
    reset () {
      let l = document.getElementsByClassName('option-item').length
      for (let i = 0; i < l; i++) {
        document.getElementsByClassName('option-item')[i].style.transform = 'translate3d(0px,0px,0px)'
        document.getElementsByClassName('option-item')[i].dataset.type = '0'
      }
    },
  },
}
</script>

<style lang="less" scoped type="text/less">
  @listHeight: 45px;
  @buttonWidth: 70px;
  .swipeout-list {
    height: @listHeight;
    overflow: visible;
    padding: 0 0 0 15px;
    width: 100%;
    .option-item[data-type="0"] {
      transform: translate3d(0px, 0px, 0px);
      transition: all 0.4s;
    }
    .option-item[data-type="1"] {
      transition: all 1s;
    }
    .option-item {
      overflow: visible;
      position: relative;
      height: 100%;
      -webkit-transition: all 0.2s;
      border-right: none;
      width: 101%;
      padding: 0;
      .list-box {
        width: 100%;
        height: 100%;
      }
      .function {
        width: @buttonWidth; /*no*/
        height: 100%;
        color: white;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
      }
      .warn {
        background: @swipeout-button-warn-bg-color;
      }
      .primary {
        background: @swipeout-button-primary-bg-color;
      }
      .default {
        background: @swipeout-button-default-bg-color;
      }
    }

  }
</style>
