<template>
    <div class="col-lg-9">
        <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
             class="testimonial_wrap testimonial_style1 carousel_slider owl-carousel owl-theme nav_style2"
             data-nav="true" data-dots="false" data-center="true" data-loop="false" data-autoplay="true" data-items='1'>
            <div class="testimonial_box" v-for="item in data">
                <div class="testimonial_desc">
                    <p v-html="item.content"></p>
                </div>
                <div class="author_wrap">
                    <div class="author_img">
                        <img :src="item.image" :alt="item.name">
                    </div>
                    <div class="author_name">
                        <h6>{{ item.name }}</h6>
                        <span>{{ item.company }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data: function () {
        return {
            isLoading: true,
            data: []
        };
    },
    props: {
        url: {
            type: String,
            default: () => null,
            required: true
        },
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            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>
