<template>
	<div class="app-box">
		<image src="/packageB/static/images/train/bj.jpg" class="bjImg" mode=""></image>
		<div class="con-box">
			<div class="header">
				<div style="font-weight: 600;font-size: 32rpx;">{{rows.name}}</div>
				
			</div>
			<div class="problemCard">
				<div v-for="(item,index) in problemData" :key="index">
					<template v-if="questionIndex==(index+1)">
						<div class="problemTitle">
							<span class="titleType" v-if="item.type=='single'">单选题</span>
							<span class="titleType" v-if="item.type=='multiple'">多选题</span>
							<span class="titleType" v-if="item.type=='judge'">判断题</span>
							<span>{{item.content}}</span>
						</div>
						<div class="options" v-if="item.type=='single'">
						  <div class="opt" :class="item.choice!==''&&i==item.choice?'active':''" v-for="(val,i) in parseOptions(item.trainChooses)">
						    <div class="optLab">{{indexToLetter(i)}}</div>
						    <span>{{val}}</span>
						  </div>
						</div>
						<div class="options" v-if="item.type=='multiple'">
						  <div class="opt" :class="judgment(i,index)?'active':''" v-for="(val,i) in parseOptions(item.trainChooses)">
						    <div class="optLab">{{indexToLetter(i)}}</div>
						    <span>{{val}}</span>
						  </div>
						
						</div>
						<div class="options" v-if="item.type=='judge'">
						  <div class="opt" :class="item.choice=='正确'?'active':''">
						    <span>正确</span>
						  </div>
						  <div class="opt" :class="item.choice=='错误'?'active':''">
						    <span>错误</span>
						  </div>
						</div>
						<div class="analysis">
						  <div class="analysisHead correct" v-if="item.choosed==item.answer">
						    <div>回答正确！</div>
						    <div></div>
						  </div>
						  <div class="analysisHead errors" v-else>
						    <div>回答错误！</div>
						    <div></div>
						  </div>
						  <div class="analysisCon">
						    <div class="parse1">正确答案：</div>
						    <div class="parse2" v-if="item.type=='single'" style="color: #30A0FF;font-weight: bold;">{{String.fromCharCode(65 + Number(item.answer))}}.</div>
						    <div class="parse2" v-if="item.type=='multiple'" style="color: #30A0FF;font-weight: bold;">
						      <span  v-for="(val,i) in parseOptions(item.answer)">{{indexToLetter(Number(val))}}.</span>
						    </div>
						    <div class="parse2" v-if="item.type=='judge'" style="color: #30A0FF;font-weight: bold;">{{item.answer}}</div>
						  </div>
						  <div class="analysisCon">
						    <div class="parse1">答案解析：</div>
						    <div class="parse2">{{item.answerDesc}}</div>
						  </div>
						  <div class="analysisCon">
						    <div class="parse1">知识点：</div>
						    <div>
						      <el-tag style="margin-right: 10px;">{{item.knowledgePoint}}</el-tag>
						    </div>
						  </div>
						</div>
					</template>
				</div>
			</div>
			<div class="footer">
				<div class="footerLeft">
					<div class="zuo" :class="questionIndex==1?'events':''" @click="questionIndex-=1"></div>
					<div class="you" :class="questionIndex==problemData.length?'events':''" @click="questionIndex+=1"></div>
					
				</div>
				<div class="footerLeft">
					<div @click="dialogVisible=true">
						<div><span style="color: #1CADF5;">{{questionIndex}}</span>/{{problemData.length}}</div>
						<div>题号</div>
					</div>
				</div>
			</div>
		</div>
		<div class="cards" v-if="dialogVisible">
			<div class="cardCon">
				<div class="cardHead">
					<div>题号</div>
					<div style="font-size: 40rpx;" @click="clones()">×</div>
				</div>
				<div class="questionNums">
				  <div class="questions" :class="item.whether=='正确'?'questionCorrect':item.whether=='错误'?'questionError':questionIndex==(index+1)?'questionsActive':''" @click="switchs(index)" v-for="(item,index) in problemList" :key="index">{{index+1}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted,onBeforeUnmount,computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api,urls , navTo,navBack , vacanciesTo, formatTotal, config } = inject('globalFunction');
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const userInfo = ref({});
const rows = ref({});
const Authorization = ref('');
const radio = ref('');
const radio2 = ref('');
const checkList = ref([]);
const questionIndex = ref(1);
const correctIndex = ref(0);
const errorsIndex = ref(0);
const elapsedTime = ref(0);
const judgWhether = ref('');
const isRunning = ref(false);
const dialogVisible = ref(false);
const problemData = ref([]);
const problemList = ref([]);
watch(questionIndex, (newVal, oldVal) => {
  radio.value=""
  radio2.value=""
  checkList.value=[]
  judgWhether.value=""
});

