<view id="u-left-column" class="u-column">
	<slot name="left" :leftList="leftList"></slot>
</view>
<view id="u-right-column" class="u-column">
	<slot name="right" :rightList="rightList"></slot>
</view>

data() {
	return {
		leftList: [],
		rightList: [],
		tempList: [],
		scrollTop: 0,
	}
}

async splitData() {
	if (!this.tempList.length) return;
	let leftRect = await this.$uGetRect('#u-left-column');
	let rightRect = await this.$uGetRect('#u-right-column');
	// 如果左邊小于或等于右邊，就添加到左邊，否則添加到右邊
	let item = this.tempList[0];
	// 解決多次快速上拉后，可能數(shù)據(jù)會亂的問題，因為經(jīng)過上面的兩個await節(jié)點查詢阻塞一定時間，加上后面的定時器干擾
	// 數(shù)組可能變成[]，導致此item值可能為undefined
	if (!item) return;
	if (leftRect.height < rightRect.height) {
		this.leftList.push(item);
	} else if (leftRect.height > rightRect.height) {
		this.rightList.push(item);
	} else {
		// 這里是為了保證第一和第二張?zhí)砑訒r，左右都能有內(nèi)容
		// 因為添加第一張，實際隊列的高度可能還是0，這時需要根據(jù)隊列元素長度判斷下一個該放哪邊
		if (this.leftList.length <= this.rightList.length) {
			this.leftList.push(item);
		} else {
			this.rightList.push(item);
		}
	}
	// 移除臨時列表的第一項
	this.tempList.splice(0, 1);
	// 如果臨時數(shù)組還有數(shù)據(jù)，繼續(xù)循環(huán)
	if (this.tempList.length) {
		this.splitData();
		return
	}
}

<template>
	<scroll-view class="scroll-y" scroll-y="true" @scrolltolower="tolower" :scroll-top="scrollTop">
		<view class="u-waterfall" id="list">
			<view id="u-left-column" class="u-column">
				<slot name="left" :leftList="leftList"></slot>
			</view>
			<view id="u-right-column" class="u-column">
				<slot name="right" :rightList="rightList"></slot>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "waterfall",
		props: {
			value: {
				// 瀑布流數(shù)據(jù)
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			scrolltolower: {
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				leftList: [],
				rightList: [],
				tempList: [],
				scrollTop: 0,
			}
		},
		watch: {
			copyFlowList(nVal, oVal) {
				this.tempList = this.cloneData(this.copyFlowList);
				this.splitData();
			}
		},
		mounted() {
			this.tempList = this.cloneData(this.copyFlowList);
			this.splitData();
			// this.$on('clearWaterFall', this.clear)
		},
		computed: {
			// 破壞flowList變量的引用，否則watch的結(jié)果新舊值是一樣的
			copyFlowList() {
				return this.cloneData(this.value);
			}
		},
		methods: {
			async splitData() {
				if (!this.tempList.length) return;
				let leftRect = await this.$uGetRect('#u-left-column');
				let rightRect = await this.$uGetRect('#u-right-column');
				// 如果左邊小于或等于右邊，就添加到左邊，否則添加到右邊
				let item = this.tempList[0];
				// 解決多次快速上拉后，可能數(shù)據(jù)會亂的問題，因為經(jīng)過上面的兩個await節(jié)點查詢阻塞一定時間，加上后面的定時器干擾
				// 數(shù)組可能變成[]，導致此item值可能為undefined
				if (!item) return;
				if (leftRect.height < rightRect.height) {
					this.leftList.push(item);
				} else if (leftRect.height > rightRect.height) {
					this.rightList.push(item);
				} else {
					// 這里是為了保證第一和第二張?zhí)砑訒r，左右都能有內(nèi)容
					// 因為添加第一張，實際隊列的高度可能還是0，這時需要根據(jù)隊列元素長度判斷下一個該放哪邊
					if (this.leftList.length <= this.rightList.length) {
						this.leftList.push(item);
					} else {
						this.rightList.push(item);
					}
				}
				// 移除臨時列表的第一項
				this.tempList.splice(0, 1);
				// 如果臨時數(shù)組還有數(shù)據(jù)，繼續(xù)循環(huán)
				if (this.tempList.length) {
					this.splitData();
					return
				}
			},
			// 復制而不是引用對象和數(shù)組
			cloneData(data) {
				return JSON.parse(JSON.stringify(data));
			},
			tolower(e) {
				this.scrolltolower()
			},
			clear() {
				this.leftList = []
				this.rightList = []
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.scroll-y {
		height: 78vh;
		margin-top: 18px;
	}

	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
		width: 45vw;
		word-break: break-all;
	}
</style>

<script>
import waterfall from '../../component/waterfall/index.vue'
export default {
	name: 'content',
	components: {
		waterfall
	}
}
</script>

<template>
	<view class="main">
		<waterfall :value="dataList" :scrolltolower="getRecommendLove" ref="child">
			<template v-slot:left="left">
				<view v-for="item in left.leftList" :key="item.id" class="left-content" @click="copy(item)">
					<view class="item">
						{{item.content}}
					</view>
				</view>
			</template>
			<template v-slot:right="right">
				<view v-for="item in right.rightList" :key="item.id" class="right-content" @click="copy(item)">
					<view class="item">
						{{item.content}}
					</view>
				</view>
			</template>
		</waterfall>
	</view>
</template>