<template>
    <div class="row">
        <div class="col-7">
            <slot name="loading"></slot>
            <div class="row">
                <div class="col">
                    <div class="row align-items-center justify-content-center p-t-50 p-b-50" >
                        <div class="col-10 m-t-50">
                            <div class="row align-items-center justify-content-center  hint-text">
                                <div class="col-9  hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
                            </div>
                            <div class="row text-center">
                                <div class="col">
                                    <div class="row m-t-20">
                                        <div class="col">
                                            <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">No Results Found</p>
                                        </div>
                                    </div>
                                    <div class="row m-t-5 align-items-center justify-content-center">
                                        <div class="col">
                                            <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">Try adjusting your filters to find what you are looking for.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row" v-for="item in data" v-bind:key="item.id" :data="item">
                                <div class="col">
                                    <slot name="list" :data="item"></slot>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <pagination-component class="m-b-20" ref="pagination"></pagination-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row m-b-25">
                <div class="col ">
                    <slot name="header"></slot>

                </div>
            </div>
            <div class="row">
                <div class="col">
                    <img class="w-100" src="/images/search-illustration.png" />
                </div>
            </div>
            <search-component></search-component>
        </div>
    </div>
</template>

<script>
    import request from '../../../mixins/requestMixin'

    export default {
        props: {
            section:{
                type: String,
                required: true
            },
            endpoint: {
                type: String,
                required: true
            },
            options: {
                default () {
                    return {}
                }
            }
        },
        data(){
            return {
                parameters: null,
                data: [],
                filters: this.options
            }
        },
        validations: {},
        created(){
            this.fetchList();
        },
        methods: {
            fetchList(page = 1){
                this.setDecoratorDefault();
                this.submit(this.endpoint + '?page=' + page + '&filters=' + JSON.stringify(this.filters), 'get', this.section, false, false)
            },
            successHandler(response){
                this.data = response.payload;
                this.$refs.pagination.makePagination(response.meta, response.links);
            },
            setDecoratorDefault(){
                this.filters.per_page = this.filters.per_page !== undefined ? this.filters.per_page : 10;
                this.filters.order_by = this.filters.order_by !== undefined ? this.filters.order_by : {
                    column: 'id',
                    DESC: true
                };
            }
        },
        mixins: [request]
    }
</script>

<style scoped>

</style>