<template>
    <div class="my-scroll">
        <slot></slot>
        <div class="loading" v-if="!over&&loading">{{loadtext}}</div>
        <div class="over" v-if="over&&!loading">{{overtext}}</div>
    </div>
</template>

<script>
export default {
    name: "MyScroll",
    props: {
        over: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        overtext: {
            type: String,
            default: "没有更多数据了"
        },
        loadtext: {
            type: String,
            default: "加载中"
        }
        // list:{
        //     type:Array,
        //     default:[]
        // }
    },
    watch: {
        // list(){
        // }
    },
    mounted() {
        this.OnEvent();
    },
    updated() {},
    beforeDestroy() {
        window.removeEventListener("scroll", this.EventFun);
    },
    methods: {
        OnEvent() {
            var that = this;
            var _win = window;
            _win.addEventListener("scroll", this.EventFun);
        },
        EventFun() {
            var that = this;
            if (that.loading) {
                return;
            }
            var scrollTop =
                document.documentElement.scrollTop ||
                window.pageYOffset ||
                document.body.scrollTop;
                
            var scrollHeight = document.documentElement.scrollHeight;
            var windowHeight = document.documentElement.clientHeight;
            // console.log('滚动',scrollTop,windowHeight,scrollHeight)
            if (scrollTop + windowHeight == scrollHeight) {
                if (that.over) {
                    return;
                }
                that.$emit("OnLoad");
            }
        }
    }
};
</script>

<style>
.over {
    line-height: 80px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #999;
}
.loading {
    line-height: 80px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #999;
}
</style>
