<template>
	<view>
		<view>
			<uni-search-bar @confirm="search" ></uni-search-bar>
		</view>
		<list style="width: 100%;">
			<!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
			<cell v-for="(item,index) in videos" :key="item.id">
				<video class="video" :id="'video'+index" :src="item.mediaurl" controls object-fit="cover"
					:poster="item.coverurl"></video>
			</cell>
		</list>
		<view style="color:gray;text-align: center;margin-top:20upx">{{loadingText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				loadingText: '加载中...',
				videos: []
			}
		},
		onLoad() {
			this.getVideos()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getVideos()
		},
		onReachBottom() {
			this.page = this.page + 1
			this.getVideos()
		},
		methods: {
			search(){
				
			},
			getVideos() {
				this.loadingText = '加载中...'
				this.$u.api.getVideos({
					page: this.page
				}).then(res => {
					uni.stopPullDownRefresh()
					if (this.page == 1) {
						if (res.data.results.length == 0) {
							this.loadingText = '暂无视频'
						} else {
							this.loadingText = ''
							this.videos = res.data.results
						}
					} else {
						this.loadingText = ''
						this.videos.concat(res.data.results)
					}
				}).catch(res => {
					uni.stopPullDownRefresh()
					if (res.code == 404) {
						this.loadingText = '到底了'
					}
				})
			}
		}
	}
</script>

<style>
	.video {
		width: 100%;
		height: 380rpx;
	}
</style>
