<template>
	<div v-if="istrue" class="startanswer flex_column flex_items pos">
		<!-- 中将 -->
		<view class="mask flex_items flex_center" v-if="ismask2">
			<view class="mk2 pos">
				<image :src="imgUrl+'gift.png'" class="abs" style="width: 138rpx;height: 124rpx;left: -50rpx;top:-50rpx;" mode="">
				</image>
				<image class="abs" :src="imgUrl+'cg.png'"
					style="width: 112rpx;height: 32rpx;left: 50%;transform: translate(-50%);top: 10rpx;">
				</image>
				<view class="flex_column flex_items">
					<text class="bold f40 mt80" style="color: #333;">您的成绩为{{score}}分</text>
					<text class="f28 mt20" style="color: #333;">达到该成绩用时：{{used_minute}}分</text>
					<text class="f28 mt10" style="color: #333;">击败全部99%的用户</text>
					<view class="flex_items flex_center">
						<view class="flex_between flex_items mt40" style="width:220rpx;">
							<text class="bold f24" style="color: #93D574;" v-if='types==1'>{{winfen}}</text>
							<text v-if='types==1' class="f24" style="color: #93D574;">积分兑换券</text>
							<text v-if='types==2' class="f24" style="color: #93D574;">获得:</text>
							<text v-if='types==2' class="f24" style="color: #93D574;">{{pname}}</text>
						</view>
					</view>
				</view>
				<view class="abs bn flex_center" @click="goindex">
					<image class="mt20" :src="imgUrl+'ky.png'" style="width:160rpx;height:40rpx" mode=""></image>
				</view>
			</view>
		</view>
		<div class="flex_start flex_items mt50">
			<text class="bold" style="color: #333;font-size:60rpx;">倒计时</text>
			<text class="ml35 bold" style="color: #7BCB7A;font-size: 70rpx;">{{cdTime}}</text>
		</div>
		<!-- t2 -->
		<div class="flex_items flex_center mt80 pos" style="z-index: 2;">
			<div class="bgwhite pos flex_column flex_items"
				style="width: 658rpx;height: 814rpx;box-shadow: 0rpx 28rpx 64rpx 0rpx rgba(163,199,143,0.65);border-radius: 52rpx;">
				<image class="abs" :src="imgUrl+'duigou.png'"
					style="width: 110rpx;height: 110rpx;left: 50%;transform: translate(-50%);top: -55rpx;" mode="">
				</image>
				<div class="flex_start flex_items mt80">
					<text class="f24" style="color: #7CCB72;">第{{num}}题</text>
					<div class="ml10" style="height: 26rpx;width: 1px;background: #b2b2b2;"></div>
					<text class="f24 ml10" style="color: #9E9E9E;">共{{list.length}}题</text>
				</div>
				<div class="flex_column flex_items mt20" style="width:calc(100% - 90rpx);">
					<text class="f40 mb10" style="color: #333;">{{list[num-1].question_name}}</text>
					<div v-for="(item,index) in list[num-1].question_items" :key="index" @click="chosewho(index)"
						:class="['f-center','mt30','f30',index==curindex?'chose':'nochose']"
						style="width: 542rpx;height: 86rpx;line-height: 86rpx;border-radius: 43rpx;">
						{{item.item}}
					</div>
				</div>
			</div>
		</div>
		<div class="abs" style="width: 100%;left: 0;bottom: 0;">
			<image :src="imgUrl+'bbm.png'" style="width: 100%;height: 470rpx;" mode=""></image>
		</div>
		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</div>
</template>