onLoad((options) => {
	rows.value=options
	Authorization.value=uni.getStorageSync('Padmin-Token')||''
	getHeart();
});
onShow(()=>{
	
})
function getHeart() {
	const raw =Authorization.value;
	const token = typeof raw === "string" ? raw.trim() : "";
	const headers = token ? { 'Authorization': raw.startsWith("Bearer ") ? raw : `Bearer ${token}` }: {}
	$api.myRequest("/dashboard/auth/heart", {}, "POST", 10100, headers).then((resData) => {
      if (resData.code == 200) {
        getUserInfo();
      } else {
		  navTo('/packageB/login')
      }
    });
};
function getUserInfo(){
	let header={
		'Authorization':Authorization.value
	}
	$api.myRequest('/system/user/login/user/info', {},'get',10100,header).then((resData) => {
		userInfo.value = resData.info || {};
		// userId.value=resData.info.userId
		queryData()
	});
};
function queryData(){
	problemData.value=[]
	let header={
		'Authorization':Authorization.value,
		'Content-Type':"application/x-www-form-urlencoded"
	}
	$api.myRequest('/train/public/trainExamDash/getExamByIdModel', {
		userId: userInfo.value.userId,
		examPaperId:rows.value.examPaperId,
		examId:rows.value.examId,
	},'post',9100,header).then((resData) => {
		if(resData&&resData.code==200){
			elapsedTime.value=(rows.value.timeLimit*60)
			resData.data.forEach((item,i)=>{
				if(item.type=='multiple'){
				  if(item.choosed){
				    item.choice=item.choosed.split(",");
				    item.submitAnswers=true
				  }else{
				    item.choice=[]
					item.submitAnswers=false
				  }
				}else{
				  if(item.choosed){
				    item.choice=item.choosed;
				    item.submitAnswers=true
				  }else{
				    item.choice=""
					item.submitAnswers=false
				  }
				}
				problemData.value.push(item)
				problemList.value.push({index:i+1,whether:""})
			})
		}
	});
	
}

function judgment(i,indexs){
	let arr=problemData.value[indexs].choice.join(",")
	if(arr.indexOf(i) !== -1){
	  return true
	}else{
	  return false
	}
};
// 解析选项
function parseOptions(options) {
	if (!options) return [];
	// 假设options是字符串格式，以分号分隔
	if (typeof options === 'string') {
	  return options.split(',').filter(opt => opt.trim());
	}
	// 如果是数组，直接返回
	if (Array.isArray(options)) {
	  return options;
	}
	return [];
};
function indexToLetter(index) {
	// 将索引转换为对应的字母
	return String.fromCharCode(65 + index);
};
function clones(){
	dialogVisible.value=false
};
function switchs(i){
	questionIndex.value=(i+1)
	dialogVisible.value=false
};
</script>

