<template>
 <view class="container">
	<view class="list-menu">
		<view class="list-menu-item" @click="$noMultipleClicks(signGetGold)">
		<uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="clearIcon" size="20" :color="primaryColor"></uni-icons>
			<view class="text">签到</view>
		<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
   </view>
   <view class="list-menu-item" @click="clickWatchAd">
     <uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="logOutIcon" size="20" :color="primaryColor"></uni-icons>
		<view class="text">观看广告</view>
     <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
   </view>
 </view>
 </view>
</template>

<script>
var videoAd = null;
import { signGetGold,watchAdGetGold,checkUserCanGetGold} from "@/api/paint.js";
import {getRestRewardNum} from "@/api/userInfo.js";
import {loginTiktok} from '@/api/auth.js'
export default {
  data() {
    return {
      userInfo: {},
      noClick:true, //防止重复提交
	  isWatch: false,
	  canWatch: false, //false为可观看
	  canRewardNum: 0,
	  //adList:['0qfnoa4053uwkefbas','2v63zq5hvfclpxmurl','d4ltbnxa23zp2hhqwe'] //激励视频广告列表
    };
  },
  onShow() {
  	this.userInfo = uni.getStorageSync('userInfo')
	this.getRestRewardNum();
  },
  onHide() {
  	console.log('进入onHide')
  	//切出小程序时，广告状态还原
  },
  onLoad() {
  	//随机选择一个激励视频广告初始化
  	// let num = Math.floor(Math.random() * this.adList.length + 1)-1;
  	// console.log('随机激励视频id为：',this.adList[num])
  	// this.loadAdvertise(this.adList[num]);
	this.loadAdvertise('d4ltbnxa23zp2hhqwe');
  },
  methods: {
	  
	  //检查某平台用户当日观看广告次数是否超标
	  async checkUserCanGetGold() {
	  	const params = {
	  		userId: this.userInfo.id,
	  		appType: '0',
	  		platform: '1' ,//此处1代表抖音
	  	}
	  	const res = await checkUserCanGetGold(params);
	  	if (res && res.data.code === 200) {
	  		console.log("当日非会员用户是否可获取奖励结果为", res.data.data)
	  		this.canWatch = res.data.data;
	  	} else {
	  		uni.showToast({
	  			title: '检查获取状态失败!',
	  			icon: 'none'
	  		})
	  	}
	  },
	  
	  async clickWatchAd() {
	  	//检查非会员用户是否达到可下载次数上限， 传1代表是观看广告检查
	  	await this.checkUserCanGetGold();   
		this.watchAd();
	  },
	  
	  //点击弹窗观看广告
	  watchAd() {
		let that = this;
		//满足可观看条件 为false
		if (that.canWatch !== true) {
			uni.showModal({
				title: '观看一段广告获取画意值',
				content: '今日还可观看'+ that.canRewardNum + '次',
				success(res) {
					if (res.confirm) {
						uni.showLoading({
							title: '加载中',
							success() {
								//修改当前观看状态
								that.isWatch = true
								//console.log('res123',123)
								//展示激励视频广告
								that.showAdvertise();
							}
						});
					}
				}
			});
		} else {
			uni.showModal({
				content: '今日观看任务已完成,请明日再来!',
				showCancel: false
			});
		}
	  },
	  
	  //加载激励视频广告
	  loadAdvertise(adId){
	  	// 在页面中定义激励视频广告
	  	var that = this
	  	// 在页面onLoad回调事件中创建激励视频广告实例
	  	if (tt.createRewardedVideoAd) {
	  		videoAd = tt.createRewardedVideoAd({
	  			adUnitId: adId
	  		});
	  		//解决重复发放奖励BUG
	  		try{
	  			if (videoAd.closeHandler) {
	  			    videoAd.offClose(videoAd.closeHandler);
	  			    console.log("videoAd.offClose卸载成功");
	  			}		
	  		}catch(e){
	  			console.log("videoAd.offClose 卸载失败");
	  			console.error(e);
	  		}
	  		videoAd.onLoad(() => {
	  			console.log('激励视频广告'+adId+'加载成功')
	  		})
	  		videoAd.onError((err) => {
				if(err.errCode == 1004){
					uni.showToast({
						icon: 'none',
						title: '请稍后再试～'
					})
				}
	  			that.err()
	  		})
	  		videoAd.closeHandler = (res) =>{
				console.log('激励视频领取画意值管理res',res)
	  			if (res && res.isEnded || res === undefined) {
	  				// 正常播放结束，可以下发游戏奖励
	  				that.watchAdGetGold();
	  			}else{
	  					uni.showToast({
	  						title: '您还没有看完视频，无法下载图片',
	  						icon: 'none'
	  				})
	  			}
	  		}
	  		videoAd.onClose(videoAd.closeHandler);
	  	}
	  },
	  
	  //展示激励视频广告
	  showAdvertise(url){
	  	uni.hideLoading();
	  	//let videoAd = this.videoAd
	  	this.downloadUrl = url;
	  	//console.log('看广告时传入进来的url',url);
	  	//console.log('this.downloadUrl看广告时',this.downloadUrl);
	  	videoAd.show().catch(() => {
	  		// 失败重试
	  		videoAd.load()
	  			.then(() => videoAd.show())
	  			.catch(err => {
	  				uni.showModal({
	  					title: '画意值领取失败',
	  					content: '请稍后重试',
	  					showCancel: false,
	  					// complete: function() {
	  					// }
	  				})
	  			})
	  	})
	  },
	  
	  //签到
	  async signGetGold() {
	  	let that = this;
	  	const data = {
	  		userId: that.userInfo.id,
	  		source: 1, //1代表抖音
			appType: 0
	  	}
	   const res = await signGetGold(data);
	   console.log('签到结果===', res);
	   if (res && res.data.code === 200) {
	  	 return uni.showToast({
	  	 		title: "签到成功！",
	  	 		icon: 'none'
	  	 	});
	   }else {
	   	uni.showModal({
	   		content: res.data.msg,
	   		showCancel: false
	   	});
	   }
	  },
	  
	  //观看广告
	  async watchAdGetGold() {
	  	let that = this;
	  	const data = {
	  		userId: that.userInfo.id,
	  		source: 1, //1代表抖音
	  		appType: 0
	  	}
	   const res = await watchAdGetGold(data);
	   //console.log('观看广告结果===', res);
	   if (res && res.data.code === 200) {
	  	 return uni.showToast({
	  	 		title: "画意值领取成功！",
	  	 		icon: 'none'
	  	 	});
	   }else {
	   	uni.showModal({
	   		content: res.data.msg,
	   		showCancel: false
	   	});
	   }
	  },
	  
	  //获取某平台用户当日绘画奖励剩余次数
	  async getRestRewardNum() {
	  	const params = {
	  		userId: this.userInfo.id,
	  		appType: '0',
	  		platform: '1' ,//此处1代表抖音
	  	}
	  	const res = await getRestRewardNum(params);
	  	if (res && res.data.code === 200) {
	  		console.log("当日非会员用户可获得奖励结果为", res.data.data)
	  		//获取奖励
	  		this.canRewardNum = res.data.data
	  		console.log('this.canRewardNum',this.canRewardNum)
	  	} else {
	  		uni.showToast({
	  			title: '获取奖励剩余次数失败!',
	  			icon: 'none'
	  		})
	  	}
	  },
  },
};
</script>

<style lang="scss">
page {
  height: 100vh;
  background-color: $uni-bg-color;
}
</style>
<style lang="scss" scoped>
.container {
  padding: 20rpx;

  .list-menu {
    margin-top: 20rpx;
    padding: 0 20rpx;
    background-color: $uni-white;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);


  }

  .list-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    line-height: 80rpx;
    border-bottom: 2rpx solid $uni-border-2;

    .list-menu-icon{
      color: $uni-primary;
    }

    .text {
      font-size: 26rpx;
      line-height: 80rpx;
      width: calc(100% - 100rpx);
    }

    .list-menu-genduo{

    }

  }

  .list-menu-item:first-child {
  }

  .list-menu-item:last-child {
    border-bottom: 0 !important;
  }

}
</style>
