<template>
    <div>
        <section>
            <div class="container">
                <div class="list_style">
                    <div class="row">
                        <div class="col-lg-12 mt-4 mt-md-0">
                            <div class="back_left">
                                <div class="dashes">
                                    <img src="/uploads/img/dashes_2.png">
                                </div>
                                <div class="padding-right-5 padding-left-5">
                                    <div v-if="gridView" class="row padding-top-25">
                                        <div class="col-lg-3 col-md-6 padding-right-10 padding-left-10" v-for="shop in shops">
                                            <shop :shop="shop"></shop>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="loadMore" v-show="loadMore"><img src="/images/loading.gif" /></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
    import shop from './shop'
    export default {
        components: {
            shop,
        },
        data() {
            return {
                gridView:true,
                page:1,
                shops:[],
                lastPage:0,
                loadMore:false,
            }
        },
        watch:{
        },
        beforeMount(){
        },
        mounted() {
            this.getAdRequest()
            $(window).bind('mousewheel DOMMouseScroll',(event)=> {
                if(event.originalEvent.wheelDelta<0 && this.page <= this.lastPage && !this.loadMore){
                    if($(window).outerHeight()+$(window).scrollTop() > Math.round($('#loadMore').offset().top +200)){
                        this.loadMore=true
                        this.getAdRequest()
                    }
                }
            })

        },
        methods:{
            getAdRequest(){
                let lastAds=this.shops
                axios.post('/shop/show-all', {page:this.page}).then(res=>{
                    let adv = res.data.data.data;
                    this.shops.push.apply(lastAds,adv)
                    this.page = res.data.data.current_page + 1
                    this.lastPage=res.data.data.last_page
                    this.loadMore=false
                })
            },
        },
    }
</script>
