// import in ES6
import Vue from 'vue'
// ...
import AwesomeSwiper from 'vue-awesome-swiper'


// or require in Webpack/Node.js
var Vue = require('vue')
// ...
var AwesomeSwiper = require('vue-awesome-swiper')


// use
Vue.use(AwesomeSwiper)


// --------------------------------------


// or use with component(ES6)
import Vue from 'vue'
// ...
import { swiper, swiperSlide, swiperPlugins } from 'vue-awesome-swiper'

// use
export default {
  components: {
    swiper,
    swiperSlide
  }
}

// if you need to custom swiper plugins
// 如果你要定制一些swiper插件的话，这段代码是个示例，否则不用care
swiperPlugins.debugger = function(swiper, params) {
  if (!params) return;
  // Need to return object with properties that names are the same as callbacks
  return {
    onInit: function(swiper) {
      console.log('onInit');
    },
    onClick: function(swiper, e) {
      console.log('onClick');
    },
    onTap: function(swiper, e) {
      console.log('onTap');
    },
    // something callback...
  }
}

// swiperOption example:
export default {
  name: 'carrousel',
  data() {
    return {
      swiperOption: {
        // 如果你后续需要找到当前实例化后的swiper对象以对其进行一些操作的话，可以自定义配置一个名字
        name: 'currentSwiper',
        // 所有配置均为可选（同Swiper配置）
        autoplay: 3000,
        direction : 'vertical',
        grabCursor : true,
        setWrapperSize :true,
        autoHeight: true,
        pagination : '.swiper-pagination',
        paginationClickable :true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        scrollbar:'.swiper-scrollbar',
        mousewheelControl : true,
        observeParents:true,
        // if you need use plugins in the swiper, you can config in here like this
        debugger: true,
        // swiper callbacks
        onTransitionStart: function(swiper){
          console.log(swiper)
        },
        // more Swiper config ...
        // ...
      }
    }
  },
  // example code (if you need to get the current swiper object, find the swiper object in current component(vm) childrens)
  // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象
  computed: {
    swiper() {
      return (this.$children.find(children => children.options.name == 'currentSwiper').swiper)
    }
  },
  mounted() {
    // you can use current swiper object to do something(swiper methods)
    console.log('this is current swiper object', this.swiper)
    this.swiper.slideTo(3, 1000, false)
  }
}

export default {
  name: 'carrousel',
  data() {
    return {
      swiperOption: {
        autoplay: 3500,
        setWrapperSize :true,
        pagination : '.swiper-pagination',
        paginationClickable :true,
        mousewheelControl : true,
        observeParents:true,
      },
      swiperSlides: [1, 2, 3, 4, 5]
    }
  },
  mounted() {
    let _this = this
    setInterval(function() {
      console.log('simulate async data')
      let swiperSlides = _this.swiperSlides
      if (swiperSlides.length < 10) swiperSlides.push(swiperSlides.length + 1)
    }, 3000)
  }
}