<template>
    <div class="load-more-wrapper" @touchstart="touchStart($event)" @touchend="touchEnd($event)">
        <div class="inner" :style="'padding-top:'+options.top+'px'">
            <slot></slot>
            <div class="load-more" v-show="enableLoadMore">{{loadMoreText}}</div>  
            <div class="load-end" v-show="!enableLoadMore" v-if="getIsBottom">已经到底了!</div> 
            <div :style="'height:'+options.bottom+'px'"></div> 
        </div>
    </div>
</template>
<script>
export default {
    name: "myLoadMore",
    props: {
        options:{
            type: Object,
            default:{
                bottom:0,
                top:0,
                showBottom:true
                }
        },
        enableLoadMore: {
            type: Boolean,
            default: true
        }, 
        onLoadMore: {
            type: Function,
            default: undefined,
            require: false
        }
    },
    data() {
        return {
            loadMoreText: "上拉加载更多",
            startX: 0,
            startY: 0,
            isLoading: false,
        }
    }, 
    computed:{
        getIsBottom(){
            if('showBottom' in this.options){
                return this.options.showBottom
            }else{
                return true;
            }
            
        }
    },
    methods: {
        touchStart(e) {
            this.startY = e.targetTouches[0].pageY;
            this.startX = e.targetTouches[0].pageX;  
        },
        scrollToEnd(e) {
            let scrollHeight = this.$el.scrollHeight; 
            let clientHeight = this.$el.clientHeight; 
            let scrollTop = this.$el.scrollTop;  
            // || this.enableLoadMore
            if (scrollTop + clientHeight >= scrollHeight ) {
                this.doLoadMore()  
            } 
        },
        touchEnd(e) {
            if (this.isLoading) {
                return;
            }

            let endX = e.changedTouches[0].pageX,
                    endY = e.changedTouches[0].pageY,
                    dy = this.startY - endY,
                    dx = endX - this.startX;
            if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
                return;
            }
            if (endY < this.startY) {
                this.scrollToEnd(e)
            }
        },
        doLoadMore() {
            if(!this.enableLoadMore)return;
            this.isLoading = true
            this.loadMoreText = '加载中...'
            this.onLoadMore(this.loadDone);
        },
        loadDone() {
            console.log('======')
            this.isLoading = false;
            this.loadMoreText = '上拉加载更多'
        }
    }
}
</script>
<style lang="stylus" scoped>
.load-more-wrapper {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition-duration: 300ms;
    .load-more, .load-end {
        color: #aea699;
        font-size: .26rem;
        margin: .3rem 0;
        text-align: center;
    }
}

</style>