<template>
  <div class="uif-gallery-container">
    <div ref="swiper" class="uif-gallery" :style="styles" @transitionend="afterSlide">
      <template v-for="(image, idx) in images">
        <div :key="idx" class="uif-gallery-item" :style="background(image, idx)"></div>
      </template>
    </div>
    <template v-if="direction">
      <div class="uif-gallery-direction left" @click="slideTo(currentValue - 1, speed)">
        <u-icon type="chevron-s-left"></u-icon>
      </div>
      <div class="uif-gallery-direction right" @click="slideTo(currentValue + 1, speed)">
        <u-icon type="chevron-s-right"></u-icon>
      </div>
    </template>
    <div class="uif-gallery-control" v-if="control">
      <span v-for="(d, idx) in images" :class="{active: idx === currentValue}" :key="idx" @click="slideTo(idx, speed)"></span>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import UIcon from '@uif/hq/src/components/icon'
export default {
  name: 'u-gallery',
  components: {
    UIcon
  },
  props: {
    images: {
      type: Array,
      default () {
        return []
      }
    },
    // 当前第几个
    value: {
      type: Number,
      default: 0
    },
    // 切换速度
    speed: {
      type: Number,
      default: 500
    },
    // 显示前后控制
    direction: {
      type: Boolean,
      default: false
    },
    // 显示指示点
    control: {
      type: Boolean,
      default: false
    },
    // 自动播放
    autoplay: {
      type: Boolean,
      default: false
    },
    // 自动播放时动画停留时间，单位毫秒
    delay: {
      type: Number,
      default: 3000
    }
  },
  data () {
    return {
      currentValue: 0,
      slideValue: 0,
      styles: null,
      timer: 0 // 控制自动播放
    }
  },
  computed: {
  },
  watch: {
    images () {
      this.update()
    },
    value (value) {
      if (this.currentValue !== value) {
        this.currentValue = value
        this.slideTo(this.currentValue, this.speed)
      }
    },
    currentValue (currentValue) {
      if (this.value !== currentValue) {
        this.$emit('input', currentValue)
      }
    }
  },
  created () {
    this.cloneNodes = []
  },
  mounted () {
    this.update()
    this.startAutoplay()
  },
  beforeDestroy () {
    this.stopAutoplay()
  },
  methods: {
    // 更新实例
    update () {
      this.cloneImages()
      this.slideTo(this.currentValue, 0)
    },
    // 切换到指定slide
    slideTo (index, speed) {
      this.stopAutoplay()
      this.slideValue = index
      if (this.$refs.swiper) {
        this.$refs.swiper.style.transitionDuration = speed + 'ms'
        this.styles = {transform: 'translateX(' + (-100 * index) + '%)'}
      }
      this.startAutoplay()
    },
    // 更新Items
    cloneImages () {
      // 清除原克隆节点
      this.cloneNodes.forEach(dom => dom.parentNode.removeChild(dom))
      const swiper = this.$refs.swiper
      this.children = swiper.children
      if (this.children.length) {
        // 复制节点
        const start = this.children[0]
        const startCopy = start.cloneNode(true)
        startCopy.style.left = this.children.length * 100 + '%'
        const endCopy = this.children[this.children.length - 1].cloneNode(true)
        endCopy.style.left = '-100%'
        swiper.appendChild(startCopy)
        swiper.insertBefore(endCopy, start)
        this.cloneNodes = [startCopy, endCopy]
      }
    },
    // 切换完毕
    afterSlide () {
      const length = this.images.length
      if (this.slideValue === -1 || this.slideValue === length) {
        this.currentValue = (this.slideValue + length) % length
        return this.slideTo(this.currentValue, 0)
      }
      this.currentValue = this.slideValue
    },
    startAutoplay () {
      if (this.autoplay) {
        // 每隔一定的时单，点下一个
        this.timer = setTimeout(() => {
          this.slideTo(this.currentValue + 1, this.speed)
        }, this.delay)
      }
    },
    stopAutoplay () {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = 0
      }
    },
    background (url, idx) {
      return {
        left: idx * 100 + '%',
        backgroundImage: 'url(' + url + ')'
      }
    }
  }
}
</script>
