<!--此版本的下拉组件添加了重置数据的时间监听  by Harry-->
<style scoped>
.dropload-container {
    width: 100%;
    /* background: #fff; */
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
}

.hint {
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<template>
    <div :id="lname" class="dropload-container" :style="heightComputed">
        <slot></slot>
        <div v-show="isLoading || canShowHint" class="hint c3 t2">
            <span class="loading" v-if="isLoading && is_loading_icon"></span>
            <!-- <span class="noMoreLine" v-if="loadHint==='没有更多了'" style="margin-right:.15rem"></span> -->
            <span style="font-size:.24rem" v-if="!isLoading && canShowHint">{{ loadHint }}</span>
            <!-- <loading :fullscreen='false' :iconHeight='70'  :iconWidth="55"  v-show="isLoading"/> -->
            <span class="load-spinner" v-if="isLoading"></span>
            <!-- <span class="noMoreLine" v-if="loadHint==='没有更多了'" style="margin-left:.15rem"></span> -->
        </div>
    </div>
</template>

<script>
import EventBus from '~publicAsset/libs/eventbus';
export default {
    props: {
        //            计算时需要额外增加的高度
        lfixheight: {
            required: true,
        },
        // 获取高度标识
        courseFlag: {
            required: false,
        },
        //            加载冒泡事件名
        lname: {
            required: true,
        },
        //            滚动中冒泡事件名
        lscrolleventname: {
            required: false,
            default: null,
        },
        //            非0是用body的滚动条
        type: {
            default: 0,
        },
        load_finish_hint: {
            default: '没有更多了~',
        },
        is_show_finish_hint: {
            //是否显示加载完成文案
            default: true,
        },
        is_loading_icon: {
            default: false,
        },
    },
    forceSetLoadFinished: function(hasmore) {
        EventBus.$emit('force_no_more_data', hasmore)
    },
    data: function() {
        return {
            //加载过程中
            isLoading: false,
            //提示信息
            loadHint: '加载中...',
            innerNoMoreData: false,
            boxHeight: this.lfixheight,
            // 是否展示‘没有更多’提醒
            canShowHint: false,
        }
    },
    created: function() {
        let $this = this
        /**
         * 手动加载数据
         */
        EventBus.$on('command_load_data', () => {
            this.loadData()
        })

        //重置数据
        EventBus.$on('reset_data', function() {
            // 重置数据
            $this.innerNoMoreData = false
            $this.isLoading = false
            $this.canShowHint = false
            $this.loadHint = '加载中...'
        })

        //外部请调用手动结束逻辑，内部使用该通信
        EventBus.$on('force_no_more_data', function(hasmore) {
            // 强制设置无数据了
            $this.innerNoMoreData = !hasmore
            $this.isLoading = false
            $this.canShowHint = false
            if (hasmore) {
                $this.loadHint = '加载中...'
            } else {
                $this.loadHint = $this.is_show_finish_hint ? $this.load_finish_hint : ''
            }
        })
    },
    computed: {
        heightComputed: function() {
            return this.type == 0 ? ' height: ' + this.lfixheight : ''
        },
    },
    mounted: function() {
        let that = this
        //判断页面是否出现滚动条
        document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)
            ? (that.scroll = true)
            : (that.scroll = false)
        if (that.type == 0) {
            document.body.style.overflowX = 'hidden'
            document.body.style.overflowY = 'hidden'
        }
        this.$nextTick(function() {
            let box = null
            if (that.type == 0) {
                box = that.$el
            } else {
                //监听body的滚动条
                box = window
            }
            box.addEventListener('scroll', this.onScroll)
            //预加载数据
            that.loadData()
        })
    },
    methods: {
        onScroll: function(event) {
            let that = this
            if (that.lscrolleventname != null) {
                EventBus.$emit(that.lscrolleventname, event.target.scrollTop)
            }

            let box = null
            if (that.type == 0) {
                box = that.$el
            } else {
                //监听body的滚动条
                box = document.body
            }

            // 判断是否有传courseFlag
            let fixheight
            if (this.courseFlag) {
                fixheight =
                    that.type == 0 ? document.getElementById(this.lname).offsetHeight + 'px' : window.innerHeight + 'px'
            } else {
                fixheight = that.type == 0 ? that.lfixheight : window.innerHeight + 'px'
            }

            if (that.isLoading || that.innerNoMoreData) {
                //正在加载中、或者已经加载全部，则不处理le
                return
            }
            //如果fixheight带有单位px，去除掉先
            let fixH = fixheight.replace('px', '')
            fixH = parseFloat(fixH)
            //当前总高度
            let scrollHeight = box.scrollHeight

            //当前滚动高度
            let scrollTop = box.scrollTop || document.documentElement.scrollTop
            //如果只有一定距离了，触发加载更多
            if (scrollHeight - (scrollTop + fixH) < 120 && !that.isLoading) {
                that.canShowHint = true
                that.loadData()
            }
        },
        loadData: function() {
            let that = this
            let eventName = that.lname
            that.isLoading = true
            console.log('eventName:' + eventName + '      type:' + that.type)
            //标记进入加载中状态
            that.loadHint = '加载中...'
            EventBus.$emit(eventName, function(hasMoreData) {
                //标记本次加载已完成
                console.log('hasMoreData', hasMoreData)
                that.isLoading = false
                that.innerNoMoreData = !hasMoreData
                if (hasMoreData) {
                    that.loadHint = '滑动加载更多'
                } else {
                    that.loadHint = that.is_show_finish_hint ? that.load_finish_hint : ''
                }
            })
        },
    },
}
</script>

<style scoped>
.loading {
    display: inline-block;
    height: 0.2rem;
    width: 0.2rem;
    border-radius: 100%;
    margin: 0.04rem;
    border: 0.01rem solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
.noMoreLine {
    display: inline-block;
    width: 0.54rem;
    height: 1px;
    background-color: #888;
    position: relative;
    top: -0.075rem;
}
.load-spinner {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 100%;
    border: 0.04rem solid #fff;
    border-top-color: #999;
    border-right-color: #999;
    animation: circle infinite 0.75s linear;
}
@keyframes circle {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
