<template>
  <div class="bk-image-preview">
    <div class='info'>{{-(currentIndex - 1)}} / {{imageList.length}}</div>
      <movable-area class="image-list-wrap">
        <movable-view @change="moveInfo" direction="horizontal" class="move-wrap" inertia :x="x" @click='hide' :style="{
          width: imageList.length * 100 + 'vw'
        }">
          <div v-for='(item, index) in imageList' :key='index' class='item' >
            <image :src='item' mode='aspectFit' class='img'/>
          </div>
        </movable-view>
      </movable-area>
    </div>
</template>
<script>
function debounce (fn, delay) {
  let timer = null
  return function () {
    let args = arguments
    let context = this
    if (timer) {
      clearTimeout(timer)
      timer = setTimeout(function () {
        fn.apply(context, args)
      }, delay)
    } else {
      timer = setTimeout(function () {
        fn.apply(context, args)
      }, delay)
    }
  }
}
export default {
  props: {
    hide: {
      type: Function,
      default: () => {}
    },
    imageList: {
      type: Array,
      default: []
    },
    defaultIndex: {
      type: Number,
      default: () => 0
    }
  },
  data: () => {
    return {
      currentIndex: 0,
      x: 0,
      windowWidth: 0
    }
  },
  mounted () {
    this.windowWidth = wx.getSystemInfoSync().windowWidth
    if (this.defaultIndex) {
      this.x = -(this.defaultIndex - 1) * this.windowWidth
      this.currentIndex = -(this.defaultIndex - 1)
    }
  },
  methods: {
    moveInfo: debounce(function (e) {
      const {x, source} = e.mp.detail
      if (!source) {
        return
      }
      console.log(e.mp.detail)
      let {currentIndex, imageList} = this
      if (x < this.x && currentIndex > -imageList.length) {
        currentIndex--
      } else if (x > this.x && currentIndex < 0) {
        currentIndex++
      }
      this.x = currentIndex * this.windowWidth
      if (-currentIndex > imageList.length - 1) {
        return
      }
      this.currentIndex = currentIndex
    }, 50)
  },
  computed: {}
}
</script>
<style scoped>
.bk-image-preview {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  left: 0;
  background: #323233;
  height: 100vh;
  width: 100vw;
}
.info {
  height: 100px;
  color: #fff;
  font-size: 26px;
  text-align: center;
  line-height: 100px;
}
.image-list-wrap {
  height: 80vh;
  width: 100vw;
}
.move-wrap{
  height: 100vh;
  color: #fff;
  display: flex;
}
.bk-image-preview .img{
  height: 80vh;
  width: calc(100vw - 20px);
  margin-left: 10px;
}
.item {
  width: 100vw;
}
</style>

