<template>
	<view>
		<view style="padding: 20px;">


			<view class="centered">
				<view v-if="isEnded == true">您的密码是{{ password }}</view>
				<view v-else>
					
				</view>
			</view>
			<tui-button @click="getAds()">获取今日密码</tui-button>
			<!-- <tui-button @click="openVideoAd()">获取今日密码</tui-button> -->
			<view style="padding :10px;text-align: center;">
				需要观看广告才能获取
			</view>
		</view>
	</view>

</template>

<script>
	let videoAd = null
	export default {
		data() {
			return {
				isEnded: false,
				password: '123456'
			}
		},
		onLoad() {
			this.adLoad()
		},
		methods: {
			//激励式广告
			adLoad: function() {
				if (wx.createRewardedVideoAd) {
					videoAd = wx.createRewardedVideoAd({
						adUnitId: '' //你的广告key
					})
					videoAd.onError(err => {
						
					})
					videoAd.onClose((status) => {
						if (status && status.isEnded || status === undefined) {
							//这里写广告播放完成后的事件
							this.isEnded = status.isEnded;
							
						} else {
							uni.showToast({
								icon:'error',
								title: '抱歉！您观看视频中途退出无法获取奖励',
								duration: 1000
							});
						}
					})
				}
			},
			openVideoAd: function() {
			    
			},
			getAds() {
				uni.showModal({
					title: "温馨提示",
					content: "获取密码需要观看一个广告。有广告收入才能让网站持续运营下去，感谢您对我们的支持。",
					confirmText: "强烈支持",
					confirmColor: "#55aaff",
					cancelText: "残忍取消",
					cancelColor: "#ffe2e3",
					success(res) {
						if (res.confirm) {
							
							if (videoAd) {
							    videoAd.show().catch(err => {
							    // 失败重试
							    // console.log("广告拉取失败")
							    videoAd.load().then(() => videoAd.show())
							    })
							}
							
						} else {
							uni.showToast({
								icon:'error',
								title: '已取消观看',
								duration: 1000
							});
						}
					}
				})
			}
		}
	}
</script>

<style>
	.centered {
		display: flex;
		/* 创建一个flex容器 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		background-size: cover;
		/* 自动调整大小以完全覆盖元素 */
		width: 100%;
		/* 或者根据需求设置特定的宽度 */
		height: 200px;
		/* 或者根据需求设置特定的高度 */
	}
</style>