<!-- 瀑布流 -->
<template>
	<view class="list ">
		<view class="list-box ">
			<!-- 左边数据 -->
			<view class="list-box-ite">
				<view @click="clickItem(item)" class="list-box-ite-item" v-for="(item, index) in datas.arrListLeft"
					:key="index">
					<view class="list-box-ite-item-img">
						<u-lazy-load border-radius="24rpx 24rpx 0 0" :image="item.titleImg"></u-lazy-load>
						<view class="list-box-ite-item-img-t" v-if="item.over == 1">
							共{{ item.courseDetailsCount ? item.courseDetailsCount : 0 }}集
						</view>
						<view class="list-box-ite-item-img-t" v-else>
							更新至{{ item.courseDetailsCount ? item.courseDetailsCount : 0 }}集
						</view>
					</view>
					<view class="list-box-ite-item-txt">
						<view class="list-box-ite-item-txt-t">
							{{ item.title }}
						</view>
						<view class="list-box-ite-item-txt-l" v-if="item.courseLabel">
							{{ item.courseLabel }}
						</view>
					</view>
				</view>
			</view>
			<!-- 右边数据 -->
			<view class="list-box-ite">
				<view @click="clickItem(item)" class="list-box-ite-item" v-for="(item, index) in datas.arrListRight"
					:key="index">
					<view class="list-box-ite-item-img">
						<u-lazy-load border-radius="24rpx 24rpx 0 0" :image="item.titleImg"></u-lazy-load>
						<view class="list-box-ite-item-img-t" v-if="item.over == 1">
							共{{ item.courseDetailsCount ? item.courseDetailsCount : 0 }}集
						</view>
						<view class="list-box-ite-item-img-t" v-else>
							更新至{{ item.courseDetailsCount ? item.courseDetailsCount : 0 }}集
						</view>
					</view>
					<view class="list-box-ite-item-txt">
						<view class="list-box-ite-item-txt-t">
							{{ item.title }}
						</view>
						<view class="list-box-ite-item-txt-l" v-if="item.courseLabel">
							{{ item.courseLabel }}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>

</template>
<script setup>
	import {
		reactive,
		watch
	} from "vue";
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	const props = defineProps({
		list: {
			type: Array,
			default: []
		},
	})
	let datas = reactive({
		arrListLeft: [], //左边数据
		arrListRight: [], //右边数据
	})
	onShow(() => {
		spliceArrayListr()
	})
	watch(() => props.list, () => {
		spliceArrayListr()
	})

	function clickItem(item) {
		uni.navigateTo({
			url: "/pages/video/detail?courseId=" + item.courseId + "&courseDetailsId=" + item.courseDetailsId
		})
	}

	function spliceArrayListr() {
		datas.arrListRight = []
		datas.arrListLeft = []
		props.list.map((item, index) => {
			if (index % 2 === 0) {
				datas.arrListLeft.push(item)
			} else {
				datas.arrListRight.push(item)
			}
		})
	}
</script>
<style lang="scss">
	.list {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;

		.list-box {
			width: 686rpx;
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.list-box-ite {
			width: calc((100% - 20rpx) / 2);
			height: auto;
		}

		.list-box-ite-item {
			width: 100%;
			height: auto;
			margin-bottom: 20rpx;

			.list-box-ite-item-img {
				width: 100%;
				border-radius: 24rpx 24rpx 0 0;
				min-height: 300rpx;
				position: relative;

				image {
					width: 100%;
					min-height: 300rpx;
					border-radius: 24rpx 24rpx 0 0;
				}

				.list-box-ite-item-img-t {
					position: absolute;
					bottom: 10rpx;
					right: 0;
					max-width: 80%;
					border-radius: 10rpx;
					background-color: rgba(51, 51, 51, 0.7);
					color: #FFFFFF;
					font-size: 22rpx;
					padding: 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

				}
			}

			.list-box-ite-item-txt {
				padding: 10rpx 20rpx;
				background-color: #ffffff;
				border-radius: 0 0 24rpx 24rpx;
			}

			.list-box-ite-item-txt-t {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}

			.list-box-ite-item-txt-l {
				color: #999999;
				font-size: 22rpx;
				margin-top: 10rpx;
			}
		}







		.list-box-item {
			width: calc((100% - 20rpx) / 2);
			// height: 100%;
			min-height: 320rpx;
			border-radius: 24rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;
		}

		.list-box-item-img {
			width: 100%;
			height: 200rpx;
			border-radius: 24rpx 24rpx 0 0;

			image {
				width: 100%;
				height: 200rpx;
				border-radius: 24rpx 24rpx 0 0;
			}

		}

		.list-box-item-txt {
			width: 100%;
			// height: 120rpx;
			padding: 20rpx 0;
			border-radius: 0 0 24rpx 24rpx;
		}

		.list-box-item-txt-t {
			width: 100%;
			padding: 0 20rpx;
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.list-box-item-txt-l {
			color: #999999;
			font-size: 22rpx;
			margin-top: 10rpx;
			padding: 0 20rpx;
		}
	}
</style>