<template>
	<view class="content">
		<!-- header -->
		<u-sticky zIndex="10">
			<view class="answer-header">
				<view class="flex">
					<view class="flex-item">答题进度<text>{{questionsIndex + 1}}</text>/{{questions.length}}</view>
					<view class="flex-item">
						剩余时间
						<u-count-down class="flex-item-down" :time="Number(outTime) * 60 * 1000" format="mm:ss" @finish="answerNext('time')"></u-count-down>
					</view>
				</view>
				<u-line-progress
					inactiveColor="rgba(255,255,255,.5)"
					:percentage="percentageVal"
					activeColor="#fff"
				></u-line-progress>
			</view>
		</u-sticky>
		<!-- 答题卡 -->
		<view class="block" v-if="questions.length > 0">
			<block v-if="isShowAnswer">
				<!-- 题目类型 -->
				<view class="answer-type">
					<text v-if="questions[questionsIndex].type == 1">单选题</text>
					<text v-if="questions[questionsIndex].type == 2">多选题</text>
					<text v-if="questions[questionsIndex].type == 3">判断题</text>
				</view>
				<!-- 题目 -->
				<view class="answer-q">{{questions[questionsIndex].title}}</view>
				<!-- 答案 -->
				<view class="answer-list">
					<!-- 对错/单选 -->
					<block v-if="questions[questionsIndex].type == 1 || questions[questionsIndex].type == 3">
						<radio-group @change="onAnswer">
							<label
								class="answer-item"
								v-for="(item, index) in questions[questionsIndex].options"
								:key="index"
								:class="{'active': item.option_id == answerArr[questionsIndex].option_ids}"
							>
								<radio class="answer-checkbox" :value="item.option_id" />
								<text class="answer-index">{{item.order.text}}.</text>
								<view class="answer-text">{{item.title}}</view>
								<view class="answer-icon">
									<u-icon v-if="item.option_id == answerArr[questionsIndex].option_ids" name="checkbox-mark" size="38rpx" color="#446EFE"></u-icon>
								</view>
							</label>
						</radio-group>
					</block>
					<!-- 多选题 -->
					<block v-if="questions[questionsIndex].type == 2">
						<checkbox-group  @change="onAnswer">
							<label
								class="answer-item"
								v-for="(item, index) in questions[questionsIndex].options"
								:key="index"
								:class="{'active': isAnswer(item.option_id, answerArr[questionsIndex], 2)}"
							>
								<checkbox class="answer-checkbox" :value="item.option_id"></checkbox>
								<text class="answer-index">{{item.order.text}}.</text>
								<view class="answer-text">{{item.title}}</view>
								<view class="answer-icon">
									<u-icon v-if="isAnswer(item.option_id, answerArr[questionsIndex], 2)" name="checkbox-mark" size="38rpx" color="#446EFE"></u-icon>
								</view>
							</label>
						</checkbox-group>
					</block>
				</view>
			</block>
			<block v-else>
				<view class="answer-loding">
					<u-loading-icon mode="circle" text="加载中..."></u-loading-icon>
				</view>
			</block>
		</view>
		<!-- 答题卡 -->
		<!-- answerShow -->
		<u-popup :show="answerShow" closeable round @close="answerShow = false">
			<view class="answer-lay-content">
				<view class="answer-lay-title">答题卡</view>
				<view class="answer-lay-flex">
					<view class="answer-lay-flex-title">智能组卷（客观一）</view>
					<view class="answer-lay-flex-text">
						<text>未答题</text>
						<text>已答题</text>
					</view>
				</view>
				<scroll-view scroll-y style="height: 60vh;" v-if="answerArr.length > 0">
					<view class="answer-lay-list">
						<view class="answer-item" :class="{'active': item.option_ids != ''}" v-for="(item,index) in answerArr" :key="index">
							<view class="number">{{index + 1}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 下一题 -->
		<view class="footer-flex" v-if="questions.length > 0">
			<view class="footer-btn" @click="answerShow = true">
				<u-icon class="footer-icon" name="order" size="48rpx" color="#111"></u-icon>
				<view>答题卡</view>
			</view>
			<button class="footer-next" :disabled="answerArr[questionsIndex].option_ids == ''" @click="answerNext">{{(this.questionsIndex + 1) == this.questions.length ? '提交': '下一题'}}</button>
		</view>
	</view>
</template>

<script>
	import { questions, answers } from "@/apis/interfaces/college.js"
	export default {
		data() {
			return {
				outTime		  : 0,
				percentageVal : 0,
				questionsIndex: 0,
				questions	  : [],
				answerArr	  : [],
				answerShow	  : false,
				isShowAnswer  : true
			};
		},
		computed: {
			isAnswer(){
				return (id, answer, type) => {
					let optionIds   = answer.option_ids || []
					let isFindIndex = optionIds.findIndex(val => val == id)
					return isFindIndex >= 0
				}
			}
		},
		created() {
			this.outTime = this.$Route.query.time || 60
			questions(this.$Route.query.id).then(res => {
				this.questions = res;
				this.percentageVal += Number((100 / res.length).toFixed())
				this.answerArr = new Array(res.length).fill({question_id:'', option_ids:''})
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 选择答案
			onAnswer(e){
				let { value } = e.detail
				this.$set(this.answerArr, this.questionsIndex, {
					question_id: this.questions[this.questionsIndex].question_id,
					option_ids : value
				})
			},
			// 下一题
			answerNext(type){
				if(type != 'time'){
					if(this.answerArr[this.questionsIndex] == '') return
					if(this.questionsIndex < (this.questions.length - 1)){
						this.isShowAnswer = false
						setTimeout(() => {
							this.questionsIndex++
							this.percentageVal += Number((100 / this.questions.length).toFixed())
							this.isShowAnswer = true
						},200)
						return
					}
				}
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				answers(this.$Route.query.id, {
					type   : 2,
					answers: this.answerArr
				}).then(res => {
					this.$Router.replace({
						name: 'CollegeResults',
						params: {
							id: res.answer_id
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		background-color: $main-color;
		padding-bottom: 200rpx;
	}
	// 加载题
	.answer-loding{
		height: 50vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	// 答题卡
	.answer-lay-content{
		.answer-lay-title{
			line-height: 70rpx;
			padding: 20rpx 30rpx;
			border-bottom: solid 1rpx #F6F6F6;
			font-size: 36rpx;
			font-weight: bold;
		}
		.answer-lay-flex{
			display: flex;
			justify-content: space-between;
			padding: 30rpx 30rpx 20rpx;
			&-title{
				font-size: 30rpx;
				color: #111;
				width: 50%;
				@extend .nowrap;
			}
			&-text{
				font-size: 30rpx;
				width: 50%;
				text-align: right;
				text{
					margin-left: 30rpx;
					padding-left: 35rpx;
					color: #333;
					position: relative;
					&::after{
						position: absolute;
						left: 0;
						top: 50%;
						margin-top: -12rpx;
						height: 16rpx;
						width: 16rpx;
						content: " ";
						border-radius: 50%;
						background: $main-color;
						border:solid 7rpx #E4E8F7;
					}
					&:first-child::after{
						background-color: #999999;
						border-color: #e7e7e7;
					}
				}
			}
		}
		.answer-lay-list{
			padding: 10rpx;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			align-items: flex-start;
			.answer-item{
				width: calc(20% - 40rpx);
				padding-top: calc(20% - 42rpx);
				text-align: center;
				border-radius: 50%;
				background: white;
				border:solid 1rpx #EEEEEE;
				box-sizing: border-box;
				position: relative;
				margin: 20rpx;
				color: #999999;
				font-weight: bold;
				.number{
					position: absolute;
					top: 50%;
					left: 0;
					margin-top: -22rpx;
					line-height: 40rpx;
					height: 40rpx;
					font-size: 32rpx;
					width: 100%;
					height: 100%;
				}
				&.active{
					background: #E4E8F7;
					border-color: #E4E8F7;
					color: $main-color;
				}
			}
		}
	}
	// header
	.answer-header{
		padding: 20rpx 30rpx 50rpx;
		.flex{
			display: flex;
			justify-content: space-between;
			line-height: 60rpx;
			align-items: center;
			padding-bottom: 20rpx;
			color: rgba(255, 255, 255, .7);
			font-size: 30rpx;
			.flex-item{
				text{
					color: white;
					font-weight: bold;
					font-size: 34rpx;
					margin-left: 10rpx;
				}
				.flex-item-down{
					display: inline-block;
				}
			}
		}
	}
	// footer
	.footer-flex{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 30rpx 50rpx;
		background: white;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 9;
		.footer-next{
			height: 90rpx;
			line-height: 90rpx;
			width: calc(100% - 150rpx);
			background: $main-color;
			border-radius: 45rpx;
			color: white;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			padding: 0;
			margin: 0;
			&[disabled]{
				opacity: .7;
				background: $main-color;
				color: white;
			}
		}
		.footer-btn{
			width: 100rpx;
			text-align: center;
			line-height: 30rpx;
			font-size: 26rpx;
			color: #111;
			text-align: center;
			.footer-icon{
				display: inline-block;
			}
		}
	}
	// 答题卡
	.block{
		background: white;
		border-radius: 20rpx;
		margin: 0 30rpx 30rpx;
		position: relative;
		z-index: 2;
		&::after{
			content: " ";
			width: 90%;
			height: 100rpx;
			background: rgba(255, 255, 255, .5);
			position: absolute;
			left: 5%;
			bottom: -30rpx;
			border-radius: 20rpx;
			z-index: -1;
		}
		// 类型
		.answer-type{
			padding: 30rpx;
			text{
				background: $main-color;
				color: white;
				display: inline-block;
				line-height: 50rpx;
				height: 50rpx;
				padding: 0 20rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}
		// 题目
		.answer-q{
			padding: 0 30rpx;
			font-size: 34rpx;
			line-height: 50rpx;
			color: #111;
		}
		// 答题
		.answer-list{
			padding: 30rpx;
			.answer-item{
				display: block;
				background: #f8f8f8;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				padding: 20rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				.answer-checkbox{
					width: 0;
					height: 0;
					position: absolute;
					overflow: hidden;
				}
				.answer-index{
					width: 50rpx;
					height: 60rpx;
					line-height: 60rpx;
					display: block;
					text-align: center;
					font-size: 30rpx;
					color: #111;
				}
				.answer-text{
					width: calc(100% - 100rpx);
					line-height: 40rpx;
					font-size: 32rpx;
				}
				.answer-icon{
					width: 50rpx;
					text-align: right;
				}
				&.active{
					color: #446EFE;
					background: #E4E8F7;
					.answer-index{
						color: #446EFE;
					}
				}
			}
		}
	}
</style>
