<template>
	<view>
		<uni-popup type="center" ref="adPop" :maskClick="false" :isMaskClick="false">
			<view class="container">

				<!-- 	<view class="ad-view">
					<ad :unit-id="adUnitId" @load="onload" @close="onclose" @error="onerror"></ad>
				</view> -->

				<image @click="onClose" style="width: 50rpx; height: 50rpx;margin-left:auto;margin-right: 30rpx;
				margin-bottom: 30rpx;" src="@/static/video/close.png"></image>

				<view class="content">
					<text class="title">恭喜你,获得免费看剧名额</text>
					<text class="button-ad" @click="handleAd">看视频免费解锁1集</text>
					<text class="button-vip" @click="handleVip">免广告解锁</text>
					<text v-show="showTime" class="downtext">{{countDown}}s后自动进入广告,观看完成解锁第{{vedioIndex+1}}集剧情</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		EXPRESS_ID
	} from "@/utils/adConstant.js"

	export default {
		name: 'adPopup',
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			vedioIndex: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				adUnitId: EXPRESS_ID,
				countDown: 3,
				timer: '',
				showTime: false
			};
		},
		methods: {
			handleShow() {
				this.$refs.adPop.open('center');
				this.startCountdown()
			},
			startCountdown() {
				let that = this;
				that.showTime = true
				var countDownSeconds = 3
				that.countDown = countDownSeconds
				this.timer = setInterval(() => {
					if (countDownSeconds > 0) {
						that.countDown = countDownSeconds
						countDownSeconds--
					} else {
						clearInterval(that.timer)
						that.handleAd()
					}
				}, 1000)
			},
			handleAd() {
				this.showTime = false
				clearInterval(this.timer)
				// this.$refs.adPop.close('center');
				this.$emit('handleAd');
			},
			handleVip() {
				this.showTime = false
				clearInterval(this.timer)
				this.$refs.adPop.close();
				this.$emit('handleVip');
			},
			onClose() {
				this.showTime = false
				clearInterval(this.timer)
				this.$refs.adPop.close();
				this.$emit('handleClose');
			},
			onload(e) {
				console.log("onload");
			},
			onclose(e) {
				console.log("onclose: " + e.detail);
			},
			onerror(e) {
				console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
			}
		},
		watch: {
			show: {
				handler: function(newVal, oldVal) {
					if (newVal) {
						this.handleShow();
					} else {
						try {
							clearInterval(this.timer)
							this.$refs.adPop.close();
						} catch {

						}
					}
				},
				immediate: true
			}
		}
	};
</script>

<style lang="scss">
	.container {
		margin-top: -200rpx;
		width: 600rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.ad-view {
		width: 600rpx;
		border-radius: 20rpx;
		// background-color: white;
		margin-bottom: 10px;
	}

	.content {
		border-radius: 20rpx;
		background-color: white;
		display: flex;
		width: 600rpx;
		padding: 30rpx 0;
		flex-direction: column;
		align-items: center;

		.title {
			color: black;
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.button-ad {
			width: 500rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			margin: 20rpx 20rpx;
			border-radius: 10rpx;
			background-color: orange;
			color: white;
			font-size: 36rpx;
			box-shadow: 0 0 2px 0px rgba(255, 255, 255, 0.1);
		}

		.button-vip {
			width: 498rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			margin: 20rpx 20rpx;
			border-radius: 10rpx;
			background-color: white;
			border: 1px orange solid;
			color: orange;
			font-size: 36rpx;
			box-shadow: 0 0 2px 0px rgba(255, 255, 255, 0.1);
		}

		.downtext {
			color: darkgray;
			font-size: 26rpx;
		}
	}
</style>