<template>
	<scroll-view 
		scroll-y="true" 
		style="overflow: hidden;"
		@scrolltolower="onDowning"
		@touchstart="onStart"
		@touchend="onEnd"
		@touchmove="onMove"
		@scroll="onScroll"
	>
		
		<view class="list-pull-wrap" :style="'height:' + pullNum + 'rpx'">
			<view v-if="loading" class="list-pull-block" >
				<view class="list-pull-icon">⚪</view>
				<view class="list-pull-text" style="margin-left: 16rpx">加载中...</view>
			</view>
			<view v-else-if="trigging" class="list-pull-block">
				<view class="list-pull-icon">↑</view>
				<view class="list-pull-text">松开刷新</view>
			</view>
			<view v-else class="list-pull-block">
				<view class="list-pull-icon">↓</view>
				<view class="list-pull-text">下拉刷新</view>
			</view>
		</view>
<!-- 		<template v-if="loading">
			<l-load style="text-align: center;" title="努力加载中..."/>
			<view class=""></view>
		</template> -->
		<template v-if="!dataSource || dataSource.length == 0">
			<l-empty :emptyTitle="emptyTitle" :emptySubTitle="emptySubTitle" wrapClass="list-empty-wrap"/>
		</template>
		<template v-else>	
			<view v-for="(item,index) in dataSource" :key="'list-item-' + index" :class="itemClass">
				<slot :item="item" :index="index"/>
			</view>
			<view v-if="downing" class="list-down-block">
				努力加载中
			</view>
			<view v-if="lasting" class="list-last-block">
				已经到底了
			</view>
		</template>
	</scroll-view>
</template>

<script>
	/**
	 * list 组件
	 * emptyTitle
	 * emptySubTitle
	 * threshold
	 * itemClass
	 * loading
	 * pullEnable
	 * dataSource
	 * pulling
	 * downing
	 * lasting
	 */
	export default {
		name: 'fl-list',
		data() {
			return {
				scrollTop: 0,
				startNum: 0,
				pullNum: 0,
				trigging: false,
				isTriggered: false,
				isPulling: false,
			}
		},
		model:{
			prop: "pulling",
			event: "onPulling"
		},
		props: {
			emptyTitle: {
				type: String,
				default: '',
			},
			emptySubTitle: {
				type: String,
				default: '',
			},
			threshold: {
				type: [Number, String],
				default: 300
			},
			itemClass: {
				type: String,
				default: '',
			},
			loading: {
				type: Boolean,
				default: true
			},
			pullEnable: {
				type: [Boolean,String],
				default: false
			},
			dataSource: {
				type: Array,
				default: []
			},
			pulling: {
				type: [Boolean,String],
				default: false
			},
			downing: {
				type: [Boolean,String],
				default: false
			},
			lasting: {
				type: [Boolean,String],
				default: false
			}
		},
		watch: {
			pulling: function(newVal) {
				if(!newVal) {
					this.pullNum = 0;
				}
			}
		},
		methods: {
			onScroll: function(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			
			onStart: function(e) {
				
				if(this.pullEnable && this.scrollTop < 50 ) {//容错距离50
					this.startNum = e.changedTouches[0].pageY - this.pullNum;
				}
			},
			onMove: function(e) {
				if(this.pullEnable && this.startNum) {					
					const endNum = e.changedTouches[0].pageY;
					const pullNum = endNum - this.startNum;
					this.trigging = pullNum > this.threshold;//到达阈值
					this.pullNum = pullNum > this.scrollTop ? (pullNum - this.scrollTop) : 0;
				}
			},
			onEnd: function(e) {
				if(this.pullEnable && this.startNum) {
					const endNum = e.changedTouches[0].pageY;
					const pullNum = endNum - this.startNum;
					if(!this.pulling && pullNum > 0) {					
						if(pullNum > this.threshold) {
							this.pullNum = 84;
							this.$emit('onPulling');
						} else {
							this.pullNum = 0;
						}
					}
					
					if(this.pulling) {
						this.pullNum = 84;
					}
				}
				this.startNum = 0;
			},
			onDowning: function() {
				if(this.downing) return;
				this.$emit('onDowning');
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
