<template>
	<view>
		<!-- 大标题 -->
		<view class="header" id="header">
			<span > {{currentExam.type}}</span>
		</view>
		<!-- 小标题栏 -->
		<view class="sub-header">
			<u-row>
				<u-col span="4">
					<view><text style="color:red">{{currentExam.total_score}}</text>分</view>
				</u-col>
				<u-col span="4">
					<view style="text-align: center;"><span class="header-card">{{currentQuestion.type}}</span></view>
				</u-col>
				<u-col span="4">
					<view style="text-align: right;"><span>第{{currentIndex+1}}/{{currentExam.questions_.length}} 题</span></view>
				</u-col>
			</u-row>
		</view>
		<scroll-view class="content" scroll-y="true" v-bind:style="{height:scollHeight+'px'}">
			<view class="name">
				<view><text style="margin-right: 10rpx;">{{currentIndex+1}} 、</text> {{currentQuestion.name}}</view>
				<view v-if="currentQuestion.img">
					{{currentQuestion.img}}
				</view>
			</view>
			<view class="options">
				<checkbox-group v-if="currentQuestion.type=='多选'">
					<label class="option" v-for="item in currentOptions" :key="item.id" >
						<view class="option-item1" >
							<checkbox :value="item.value" :checked="item.checked" color="#2979ff" :disabled="item.disabled"/>
						</view >
						<view class="option-item2" >{{item.value}}.{{item.text}}</view>
					</label>
				</checkbox-group>
				<radio-group v-else>
					<label class="option" v-for="item in currentOptions" :key="item.id">
						<view class="option-item1">
							<radio :value="item.value" :checked="item.checked" color="#2979ff" :disabled="item.disabled"></radio>
						</view>
						<view class="option-item2">
							{{item.value}}.{{item.text}}
						</view>
					</label>
				</radio-group>
			</view>
			<view class="answer">
				<view v-if="currentQuestion.type=='多选'">
					<view>正确答案:{{currentQuestion.right.join("")}}</view>
					<view v-if="currentQuestion.user_answer">您的答案:{{currentQuestion.user_answer.join("")}}</view>
					<view v-else style="color:red">您未作答</view>
				</view>
				<view v-else>
					<view>正确答案:{{currentQuestion.right}}</view>
					<view v-if="currentQuestion.user_answer">您的答案:{{currentQuestion.user_answer}}</view>
					<view v-else style="color:red">您未作答</view>
				</view>
				<view v-if="currentQuestion.user_answer">
					<view v-if="currentQuestion.is_right" style="color:green;font-weight: bold;">回答正确!</view>
					<view v-else style="color:red;font-weight: bold;">回答有误!</view>
				</view>
			</view>
			<view style="height:20rpx"></view>
		</scroll-view>
		<u-popup v-model="showM" mode="bottom" height="40%">
			<view class="questionArea" style="display:flex">
				<block v-for="(item, index) in currentExam.questions_" :key="index">
					<view class="questionItem questionItem-select" v-if="item.user_answer&&item.is_right" @click="jumpQuestion(index)">{{index+1}}</view>
					<view class="questionItem questionItem-wrong" v-else-if="item.user_answer&&!item.is_right" @click="jumpQuestion(index)">{{index+1}}</view>
					<view class="questionItem questionItem-unselect" v-else @click="jumpQuestion(index)">{{index+1}}</view>
				</block>
			</view>
		</u-popup>
		<!-- 底部栏 -->
		<view class="footer" id="footer">
			<u-button @click='previousQ()' throttle-time="200" :plain="true" type="primary">上一题</u-button>
			<u-button @click="showM = !showM" type="primary">答题卡</u-button>
			<u-button @click='nextQ()' throttle-time="200" :plain="true" type="primary">下一题</u-button>
		</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentExam:{},
				currentIndex:0,
				currentOptions:[],
				currentQuestion:{question_:{}},
				showM:false,
				keyid:0,
				start_time:null,
				scollHeight:0
				}
		},
		onLoad(options) {
			this.currentExam = uni.getStorageSync('currentExam');
			debugger;
			console.log(this.currentExam)
			let res = uni.getSystemInfoSync()
			let ratio = 750 / res.windowWidth;
			this.scollHeight = res.windowHeight*ratio - 230
			this.initQuestion()
		},
		methods: {
			initQuestion(){
				var currentQuestion = this.currentExam.questions_[this.currentIndex]
				this.currentQuestion = currentQuestion
				let options_ = []
				let origin = currentQuestion.options
				this.currentOptions = []
				for (let key in origin) {	
				      let option = {
						  value:key,
						  text:origin[key],
						  id: this.keyid++,
						  checked:false,
						  disabled:true,
					  }
				      if (currentQuestion.user_answer) {
				              if (key == currentQuestion.user_answer || currentQuestion.user_answer.indexOf(key) != -1) {
				                option.checked = true
				              }
				            } else {
				              option.checked = false
				      }
				      options_.push(option)
				}
				this.currentOptions = options_;
			},
			nextQ(){
				let index = this.currentIndex + 1
				 if(index<this.currentExam.questions_.length){
					 this.currentIndex = index
					 this.initQuestion()
				 }
			},
			previousQ(){
				let index = this.currentIndex - 1
				 if(index >= 0){
					 this.currentIndex = index
					 this.initQuestion()
				 }
			},
			jumpQuestion(index){
				this.currentIndex = index
				this.initQuestion()
				this.showM = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $u-bg-color;
		
	}
	.content{
		margin-top:8rpx;
		margin-bottom: 120rpx;
		.name {
			font-size:34rpx;
			padding: 8rpx 20rpx;
			color:$u-content-color;
			background-color: #FFFFFF;
		}
		.options {
			margin-top:8rpx;
			background-color: #FFFFFF;
			padding: 6rpx 20rpx;
			.option {
				padding: 10rpx 0rpx;
				display: flex;
				font-size: 36rpx;
				.option-item1{
					justify-content: flex-start
				}
				.option-item2{
					justify-content: flex-start;
					color:$u-main-color;
				}
			}
			
		}
		.answer{
			margin-top:8rpx;
			background-color: #FFFFFF;
			padding: 6rpx 20rpx;
			font-size: 32rpx;
		}
		.resolution{
			margin-top:8rpx;
			background-color: #FFFFFF;
			padding: 6rpx 20rpx;
			font-size: 32rpx;
		}
	}
	.sub-header {
		//width: 750rpx;
		// position: fixed;
		// margin-top: 130rpx;
		padding: 4rpx 20rpx;
		color: #000;
		font-size: 33rpx;
		font-weight: bold;
		background-color: #FFFFFF;
	}
	.header-card {
		padding: 6rpx 20rpx;
		// border: 1px solid $u-type-primary-dark;
		border-radius: 15rpx;
		color: #FFFFFF;
		background-color: $u-type-primary-dark;
	}
	.footer {
		width: 750rpx;
		height: 100rpx;
		padding: 30rpx 60rpx;
		position: fixed;
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		box-sizing: border-box;
		color: #4c8af3;
		box-shadow: 0 0 5px 1px #eee;
		background-color: #FFFFFF;
	
		&-card {
			padding: 10rpx 20rpx;
			border: 1px solid $theme-color;
			border-radius: 15rpx;
			color: #FFFFFF;
			background-color: $theme-color;
		}
	}
	
	// .header{
	// 	display: flex;
	// 	height: 70rpx;
	// 	background-color: orange;
	// 	font-size: 36rpx;
	// 	.content {
	// 		align-self: center;
	// 		.text{
	// 			margin-left:10rpx
	// 		}
	// 	}
	// 	.rbutton {
	// 		margin-left: auto;
	// 		align-self: center;
	// 		margin-right: 10rpx
	// 	}
	// }
	.header {
		width: 750rpx;
		//position: fixed;
		//position: relative;
		text-align: center;
		line-height: 60rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: $theme-color;
		// letter-spacing: 10rpx;
		background-color: #FFFFFF;
	
		&-button {
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			position: absolute;
			top: 4rpx;
			right: 10rpx;
			padding: 10rpx 20rpx;
			border-radius: 15rpx;
			letter-spacing: 2rpx;
			font-weight: 500;
			color: #FFFFFF;
			background-color: $u-type-error;
		}
	
		.scoreText {
			color: #00b060;
			font-size: 35rpx;
		}
	}
	.questionArea {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	
		.questionItem {
			width: 80rpx;
			height: 80rpx;
			margin: 10rpx 22rpx;
			line-height: 80rpx;
			font-size: 35rpx;
			text-align: center;
			border-radius: 50%;
			color: #ffffff;
		}
		.questionItem-select {
			// color: #FFFFFF;
			background-color: $theme-color;
			
		}
		
		.questionItem-unselect {
			// color: #FFFFFF;
			background-color: #bbbbbb;
		}
		.questionItem-wrong {
			// color: #FFFFFF;
			background-color: red;
		}
	}
	

</style>