<template>
	<view class="video">
		<view class="item" v-for="(a,i) in list" :key="i" @click="openPage(a.video_url)">
			<image class="pic" :src="a.image"></image>
			<view class="n">{{a.title}}</view>
			<image class="play" :src="staticUrl('/static/icon-play.png')"></image>
		</view>
		 
		<view class="empty" style="margin-top: 250rpx;" v-if="total == 0">
			<u-empty mode="data" text="暂无相关信息">
			</u-empty>
		</view>
		<u-popup :show="isShow" @close="close" closeable mode="center">
			<view class="video-popup">
				<video :src="video_url" autoplay controls></video>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				list: [],
				total: 1,
				page: 1,
				category_id: "",
				video_url: "",
			};
		},
		onLoad(o) {
			this.category_id = o.id;
			this.getList();
		},
		onReachBottom() {
			if(this.list.length <= this.total){
				this.page ++
				this.getCircleList();
			}
		},
		methods: {
			close() {
				this.isShow = false
			},
			openPage(url){
				this.isShow = true;
				this.video_url = url
			},
			//获取列表
			async getList() {
				uni.showLoading({
					title: "加载中"
				})
				const { code, data, msg } = await this.$api.videoList({
					page: this.page,
					category_id: this.category_id
				})
				if (code == 200) {
					uni.hideLoading()
					this.list = this.arrayUnique(this.list.concat(data.list),'id');
					this.total = data.total
				} else {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//数组对象去重
			arrayUnique(arr, name) {
			    var hash = {};
			    return arr.reduce(function (item, next) {
			        hash[next[name]]
			            ? ""
			            : (hash[next[name]] = true && item.push(next));
			        return item;
			    }, []);
			},
		}
	}
</script>


<style lang="scss" scoped>
.video{
	width: 100%;
	min-height: calc(100vh - 44px);
	background-color: #f6f6f6;
	padding: 0 25rpx 25rpx;
	overflow: hidden;
	box-sizing: border-box;
	&-popup{
		width: 690rpx;
		height: 480rpx;
		video{
			width: 100%;
			height: 100%;
		}
	}
	.item{
		padding: 20rpx;
		overflow: hidden;
		border-radius: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		position: relative;
		.pic{
			width: 100%;
			height: 300rpx;
			border-radius: 10rpx;
		}
		.n{
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-size: 30rpx;
			font-weight: 400;
			color: #222222;
			margin-top: 30rpx;
		}
		.play{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			left: 50%;
			top: 150rpx;
			margin-left: -40rpx;
			z-index: 2;
		}
	}
}
</style>
