<template>
	<u-transition :show="showPopup" mode="fade-up" customStyle="width:100%; height:100%; position:fixed; top:0; left:0; z-index:9999;">
		<view class="status-bar"></view>
		<view class="adv-popup">
			<video
				v-if="isMp4"
				ref="video"
				:src="adv.adv_image"
				:controls="false"
				:show-center-play-btn="false"
				muted
				autoplay
				preload
				@loadedmetadata="videoLoad"
				@ended="close()"
			></video>
			<!-- <image :src="adv.adv_image" @load="imgLoad" /> -->
			<vodImage :src="adv.adv_image" mode="scaleToFill" @load="imgLoad" />
			<view class="adv-click" @click="openAD(adv.adv_link)"></view>
			<u-count-down ref="advTime" :time="adTime" :autoStart="false" @change="timeChange">
				<text v-if="countTime.seconds > 0" class="time">
					{{ countTime.minutes > 0 ? countTime.minutes + '分' : '' }}{{ countTime.seconds }}秒后
					<template v-if="type == 'video'">可解锁视频</template>
					<template v-if="type == 'sign'">可获得奖励金币</template>
					<template v-else>可关闭</template>
				</text>
				<text v-else @click="close()">
					<template v-if="type == 'video'">解锁成功，</template>
					<template v-if="type == 'sign'">领取奖励，</template>
					关闭广告
				</text>
			</u-count-down>
			<view v-if="toast" class="toast">
				<text>{{ toast }}</text>
			</view>
		</view>
	</u-transition>
</template>

<script>
import vodImage from '@/components/vod-image.vue';
export default {
	data() {
		return {
			type: 'default',
			isMp4: false,
			adv: {},
			showPopup: false,
			adTime: 0,
			countTime: {},
			toast: null
		};
	},
	components: {
		vodImage
	},
	watch: {
		showPopup: {
			handler(val) {
				if (val) {
					const reg = /^.*\.(mp|MP)4$/;
					if (reg.test(this.adv.adv_image)) {
						this.isMp4 = true;
					} else {
						this.isMp4 = false;
					}
				}
			}
		}
	},
	methods: {
		timeChange(e) {
			this.countTime = e;
		},
		videoLoad(e) {
			if (e.detail.duration < this.adv.adv_show_time) {
				this.adTime = Math.floor(e.detail.duration) * 1000;
			} else {
				this.adTime = this.adv.adv_show_time * 1000;
			}
			this.$refs.advTime.reset();
			this.$nextTick(() => {
				this.$refs.advTime.start();
			});
		},
		imgLoad() {
			this.adTime = this.adv.adv_show_time * 1000;
			this.$refs.advTime.reset();
			this.$nextTick(() => {
				this.$refs.advTime.start();
			});
		},
		close() {
			if (this.type != 'sign') {
				this.showPopup = false;
			}
			this.$emit('close', this.type);
		}
	}
};
</script>

<style lang="scss">
.adv-popup {
	width: 100%;
	height: calc(100% - var(--safe-top));
	background-color: rgba(0, 0, 0, 0.7);
	position: relative;
	video {
		width: 100%;
		height: 100%;
	}
	uni-image {
		width: 100%;
		height: 100%;
	}
	.adv-click {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.u-count-down {
		padding: 5px 10px;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: 14px;
		border-radius: 15px;
		position: absolute;
		top: 15px;
		right: 15px;
	}
	.toast {
		position: fixed;
		z-index: 999;
		top: 10%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		text-align: center;
		max-width: 80%;
		uni-text {
			display: inline-block;
			vertical-align: middle;
			color: #fff;
			background-color: rgba(17, 17, 17, 0.7);
			padding: 10px 20px;
			border-radius: 5px;
			font-size: 13px;
			text-align: center;
			max-width: 100%;
			word-break: break-word;
			white-space: normal;
		}
	}
}
</style>
