<template>
	<section class="slider">
		<div class="slider__contents">
			<div class="splide product__slider" id="homeSlider" aria-label="Splide Basic HTML Example">
				<div class="splide__track">
						<div class="splide__list">
							<mySlide class="splide__slide" v-for="(slide, index) in dataSource" :key="slide.title"
								:is-lazy="index > 0"
								:class="{'slider__invisible-slide': index > 0}" :dataSource="slide" />
						</div>
				</div>
			</div>
		</div>
	</section>
</template>
<script>
import mySlide from "./home_slide_item";
import Splide from "@splidejs/splide";

export default {
	name: "HomeSlider",
	components: {
		mySlide,
	},
	props: {
		dataSource: {
			required: true,
			type: Array,
		},
	},
	data() {
        return {
            sliderInstance: null
        };
    },
	mounted() {
        if (window) this.mountSlider();
    },
    methods: {
        mountSlider() {
            const config = {
                direction: "rtl",
                arrows: false,
                paginationKeyboard: false,
                paginationDirection: "rtl",
                autoplay: false,
                type: "slide",
                speed: 500,
                fixedWidth: "100%",
                interval: 1200,
                lazyLoad: "sequential",
                width: "100%",

                classes: {
                    pagination: "product__slider__pagination",
                    page: "product__slider__page-item"
                }
            };
            this.sliderInstance = new Splide("#homeSlider", config);
            this.sliderInstance.mount();
        },
        unMountSlider() {
            if (this.sliderInstance) this.sliderInstance.destroy();
        }
    }
};
</script>
<style lang="scss">
@import "@splidejs/splide/dist/css/splide-core.min.css";

.product {
    &__slider {

       // contain: strict;


        &__pagination {
            bottom: $padding-default * 0.75;
            right: 0;
            text-align: center;
            width: 100%;

            li[role="presentation"] {
                display: inline-block;
            }

            .is-active {
                background: $color-primary;
                border-radius: 4px;
                width: $padding-default;
            }
        }

        &__page-item {
            $size: 8px;

            background: $color-white;
            border: none;
            border-radius: 50%;
            display: inline-block;
            height: $size;
            margin: 0 $padding-default * 0.25;
            padding: 0;
            transition: all ease-in-out 0.4s;
            vertical-align: middle;
            width: $size;
        }
    }
}

</style>
<style lang="scss" scoped>
.slider {
	background-color: $color-gray;
	direction: ltr;
	height: 740px;
	overflow: hidden;
	position: relative;

	&:before,
	&:after {
		content: "";
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 0;
	}

	&:before {
		background-image: url("~@/assets/images/slider_bg.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	&:after {
		background-color: $color-white--dark;
		opacity: 0.85;
	}

	&__contents {
		align-items: center;
		display: block;
		height: 100%;
		margin: 0 auto;
		max-width: $app-max-width;
		padding: 0 $padding-default;
		position: relative;
		z-index: 1;
	}

	&__invisible-slide {
		content-visibility: auto;
	}

	@media (min-width: $tablet) {
		&__contents {
			padding-bottom: $padding-default * 4;
		}
	}

	@media (min-width: $desktop) {
		max-height: 540px;
		height: 540px;
	}

	 
}
</style>