<template>
    <div>
        <section class="grig-home">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 item-grid" v-for="list in lists">
                        <img :src="list._source.imagem" class="img-responsive img-grid">
                    </div>
                    <infinite-loading :on-infinite="onInfinite" :spinner="'spiral'"  ref="infiniteLoading" ></infinite-loading>
                </div>
            </div>
        </section>
    </div>
</template>
<style>
</style>
<script type="text/babel">
    import InfiniteLoading from 'vue-infinite-loading';
    let api = 'MY API URL'
    export default {
        data() {
            return {
                lists: [],
            }
        },
        methods: {
            onInfinite() {
                this.$Progress.start()
                this.$http.get(api, {params: {page: this.lists.length / 3}}).then((response) => {
                    if (response.data.hits.hits.length) {
                        this.lists = response.data.hits.hits
                        //window.console.log(this.lists)
                        this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
                        if (this.lists.length === 2) {
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
                        }
                    } else {
                        this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
                    }
                }, (error) => {
                    this.$Progress.fail()
                    window.console.log(error)
                });
            },
            start () {
                this.$Progress.start()
            },
            set (num) {
                this.$Progress.set(num)
            },
            increase (num) {
                this.$Progress.increase(num)
            },
            decrease (num) {
                this.$Progress.decrease(num)
            },
            finish () {
                this.$Progress.finish()
            },
            fail () {
                this.$Progress.fail()
            },
        },
        components: {
            InfiniteLoading,
        },
    };
</script>