<template>
	<view class="content">
		<view class="top-img"><image v-if="info" :src="'https://xyb.wlkjwl.cn/'+info.image" mode="aspectFill"></image></view>
		<view class="top-title">{{info.title}}</view>
		<view class="top-btn">
			<view @tap="goAdd">完成看视频任务</view>
		</view>
		<view class="top-process">
			<view class="bg-blue" :style="[{ width:true?percent:''}]">{{percent}}</view>
		</view>
		<view class="top-go" @tap="goBack">
			前往榜单，为偶像投票赢取冠军
		</view>
		<view class="top-guan">
			<image src="../../static/guan.png" mode="aspectFit"></image>
			<view>发起人：{{info.manager}}</view>
		</view>
		<view class="top-text">资源介绍</view>
		<view class="top-content">
			<view>【解锁要求】参与人数达到目标人数，并且每人一个月内至少签到{{info.targetDay}}次，即可解锁大屏资源</view>
			<view>【展示时长】该资源投放时间=1天</view>
			<view>【活动时间】即日起{{info.endTime}}结束</view>
			<view>【参与条件】由于资源珍贵，为了长期能够供应更多更好的资源，目前很遗憾，普通用户只能参与一个资源解锁，VIP用户可以参与所有资源解锁</view>
		</view>
		<view class="top-text">参与成员</view>
		<view class="top-list">
			<view class="top-list-item" v-for="(item,index) in dataList" :key="index">
				<view>{{item.rankingNum}}</view>
				<image :src="item.head" mode="aspectFill"></image>
				<view class="right">
					<view>{{item.nick}}</view>
					<view>已完成{{item.much}}次</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let rewardedVideoAd = null;
	export default {
		data() {
			return {
				percent:'0%',
				id:'',
				starId:'',
				info:'',
				dataList:""
			};
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id;
			this.starId = option.starId;
			this.getActiveInfo(option.id,option.starId)
			this.getTenLength(option.id,option.starId)
			this.loadgoAdd();
			// this.joinActive()
		},
		methods:{
			getActiveInfo(id,starId){
				this.request({
					url:this.path+'/api/xyb/star/activeInfo',
					data:{
						id:id,
						starId:starId
					},
					success:(res)=>{
						let d = res.data;
						if(d.code == 0){
							if(d.data.completeCount>d.data.targetDay-1){
								this.percent = '100%'
							}else{
								this.percent = Math.floor(d.data.completeCount/d.data.targetDay*100)+'%';
							}
							this.info = d.data;
						}
					}
				})
			},
			goBack(){
				uni.navigateBack();
			},
			getTenLength(id,starId){
				this.request({
					url:this.path+'api/xyb/star/activeParticipateList',
					data:{
						id:id,
						starId:starId,
						pageNum:1,
						pageSize:10
					},
					success:(res)=>{
						let d = res.data;
						this.dataList = d.rows;
						console.log(d)
					}
				})
			},
			joinActive(){
				this.request({
					url:this.path+'/api/xyb/star/participateActive',
					data:{
						activeId:this.id,
						starId:this.starId,
					},
					success:(res)=>{
						let d = res.data;
						console.log(d)
					}
				})
			},
			//展示激励视频
			goAdd(){
				let that = this;
				rewardedVideoAd.show()
				.then(() => console.log('激励视频 广告显示'))
			},
			loadgoAdd(){
				let that = this;
				if (uni.createRewardedVideoAd) {
					rewardedVideoAd = uni.createRewardedVideoAd({ adUnitId: 'adunit-b391eb6b37e844fe' });
					rewardedVideoAd.onLoad(() => {
					  console.log('激励视频 广告加载成功')
					})
					rewardedVideoAd.onError(err => {
					  console.log(err)
					})
					rewardedVideoAd.onClose(res => {
					    // 用户点击了【关闭广告】按钮
					    // 小于 2.1.0 的基础库版本，res 是一个 undefined
						rewardedVideoAd.offClose()
						console.log(res)
					    if (res && res.isEnded || res === undefined) {
					      // 正常播放结束，可以下发游戏奖励
						  that.joinActive();
						  that.getActiveInfo(that.id,that.starId)
						  that.getTenLength(that.id,that.starId)
					    }
					    else {
					        // 播放中途退出，不下发游戏奖励
							
					    }
					})
				}
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #5680E6;
	// background-image: linear-gradient(#5680E6, #FEE08C);
}
.top-list{
	padding: 30rpx;
	.top-list-item{
		display: flex;
		justify-content: left;
		align-items: center;
		margin-bottom: 15rpx;
		.right{
			padding-left: 20rpx;
			view:nth-child(2){
				font-size: 24rpx;
				color: grey;
			}
		}
		view{
			margin-right: 30rpx;
		}
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
}
.top-content{
	line-height: 1.5;
	font-size: 26rpx;
	view{
		margin-bottom: 20rpx;
	}
}
.top-text{
	color: #10AEFF;
	font-size: 24rpx;
	margin-bottom: 20rpx;
}
.bg-blue{
	background-color: #10AEFF;
	font-size: 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.content{
	padding: 20rpx;
	margin: 30rpx;
	border-radius: 10rpx;
	background-color: #FFFFFF;
	.top-guan{
		display: flex;
		justify-content: left;
		align-items: center;
		font-size: 24rpx;
		margin: 20rpx 0;
		view{
			background-color: #F2F2F2;
			display: flex;
			justify-content: left;
			align-items: center;
			padding: 10rpx;
			width: 300rpx;
			border-radius: 30rpx;
			padding-left: 10px;
			font-size: 24rpx;
			color: grey;
		}
		image{
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
	.top-go{
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		background-color: #4A67D6;
		color: #FFFFFF;
		border-radius: 8rpx;
	}
	.top-process{
		.percent{
			
		}
		margin-bottom: 20rpx;
		background-color: #F2F2F2;
		color: #FFFFFF;
	}
	.top-title{
		border-bottom: 1px solid #F2F2F2;
		padding: 10rpx 0;
	}
	.top-img{
		width: 100%;
		height: 400rpx;
		image{
			width: 100%;
			height: 400rpx;
		}
	}
	.top-btn{
		padding: 10rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
		view{
			background-color: #4A67D6;
			width: 300rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 26rpx;
			text-align: center;
			color: #FFFFFF;
			border-radius: 50rpx;
		}
	}
}

</style>
