<template>
    <div>
        <div class="row">
            <div class="col-lg-4 col-md-6 padding-right-10 padding-left-10" v-for="ad in advertisements">
                <advertisement :ad="ad.likable"></advertisement>
            </div>
        </div>
        <div id="loadMore" v-show="loadMore"><img src="/images/loading.gif" /></div>
    </div>

</template>

<script>
    import advertisement from '../../list/advertisement'
    export default {
        components: {
            advertisement
        },
        data() {
            return {
                advertisements:[],
                page:1,
                lastPage:null,
                loadMore:false
            }

        },
        watch:{

        },
        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.advertisements
                axios.get('/advertisement/liked-list?page='+this.page).then(res=>{
                    let adv = res.data.data.data;
                    this.advertisements.push.apply(lastAds,adv)
                    this.page = res.data.data.current_page + 1
                    this.lastPage=res.data.data.last_page
                    this.loadMore=false
                })
            },
        }
    }
</script>

<style scoped>

</style>