<template>
  <div
    class="vux-slider"
    :class="classes"
  >
    <div
      class="vux-swiper"
      :style="{height: xheight}"
    >
      <slot />
      <div
        v-for="(item, index) in list"
        :key="item.imgKey"
        class="vux-swiper-item"
        :data-index="index"
        @click="clickListItem(item)"
      >
        <a href="javascript:">
          <div
            class="vux-img"
            :style="{backgroundImage: buildBackgroundUrl(item[imgKey])}"
          />
          <p
            v-if="showDescMask"
            class="vux-swiper-desc"
          >{{ item[titleKey] }}</p>
        </a>
      </div>
    </div>
    <div
      v-show="showDots"
      :class="[dotsClass, 'vux-indicator', 'vux-indicator-' + dotsPosition]"
    >
      <a
        v-for="key in length"
        :key="key"
        href="javascript:"
      >
        <i
          class="vux-icon-dot"
          :class="{'active': key === current+1}"
        />
      </a>
    </div>
  </div>
</template>

<script>
import Swiper from './swiper'
import { go } from '../../libs/router'

export default {
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    },
    direction: {
      type: String,
      default: 'horizontal'
    },
    showDots: {
      type: Boolean,
      default: true
    },
    showDescMask: {
      type: Boolean,
      default: true
    },
    dotsPosition: {
      type: String,
      default: 'right'
    },
    dotsClass: String,
    auto: {
      type: Boolean,
      default: false
    },
    loop: Boolean,
    interval: {
      type: Number,
      default: 3000
    },
    threshold: {
      type: Number,
      default: 50
    },
    duration: {
      type: Number,
      default: 300
    },
    height: {
      type: String,
      default: 'auto'
    },
    aspectRatio: Number,
    minMovingDistance: {
      type: Number,
      default: 0
    },
    // index: {
    //   type: Number,
    //   default: 0
    // },
    value: {
      type: Number,
      default: 0
    },
    imgKey: {
      type: String,
      default: 'img'
    },
    urlKey: {
      type: String,
      default: 'url'
    },
    titleKey: {
      type: String,
      default: 'title'
    },
    cssClasses: String
  },
  data () {
    return {
      // current: this.index,
      current: this.value,
      xheight: 'auto',
      length: this.list.length
    }
  },
  computed: {
    classes() {
      return this.cssClasses
    }
  },
  watch: {
    list (val) {
      this.rerender()
    },
    current (currentIndex) {
      this.$emit('on-index-change', currentIndex)
      this.$emit('input', currentIndex)
    },
    value (val) {
      if (val !== this.current) {
        this.$nextTick(() => {
          this.swiper.go(val)
        })
      }
    }
  },
  mounted () {
    if (!(this.list && this.list.length === 0)) {
      this.render()
    }
    this.xheight = this.getHeight()
  },
  beforeDestroy () {
    this.destroy()
  },
  methods: {
    clickListItem (item) {
      go(item[this.urlKey], this.$router)
      this.$emit('on-click-list-item', JSON.parse(JSON.stringify(item)))
    },
    buildBackgroundUrl (url) {
      return `url(${url})`
    },
    render () {
      this.swiper && this.swiper.destroy()
      this.swiper = new Swiper({
        container: this.$el,
        direction: this.direction,
        auto: this.auto,
        loop: this.loop,
        interval: this.interval,
        threshold: this.threshold,
        duration: this.duration,
        height: this.height || this._height,
        minMovingDistance: this.minMovingDistance,
        imgList: this.imgList
      })
        .on('swiped', (prev, index) => {
          this.current = index % this.length
        // this.index = index % this.length
        })
    },
    rerender () {
      if (!this.$el) {
        return
      }
      this.$nextTick(() => {
        // this.index = 0
        this.current = 0
        this.length = this.list.length || this.$children.length
        this.destroy()
        this.render()
      })
    },
    destroy () {
      this.swiper && this.swiper.destroy()
    },
    getHeight () {
      // when list.length > 0, it's better to set height or ratio
      const hasHeight = parseInt(this.height, 10)
      if (hasHeight) return this.height
      if (!hasHeight) {
        if (this.aspectRatio) {
          return this.$el.offsetWidth * this.aspectRatio + 'px'
        }
        return '180px'
      }
    }
  }
}
</script>
