<template>
<div class="xp-carousel" :style="{ width: width, height: height }">
  <div class="xp-carousel__wrap">
    <slot></slot>
  </div>
</div>
</template>

<script>
export default {
  name: 'XpCarousel',

  data () {
    return {
      items: [],
      activeIndex: -1,
      timer: null
    }
  },

  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    direction: {
      type: String,
      default: 'x'
    },
    autoPlay: {
      type: Boolean,
      default: true
    },
    playDuration: {
      type: Number,
      default: 5000
    }
  },

  watch: {
    items(newVal) {
      if (newVal.length > 0) this.setActiveItem(0)
    },

    activeIndex(newVal, oldVal) {
      this.resetItemPosition()
      this.$emit('change', newVal, oldVal)
    }
  },

  methods: {
    resetItemPosition () { // 设置子组件的位置
      this.items.forEach((item, index) => {
        item.translateItem(index, this.activeIndex) // translateItem为子组件的methods
      })
    },
    setActiveItem (index) { // 设置active的子组件
      if (index < 0) {
        this.activeIndex = length - 1
      } else if (index >= length) {
        this.activeIndex = 0
      } else {
        this.activeIndex = index
      }
    },
    startTimer () {
      if (!this.autoPlay || this.playDuration <= 0) return
      this.timer = setInterval(this.handleIndexChange, this.playDuration)
    },
    handleItemChange () { // 获取子组件数组
      this.items = this.$children.filter(child => child.$options.name === 'XpCarouselItem')
    },
    handleIndexChange () {
      this.activeIndex = (this.activeIndex + 1) % this.items.length
    }
  },

  mounted () {
    this.handleItemChange()
    this.$nextTick(() => {
      this.startTimer()
    })
  },

  beforeDestroy () {
    this.timer && clearInterval(this.timer)
  }
}
</script>