<script>
	import countme from "@/components/counttime.vue"
	export default {
		data() {
			return {
				curindex: -1,
				ans: [{
					tit: "分享给好友并访问活动"
				}, {
					tit: "观看视频不少于15s"
				}, {
					tit: "AB都是"
				}, ],
				ismask2: false,
				acid: "",
				istrue: false,
				cdTime: "",
				list: [],
				num: 1,
				score: "",
				used_minute: "",
				winfen: 0,
				pname: "",
				types: null,
				imgUrl:""
			}
		},
		onLoad(options) {
			this.imgUrl = this.api.imgUrl
			this.acid = options.id
			this.getData()
		},
		components: {
			countme
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中...',
				})
				this.api.getquestion({
					id: this.acid
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						// uni.hideLoading()
						this.list = res.data.data.item
						this.getdown(res.data.data.expire_minute)
						// this.istrue = true
					} else {
						uni.hideLoading()
						this.istrue = true
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			getdown(times) {
				let that = this
				let downTime = Number(times) //倒计时5分钟
				let t = (new Date()).getTime() //当前时间戳
				let dt = t + (downTime * 60) * 1000 //加了5分钟后的时间戳
				let timer = setInterval(() => {
					that.cdTime = that.countDown(dt); //cdtime为显示在页面的时间
					if (that.countDown(dt) == 0) {
						clearInterval(timer)
					}
				}, 1000)
			},
			countDown(dt) {
				let nowTime = (new Date()).getTime(); //实时时间戳
				let times = (dt - nowTime) / 1000; //加分钟后的时间戳-实时时间戳
				let minuter
				let second
				if (times >= 0) {
					minuter = Math.floor(times / 60 % 60); //计算分钟
					second = Math.floor(times % 60); //计算秒钟
					if (minuter == 0 && second == 0) {
						return 0
					}
					if (second.toString().split('').length < 2) { //秒补0
						second = "0" + second
					}
				} else {
					return 0
				}
				uni.hideLoading()
				this.istrue = true
				return minuter + ":" + second; //分补0并返回
			},
			chosewho(index) {
				let that = this
				that.curindex = index
				let tt = '确认选择，下一题？'
				if (this.num == this.list.length) {
					tt = '最后一题，确认提交?'
				}
				uni.showModal({
					title: '确认',
					content: tt,
					success: function(res) {
						if (res.confirm) {
							that.goanswer()
						} else if (res.cancel) {
							that.curindex = -1
							console.log('用户点击取消');
						}
					}
				});
			},
			goanswer() {
				uni.showLoading({
					title: "提交中..."
				})
				let that = this
				that.api.getanswer({
					id: that.list[that.num - 1].id,
					answer: [that.list[that.num - 1].question_items[that.curindex].answer],
					finished_flag: that.num == that.list.length ? true : false
				}).then((res) => {
					console.log(res)
					uni.hideLoading()
					if (res.data.code == 200) {
						if (that.num == that.list.length) {
							uni.showToast({
								title: "答题结束",
								icon: "none",
								duration: 1500
							})
							if (res.data.data.prize.length == 0) {
								uni.showToast({
									title: "遗憾，未中奖",
									icon: "none",
									duration: 1200
								})
								setTimeout(function() {
									uni.reLaunch({
										url: "/pages/index/index"
									})
								}, 1200);
							} else {
								that.score = res.data.data.score
								that.used_minute = res.data.data.used_minute
								that.types = res.data.data.prize.type
								that.winfen = res.data.data.prize.winningIntegral
								if (res.data.data.prize.type == 2) {
									that.pname = res.data.data.prize.product.name
								}
								that.ismask2 = true
							}
							setTimeout(function() {
								that.ismask2 = true
							}, 1500);
						} else {
							that.num += 1
							that.curindex = -1
						}
					} else {
						uni.hideLoading()
						that.istrue = true
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			goindex(){
				uni.reLaunch({
					url:"/pages/index/index"
				})
			},
			closemsk() {
				this.ismask = false
				this.ismask2 = false
			},
			callback() {
				console.log(111111111)
			}
		}
	}
</script>

<style>
	.startanswer {
		background-image: url('https://pfapi.86698.cn/static/images/ksdt.png') !important;
		background-size: 100% 100%;
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
	}

	.chose {
		color: #fff;
		background: linear-gradient(180deg, #E1F477 0%, #80CD73 100%);
	}

	.nochose {
		background: #F6F6F6;
		color: #333;
	}

	.mask {
		background: rgba(0, 0, 0, 0.60);
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
	}

	.mk2 {
		background-image: url('https://pfapi.86698.cn/static/images/dtzj.png');
		background-size: 100% 100%;
		width: 472rpx;
		height: 580rpx;
	}

	.bn {
		background-image: url('https://pfapi.86698.cn/static/images/bn.png');
		background-size: 100% 100%;
		width: 308rpx;
		height: 120rpx;
		left: 50%;
		transform: translate(-50%);
		bottom: 40rpx;
		line-height: 120rpx;
	}
</style>