<style lang="stylus" scoped>
.app-box{
	width: 100%;
	height: 100vh;
	position: relative;
	.bjImg{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.con-box{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top:0;
		z-index: 10;
		padding: 20rpx 28rpx;
		box-sizing: border-box;
		.header{
			height: 100rpx;
			padding: 0 10rpx;
			background: linear-gradient(0deg, #4285EC 0%, #0BBAFB 100%);
			color: #fff;
			font-size: 26rpx;
			border-radius: 10rpx
			display: flex;
			align-items: center;
		}
		.problemCard{
			margin-top: 30rpx;
			.problemTitle{
				font-size: 30rpx;
				.titleType{
					display: inline-block;
					background-color: #499FFF;
					border-radius: 10rpx 10rpx 10rpx 0;
					padding: 8rpx 12rpx;
					color: #fff;
					font-size: 26rpx;
					margin-right: 20rpx;
				}
			}
			.options{
				margin-top: 30rpx;
				.opt{
					height: 60rpx;
					/* background-color: #F8F9FA; */
					border-radius: 5px;
					margin-bottom: 15px;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					box-sizing: border-box;
					color: #808080;
					font-size: 30rpx;
					.optLab{
					  width: 40rpx;
					  height: 40rpx;
					  text-align: center;
					  line-height: 40rpx;
					  border-radius: 50%;
					  background-color: #8C8C8C;
					  color: #fff;
					  font-weight: 600;
					  font-size: 32rpx;
					  margin-right: 20rpx;
					}
				}
				.active{
				  background: linear-gradient(90deg, #25A9F5 0%, #B1DBFF 100%);
				  color: #fff!important;
				  font-weight: bold;
				}
				.active>view{
				  background-color: #fff!important;
				  color: #25A9F5!important;
				}
			}
			.analysis{
			  margin-top: 30rpx;
			  background-color: #fff;
			  border-radius: 6px;
			  margin-bottom: 15rpx;
			  border: 1px solid #10A8FF;
			  padding: 20rpx;
			  box-sizing: border-box;
			  .analysisHead{
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				letter-spacing: 2px;
			  }
			  .correct{
			    color: #67C23A;
			  }
			  .errors{
			    color: #F06A6A;
			  }
			  .analysisCon{
			    margin-top: 30rpx;
				.parse1{
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
				}
				.parse2{
					font-size: 26rpx;
					color: #333;
					margin-top: 10px;
				}
			  }
			}
			.problemBtns{
				display: flex
				align-items: center
				justify-content: center
				view{
					width: 140rpx
					height: 50rpx
					text-align: center
					line-height: 50rpx
					background-color: #10A8FF
					color: #fff
					font-size: 28rpx
					border-radius: 5rpx
					margin-right: 10rpx;
				}
				
			}
		}
		.footer{
			width: 100%;
			height: 120rpx;
			border-top: 1px solid #ddd
			position: fixed
			bottom: 0
			left: 0
			display: flex
			align-items: center
			justify-content: space-between
			.footerLeft{
				display: flex
				align-items: center
				font-size: 30rpx;
				text-align: center
				.zuo{
					width: 26rpx;
					height: 26rpx;
					border-top: 2px solid #666
					border-left: 2px solid #666
					transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
					margin-left: 60rpx;
				}
				.you{
					width: 26rpx;
					height: 26rpx;
					border-right: 2px solid #666
					border-bottom: 2px solid #666
					transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
					// margin-left: 30rpx;
					margin-right: 50rpx;
				}
				.icons{
					width: 30rpx;
					height: 30rpx;
					color: #fff;
					text-align: center;
					line-height: 30rpx;
					border-radius: 50%
				}
				.texts{
					font-size: 24rpx;
				}
			}
			.footerLeft>view{
				margin-right: 40rpx;
			}
			.footerBtn{
				width: 140rpx
				height: 50rpx
				text-align: center
				line-height: 50rpx
				background-color: #67C23A
				color: #fff
				font-size: 28rpx
				border-radius: 5rpx
			}
		}
	}
	.cards{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		z-index: 1000;
		padding: 100rpx 50rpx;
		box-sizing: border-box;
		.cardCon{
			height: 100%;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			.cardHead{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: 600;
			}
			.questionNums{
			  width: 100%;
			  display: flex;
			  flex-wrap: wrap;
			}
			.questions{
			  width: 60rpx;
			  height: 60rpx;
			  text-align: center;
			  line-height: 60rpx;
			  border-radius: 8rpx;
			  border: 2px solid #E0E0E0;
			  font-size: 28rpx;
			  margin-right: 15px;
			  cursor: pointer;
			}
			.questionsActive{
			  background-color: #F0F9FF;
			  border: 2px solid #409EFF;
			}
			.questionCorrect{
			  background-color: #F0F9FF;
			  border: 2px solid #64BC38;
			  color: #6BC441;
			}
			.questionError{
			  background-color: #FFF1F0;
			  border: 2px solid #F56C6C;
			  color: #F36B6B;
			}
		}
	}
}
.events{
	pointer-events: none; /* 这会禁用所有指针事件 */
	opacity: 0.5; /* 可选：改变透明度以视觉上表示不可点击 */
	cursor: not-allowed; /* 可选：改变鼠标光标样式 */
}
</style>