<template>
	<div class="infinite">
		<h-infinite
			@scroll="handlerInfiniteOnload"
			:distance="150"
		>
			<h-list :dataSource="dataSource">
				<!-- <div class="infinite-refresh">松开手刷新吧</div> -->
				<h-list-item slot="renderItem" slot-scope="item, index">{{item}}</h-list-item>
				<div class="nothing">哎吆！见底了！</div>
			</h-list>
		</h-infinite>

		<h-loading v-if="loading && next" />
	</div>
</template>

<script>
	export default {
		name: 'infinite',
		data() {
			return {
				dataSource: [],
				distance: 50,
				index: 0,
				loading: false,
				next: true
			}
		},
		mounted() {
			for (var i = 0; i < 20; i++) {
				this.dataSource.push(i);
				this.index = i + 1;
			}
		},
		methods: {
			handlerInfiniteOnload() {
				if (this.loading) return;
				this.loading = true;
				fnLoad(this);
			}
		}
	}

	function fnLoad(that) {
		if (that.dataSource.length < 80) {
			for (var i = 0; i < 20; i++) {
				that.dataSource.push(that.index + i);

				if (i == 19) {
					if (that.index%20 == 0) {
						that.index = that.index + i + 1;
					}else{
						that.index = i + 1;
					}
				}
			}
		}else{
			that.next = false;
		}

		setTimeout(() => {
			that.loading = false;
		}, 500)
	}
</script>

<style lang="scss">
	.infinite {
		height: 500px;
		background-color: #fff;
		overflow: hidden;
		position: relative;
		
		.h-infinite-scroll {
			height: 100%;
			overflow-y: auto;

			.h-list-container {
				margin-bottom: 0;
			}
		}
	}

	// .h-list-infinite-refresh {
	// 	margin-top: -45px;
	// }

	.infinite-refresh, .nothing {
		padding: 12px 15px;
		text-align: center;
	}
</style>