<template>
    <div v-if="nextFlag">
        <div class="weui-loadmore" v-if="loading">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips"><img src="../img/loading.gif"></span>
        </div>
        <div class="loading-com" v-else @click="loadMore">
            <div>加载更多</div>
        </div>
    </div>
    <div v-else class="weui-loadmore weui-loadmore_line">
        <span class="weui-loadmore__tips"></span>
    </div>
</template>

<script>
    import Vue from 'vue'

    export default {
        props : {
            nextFlag : true,
            loading : true
        },
        mounted() {
            let self = this

            $(window).scroll(function () {
                let scrollTop = $(this).scrollTop()
                let screenHeight = $(window).height()
                let $this = $(this)
                let bodyHeight = $('body').height()
                
                self.$emit('addScrollEvent')

                if(self.nextFlag==0 || self.loading) return
                if (scrollTop + screenHeight + 65 >= bodyHeight && !self.isloading) {
                    self.$emit('getLoadMore')
                }
                
            })
        },
        methods : {
            loadMore() {
                this.$emit('getLoadMore')
            }
        }
    }
</script>