<template>
	<view class="wrap">
		<!-- <uni-nav-bar @clickLeft="goBack()" height="110upx" leftWidth="200upx" leftText="考试记录" leftIcon="left" border
			backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar> -->
		<!-- 小标题栏 -->
		<view class="container">
			<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.detail.length}} 题</span></view>
					</u-col>
				</u-row>
			</view>
			<!-- <scroll-view class="content" scroll-y="true" v-bind:style="{height:scollHeight+'px'}"> -->
			<scroll-view class="content" scroll-y="true">
				<view class="name">
					<view><text style="margin-right: 10upx;">{{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:20upx"></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.detail" :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>
		
		
	</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.detail[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.detail.length){
					 this.currentIndex = index
					 this.initQuestion()
				 }
			},
			goBack(){
				uni.navigateBack(1)
			},
			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;
		
	}
	>>>.uni-navbar__header,
		>>>.uni-status-bar{
			background-image: linear-gradient(270deg,
					#0ca7ee 0%,
					#005aff 100%,
					#2a8cff 100%,
					#54bdff 100%),
				linear-gradient(#e60012,
					#e60012);
		}
	.content{
		margin-top:8upx;
		margin-bottom: 120upx;
		.name {
			font-size:34upx;
			padding: 8upx 20upx;
			color:$u-content-color;
			background-color: #FFFFFF;
		}
		.options {
			margin-top:8upx;
			background-color: #FFFFFF;
			padding: 6upx 20upx;
			.option {
				padding: 10upx 0upx;
				display: flex;
				font-size: 36upx;
				.option-item1{
					justify-content: flex-start
				}
				.option-item2{
					justify-content: flex-start;
					color:$u-main-color;
				}
			}
			
		}
		.answer{
			margin-top:8upx;
			background-color: #FFFFFF;
			padding: 6upx 20upx;
			font-size: 32upx;
		}
		.resolution{
			margin-top:8upx;
			background-color: #FFFFFF;
			padding: 6upx 20upx;
			font-size: 32upx;
		}
	}
	.sub-header {
		//width: 750upx;
		// position: fixed;
		// margin-top: 130upx;
		padding: 4upx 20upx;
		color: #000;
		font-size: 33upx;
		font-weight: bold;
		background-color: #FFFFFF;
	}
	.header-card {
		padding: 6upx 20upx;
		// border: 1px solid $u-type-primary-dark;
		border-radius: 15upx;
		color: #FFFFFF;
		background-color: $u-type-primary-dark;
	}
	.footer {
		width: 100%;
		height: 100upx;
		padding: 30upx 60upx;
		position: fixed;
		bottom: 10upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32upx;
		box-sizing: border-box;
		color: #4c8af3;
		box-shadow: 0 0 5px 1px #eee;
		background-color: #FFFFFF;
	
		&-card {
			padding: 10upx 20upx;
			border: 1px solid #2a8cff;
			border-radius: 15upx;
			color: #FFFFFF;
			background-color: #2a8cff;
		}
	}
	
	// .header{
	// 	display: flex;
	// 	height: 70upx;
	// 	background-color: orange;
	// 	font-size: 36upx;
	// 	.content {
	// 		align-self: center;
	// 		.text{
	// 			margin-left:10upx
	// 		}
	// 	}
	// 	.rbutton {
	// 		margin-left: auto;
	// 		align-self: center;
	// 		margin-right: 10upx
	// 	}
	// }
	.header {
		width: 750upx;
		//position: fixed;
		//position: relative;
		text-align: center;
		line-height: 60upx;
		font-size: 36upx;
		font-weight: 600;
		color: #2a8cff;
		// letter-spacing: 10upx;
		background-color: #FFFFFF;
	
		&-button {
			width: 80upx;
			height: 40upx;
			line-height: 40upx;
			position: absolute;
			top: 4upx;
			right: 10upx;
			padding: 10upx 20upx;
			border-radius: 15upx;
			letter-spacing: 2upx;
			font-weight: 500;
			color: #FFFFFF;
			background-color:  #fa3534;
		}
	
		.scoreText {
			color: #00b060;
			font-size: 35upx;
		}
	}
	.questionArea {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 20upx;
	
		.questionItem {
			width: 80upx;
			height: 80upx;
			margin: 10upx 22upx;
			line-height: 80upx;
			font-size: 35upx;
			text-align: center;
			border-radius: 50%;
			color: #ffffff;
		}
		.questionItem-select {
			// color: #FFFFFF;
			background-color: #2a8cff;
			
		}
		
		.questionItem-unselect {
			// color: #FFFFFF;
			background-color: #bbbbbb;
		}
		.questionItem-wrong {
			// color: #FFFFFF;
			background-color: red;
		}
	}
	

</style>