<template>
	<view class='wrap'>
		<view class="top">
			<view class='logintitle'>
				
				<u-image style="margin:0 auto" :fade="false" :src="logintitle" width="702rpx" height="88rpx"></u-image>
				<view style="color:#0095e5;text-align: center;font-size: 30rpx;margin: 0 auto;margin-top:20rpx;">
					——排查身边灾害隐患</view>
			</view>
		</view>

		<view class="answerwrap">
			<view class='answertop'>
				<view>(答题{{questionIndex+1}}/5)</view>
				<view>
					<u-image style="display: inline-block;margin-right:5px" :fade="false" width="24rpx" height="24rpx"
						:src='timeicon'></u-image>
					{{minutes}}:{{seconds}}
				</view>
			</view>
			<view>
				<view class='answercenter'>
					<view class='answertitle'>
						<span
							:class="[{'more':question_list[questionIndex]['type_name']==='多选题'}]">{{question_list[questionIndex]?question_list[questionIndex]['type_name']:''}}</span>
						<text class="hasspan"
							v-html="question_list[questionIndex]?replaceAtSymbolsWithSpan(question_list[questionIndex]['title']):''"></text>
					</view>
					<view class='answercheck'
						v-for="(ans,ansindex) in question_list[questionIndex]?question_list[questionIndex].options:[]">
						<view @click="chooseAnswer(ans,ansindex)"
							:class="['answeritem',{'active':ans.flag},{'correct':ans.isanswer},{'wrong':ans.iswrong}]">
							<span>{{answerNum[ansindex]}}</span>{{ans.title}}
							<!-- {{ans.is_correct}}--- -->
							<!-- :class="ans.flag?'answeritem active':'answeritem'" -->
						</view>
					</view>
				</view>
			</view>
			<view class='answerbottom'>
				<span></span>正确答案：{{correctAnswer}}
			</view>
		</view>
		<view class='submit'>
			<u-button v-if="!answerSubmit" size="mini" :throttle-time="1000" shape="circle" type="default" :custom-style="parStyle"
				@click="nextQue">下一题</u-button>
			<u-button v-if="answerSubmit" size="mini" :throttle-time="1000" shape="circle" type="default" :custom-style="parStyle"
				@click="nextQue">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		isNull,
		toast
	} from "@/common/util.js"
	export default {
		data() {
			return {
				parStyle: {
					'background': 'linear-gradient(to right, #2754a5, #2b83bb)',
					'color': '#fff',
					'font-size': '28rpx',
					'padding': '20rpx 30rpx',
					'margin-left': '15rpx',
					'margin-top': '80rpx',
					'width': '100%',
					'height': '80rpx'
				
				},
				minutes: 0,
				seconds: 0,
				timer: null,
				question_list: [],
				questionIndex: 0,
				answercount: 0, //第几次答题
				maxCount: 2,
				answerNum: ["A", "B", "C", "D", "E", "F", "G", "H"],
				myAnswer: [],
				correctNum: 0, // 答对的题目数量
				correctScore: 0, // 得分
				correctAnswer: '', // 正确答案
				answerSubmit: false, // 最后一题
				hasFlag: false, // 是否选中
				showAnswer: false,
				timeicon: require('../../static/time.png'),
				logintitle: require("../../static/logo3.png"),

				isanswer: false, // 控制答案结束前不能点击到下一题
				islock: false,
			}
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad() {
			let configs = uni.getStorageSync("activeConfig") ? uni.getStorageSync("activeConfig").config : []
			let answertime = 15
			configs.map(item => {
				if (item.key == 'answer_time') {
					answertime = parseInt(item.value)
				}
			})
			this.getQuestion()
			this.countdown(answertime, (minutes, seconds) => {
				this.minutes = minutes.toString().padStart(2, '0')
				this.seconds = seconds.toString().padStart(2, '0')
			}, () => {
				console.log("1--", this.islock)
				if (!this.islock) {

					this.submitQue()
				}
			});
		},
		onUnload() {
			clearTimeout(this.timer)
		},
		methods: {
			async getUserInfo() {
				const res = await this.$u.api.user()
				this.$u.vuex('vuex_user', res);
				this.userInfo = res;
				if (isNull(res.mobile)) {
					uni.redirectTo({
						url: '/pages/login/index'
					})
				}
			},
			async getQuestion() {
				let that = this
				const res = await this.$u.api.questions()
				this.answercount = res.today_ask_count // 今日是否已答题
				let data = res.questions
				if (this.answercount) {
					uni.redirectTo({
						url: '/pages/me/me'
					})
					return
				}
				data.map(item => {
					let type = 0
					item.correctAnswer = []
					item.options.map(i => {
						i.flag = false
						if (i.is_correct === 1) {
							type++
							item.correctAnswer.push(that.answerNum[i.myindex - 1])
						}
					})
					item.type_name = type > 1 ? '多选题' : '单选题'
					console.log("item.type_name",item.type_name)
				})
				console.log("data",data)
				this.question_list = data
			},
			
			replaceAtSymbolsWithSpan(str) {
				return str.replace(/@/g,
					'<span style="display: inline-block;width:40px;border-bottom:1px solid #666;margin: 0 3px;margin-bottom: -2px;"></span>'
					);
			},
			chooseAnswer(ans, ansindex) {
				this.hasFlag = false
				if (this.question_list[this.questionIndex]['type_name'] === '单选题') {
					this.question_list[this.questionIndex]['options'].map(item => {
						item.flag = false
					})
					ans.flag = !ans.flag
					this.hasFlag = true
					// ans.flag = !ans.flag
				} else {
					ans.flag = !ans.flag
					this.question_list[this.questionIndex]['options'].map(item => {
						if (item.flag == true) {
							this.hasFlag = true
						}
					})
				}
				console.log("hasFlag", this.hasFlag)
			},
			submitQue() {
				let that = this
				if (this.myAnswer.length > 0) {
					let count = 0
					this.myAnswer.map(item => {
						if (item.isCorrect === true) {
							count++
						}
					})
					this.correctNum = count
					this.correctScore = (count / 10) * 100
				} else {
					this.correctScore = 0
				}
				this.islock = true
				// this.showAnswer = true
				console.log("3--", this.islock)
				this.$u.api.saveQuestion({
					score: this.correctScore,
					answers: this.myAnswer
				}).then(res=>{
					clearTimeout(this.timer)
					toast('答题已完成',1500,function(){
						setTimeout(function(){
							uni.redirectTo({
								url:'/pages/me/me'
							})
						},1500)
					})
					
				})

			},
			nextQue() {
				let that = this
				// this.isanswer = false
				if (this.isanswer) {
					return
				}
				if (!this.hasFlag) {
					toast("请先选择答案")
					return
				}
				this.hasFlag = false
				if (this.questionIndex > 4) {
					this.answerSubmit = true
					return
				}

				let ansid = []
				let count = 0
				this.question_list[this.questionIndex]['options'].map(item => {
					if (item.flag === true) {
						ansid.push(item.id)
					}

					if (!item.flag && item.is_correct === 1) {
						count++
					}

				})
				this.myAnswer.push({
					question_id: this.question_list[this.questionIndex]['id'],
					answer_ids: ansid.join("|"),
					isCorrect: count > 0 ? false : true
				})

				this.correctAnswer = this.question_list[this.questionIndex]['correctAnswer'].join(',')

				// 判断选择的是否正确  加样式
				this.question_list[this.questionIndex]['options'].map(item => {
					if (item.is_correct === 1) {
						item.isanswer = true
					} else if (item.flag == true && item.is_correct === 0) {
						item.iswrong = true
					}
				})
				this.isanswer = true
				if (that.answerSubmit) {
					that.submitQue()
					return
				}
				setTimeout(function() {
					that.correctAnswer = ''
					that.isanswer = false
					that.questionIndex++
					if (that.questionIndex == 4) {
						that.answerSubmit = true
						// return
					}
				}, 1500)

			},
			countdown(duration, onTick, onEnd) {
				let remainingTime = duration * 60;

				const tick = () => {
					if (remainingTime > -1) {
						const minutes = Math.floor(remainingTime / 60);
						const seconds = remainingTime % 60;
						onTick(minutes, seconds);
						remainingTime--;
						this.timer = setTimeout(tick, 1000);
					} else {
						console.log("remainingTime", remainingTime)
						console.log("2--", this.islock)
						onEnd();
					}
				};
				tick();
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		/* height: 100%; */
		width: 100%;
		height: 100vh;
		width: 100vw;
		background-image: url('../../static/bg.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		overflow: scroll;
	}

	.top {
		width: 100%;
		// height: 440rpx;
		/* background-image: url('../../static/bgtop1.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-bottom:30rpx;
		// position: relative;
		// top: 0;
		// left: 0
	}

	.logintitle {
		padding-top: 90rpx;
	}

	.bottom {
		width: 100%;
		height: 533rpx;
		/* background-image: url('../../static/bgbottom.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		bottom: 0;
		left: 0
	}

	.answerwrap {
		position: relative;
		z-index: 2;
		width: 90%;
		background-color: #f9f6f6;
		border-radius: 40rpx;
		margin: 0 auto;
		box-shadow: 0px 0px 20px -10px #0095e5;
		// margin-top: -40rpx;
	}

	.answertop {
		display: flex;
		justify-content: space-between;
		background-color: red;
		padding: 30rpx;
		border-radius: 40rpx 40rpx 0 0;
		border: 1px solid #0095e5;
		background-color: #0095e5;
		color: #fff;
		border-bottom: none
	}

	.answercenter {}

	.answertitle {
		padding: 30rpx;
		line-height: 1.8;
		font-family: "宋体";
		color: rgba(0, 0, 0, 0.8);
		/* font-weight: bold; */

	}

	.answertitle span {
		background-color: #2754a5;
		display: inline-block;
		padding: 0rpx 20rpx;
		color: #fff;
		margin-right: 10rpx;
		border-radius: 10rpx;
		font-weight: normal;
	}

	.answertitle span.more {
		background-color: cadetblue;
	}

	.borderb {
		display: inline-block;
		width: 10rpx;
		border-bottom: 1px solid #666;
	}

	.answercheck {
		padding: 30rpx;
		padding-top: 0rpx;
	}

	.answeritem {
		padding: 20rpx;
		background-color: #fff;
		border: 4rpx solid #fff;
		border-radius: 20rpx;
		color: #666666;
	}

	.answeritem.active,
	.answeritem.wrong {
		border: 4rpx solid #0095e5;
	}

	.answeritem.correct {
		border: 4rpx solid green;
	}

	.answeritem span {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		border: 2px solid #999;
		color: #999;
		text-align: center;
		line-height: 40rpx;
		border-radius: 10rpx;
		margin-right: 10rpx
	}

	.answeritem.active span,
	.answeritem.wrong span {
		border: 2px solid #0095e5;
		background-color: #0095e5;
		color: #fff;
	}

	.answeritem.correct span {
		border: 2px solid green;
		background-color: green;
		color: #fff;
	}

	.answerbottom {
		padding: 30rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.answerbottom span {
		display: inline-block;
		width: 10rpx;
		height: 50rpx;
		border-radius: 10rpx;
		background-color: green;
		vertical-align: middle;
		margin-right: 20rpx
	}

	.submit {
		width: 50%;
		margin: 30px auto;
		// margin-bottom: -250rpx;
		position: relative;
		z-index: 9
	}

	.answertip {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		/* padding-top:397rpx;
		padding-bottom:300rpx; */
		z-index: 9;
	}

	.answertipitem {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 77%;
	}

	.answrap {
		/* background: url(../../static/answertipbg1.png); */
		width: 483rpx;
		height: 563rpx;
		background-size: 100% 100%;
		font-size: 28rpx;
		width: 100%;
	}

	.answrap100 {
		/* background: url(../../static/answertipbg.png); */
		height: 612rpx;
		background-size: 100% 100%;
		width: 100%;
	}

	.ansscore {
		padding-top: 120rpx;
		text-align: center;
	}

	.ansflag {
		/* background: url(../../static/answer100flag.png); */
		width: 119%;
		height: 164rpx;
		background-size: 100% 100%;
		position: absolute;
		top: 240rpx;
		left: -56rpx;
	}

	.answrap100 .ansflag {
		top: 290rpx;
	}

	.ansicon {
		position: absolute;
		left: 235rpx;
		top: -20rpx;
	}

	.ansicon80 {
		position: absolute;
		left: 165rpx;
		top: -80rpx;
	}

	/* 	.answer100>view:first-child{
		margin-top: 236rpx;
		margin-left: 210rpx;
	} */
	.answerBtn {
		/* margin-top: 236rpx;
		margin-left: 210rpx; */
		/* display:flex;
		margin-top:100rpx;
		margin-left:80rpx */
		text-align: center;
		/* margin-top: 120rpx; */
		position: absolute;
		top: 355rpx;
		left: 0rpx;
		width: 100%;
	}

	.answrap100 .answerBtn {
		top: 410rpx;
	}

	.answerBtn view {
		box-shadow: 1rpx 7rpx 18rpx 0rpx #2754a5;
		color: #333;
		padding: 16rpx 60rpx;
		margin: 10rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		display: inline-block;

	}

	.answerBtn view:last-child {
		color: #fff;
		background: linear-gradient(90deg, to right, #2754a5, #2b83bb);
	}

	.answertip span.ansfont {
		color: #0095e5;
		font-size: 90rpx;
	}

	.answer80 {
		/* background: url(../../static/answer80.png); */
		width: 483rpx;
		height: 641rpx;
		background-size: 100% 100%;
	}
</style>