<template>
  <div :class="cusClass" class="swipeout-list">
    <div ref="item" :class="bottomBorder" class="item" data-type="0">
      <div
        class="list-box"
        @touchstart.capture="touchStart"
        @touchend.capture="touchEnd">
        <slot/>
      </div>
      <slot name="buttons"/>
      <!--<div class="function edit" @click="myEdit" v-if="showEdit">{{editText}}</div>
      <div class="function delete" @click="myDelete" v-if="showDelete">{{deleteText}}</div>-->
    </div>
  </div>
</template>

<script>
import optionButton from './OptionButton'

export default {
  name: 'ItemOption',
  components: {optionButton},
  props: {
    showDelete: Boolean,
    showEdit: Boolean,
    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: {
    myDelete () {
      this.$emit('deleteFun')
      this.$refs.item.style.transform = 'translate3d(0px,0px,0px)'
    },
    myEdit () {
      this.$emit('editFun')
      this.$refs.item.style.transform = 'translate3d(0px,0px,0px)'
    },
    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
    },
    // 判断当前是否有滑块处于滑动状态
    checkSlide () {
      let listItems = this.$refs.item
      for (let i = 0; i < listItems.length; i++) {
        if (listItems[i].dataset.type === '1') {
          return true
        }
      }
      return false
    },
    // 初始化
    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('item').length
      for (let i = 0; i < l; i++) {
        document.getElementsByClassName('item')[i].style.transform = 'translate3d(0px,0px,0px)'
        document.getElementsByClassName('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%;
    .item[data-type="0"] {
      transform: translate3d(0px, 0px, 0px);
      transition: all 0.4s;
    }
    .item[data-type="1"] {
      transition: all 1s;
    }
    .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>
