<template>
	<view class="">
		<view class="video-list" v-for="(item,index) in videList" :key='index'>
			<view class="video-item" @click="videoDetail(item.id)">
				<view class="image">
					<image :src="item.cover" mode=""></image>
					<!-- <video id="myVideo" src="https://qingyujiankang.baomihua222.top/storage/videos/1a9f8d7d2eb55f4f96c14118606d1c33.mp4"  controls
				></video> -->
				</view>
				<view class="video-title">
					{{item.title? item.title : '--'}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				videList: [],
				page: 1,
				links:''
			}
		},
		onLoad() {
			this.getVideo()
		},
		onReachBottom() {
			// let page = 1
			let page=1
			page++
			if(this.links){
			   	this.page=page
				this.getVideo()
			}else{
				uni.showToast({
					title: '暂无更多',
					icon: 'none'
				})
				
			}
	
	
		},
		methods: {
			getVideo: function() {
				uni.showLoading()
				app.request('/resources-home?page=' + this.page, '', 'get').then(res => {
					let data = res.data.data.data
					uni.hideLoading()
					if (res.statusCode == 200) {
							this.videList = res.data.data.data
							this.links=res.data.data.meta.pagination.links
					}
					console.log(res, 'pppp')

				})
			},
			//跳转视频详情
			videoDetail: function(id) {
				console.log(id, 'ooo')
				uni.navigateTo({
					url: './video_detail?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	.video-list {
		.video-item {
			background-color: #FFFFFF;
			margin: 0 30upx;
			margin-top: 30upx;
			// height: 300upx;
		}

		.image {
			height: 320upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 320upx;
			}
		}

		.video-title {
			padding: 30upx 20upx;
			line-height: 40upx;
			font-size: 30upx;

		}

	}
</style>
