<template>
    <div class="swiper-container">
        <slot name="parallax-bg"></slot>
        <div :class="defaultSwiperClasses.wrapperClass">
            <slot></slot>
        </div>
        <slot name="pagination"></slot>
        <slot name="button-prev"></slot>
        <slot name="button-next"></slot>
        <slot name="scrollbar"></slot>
    </div>
</template>

<script>
import Swiper from 'swiper';
require('swiper/dist/css/swiper.css');

/*var browser = typeof window !== 'undefined'
if (browser) {
    window.Swiper = require('swiper')
    require('swiper/dist/css/swiper.css')
}*/
export default {
    name: 'swiper',
    props: {
        options: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            defaultSwiperClasses: {
                wrapperClass: 'swiper-wrapper'
            }
        }
    },
    ready() {
        // if (!this.swiper && browser) {
        if (!this.swiper) {
            this.swiper = new Swiper(this.$el, this.options)
        }
    },
    mounted() {
        var self = this
        var mount = function () {
            // if (!this.swiper && browser) {
            if (!this.swiper) {
                delete self.options.notNextTick
                var setClassName = false
                for (var className in self.defaultSwiperClasses) {
                    if (self.defaultSwiperClasses.hasOwnProperty(className)) {
                        if (self.options[className]) {
                            setClassName = true
                            self.defaultSwiperClasses[className] = self.options[className]
                        }
                    }
                }
                var mountInstance = function () {
                    self.swiper = new Swiper(self.$el, self.options)
                }
                setClassName ? self.$nextTick(mountInstance) : mountInstance()
            }
        }
        // this.options.notNextTick ? mount() : this.$nextTick(mount)
        this.options.notNextTick ? mount() : setTimeout(mount, 1)
    },
    methods: {
        update(){
            if (this.swiper) {
                this.swiper.update()
            }
        }
    },
    /* updated() {
        if (this.swiper) {
            this.swiper.update()
        }
    }, */
    beforeDestroy() {
        if (this.swiper) {
            this.swiper.destroy()
            delete this.swiper
        }
    }
}
</script>
