<template>
    <div class="ps-section__content">
        <div v-if="isLoading">
            <div class="half-circle-spinner">
                <div class="circle circle-1"></div>
                <div class="circle circle-2"></div>
            </div>
        </div>
        <div v-if="!isLoading" v-carousel v-bind:id="id"
             class="ps-carousel--nav owl-slider"
             data-owl-auto="false"
             data-owl-loop="false"
             data-owl-speed="10000"
             data-owl-gap="30"
             data-owl-nav="true"
             data-owl-dots="true"
             data-owl-item="7"
             data-owl-item-xs="2"
             data-owl-item-sm="3"
             data-owl-item-md="4"
             data-owl-item-lg="5"
             data-owl-item-xl="6"
             data-owl-duration="1000"
             data-owl-mousedrag="on"
        >
            <div class="ps-product ps-product--inner" v-for="item in data" :key="item.id" v-if="data.length" v-html="item"></div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                isLoading: true,
                data: []
            };
        },
        props: {
            url: {
                type: String,
                default: () => null,
                required: true
            },
            id: {
                type: String,
                default: () => null,
            },
        },
        mounted() {
          this.getProducts();
        },
        methods: {
            getProducts() {
                this.data = [];
                this.isLoading = true;
                axios.get(this.url)
                    .then(res => {
                        this.data = res.data.data ? res.data.data : [];
                        this.isLoading = false;
                    })
                    .catch(res => {
                        this.isLoading = false;
                        console.log(res);
                    });
            },
        },
    }
</script>
