<template>
	<div class="app-box">
		<image src="../../../static/images/train/bj.jpg" class="bjImg" mode=""></image>
		<div class="con-box">
			<div class="header">
				<div>正确率：0%</div>
				<div>用时：00:00</div>
				<div class="headBtn">暂停</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" @click="selected(i)" :class="radio!==''&&i==radio?'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" @click="selected2(i)" :class="judgment(i)?'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" @click="selected3('正确')" :class="radio2=='正确'?'active':''">
						    <span>正确</span>
						  </div>
						  <div class="opt" @click="selected3('错误')" :class="radio2=='错误'?'active':''">
						    <span>错误</span>
						  </div>
						</div>
						<div class="analysis">
						  <div class="analysisHead correct">
						    <div>回答正确！</div>
						    <div></div>
						  </div>
						  <!-- <div class="analysisHead errors" v-if="judgWhether=='错误'">
						    <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(val-1)}}.</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>
						<div class="problemBtns">
							<div class="events">提交答案</div>
							<div>下一题</div>
						</div>
					</template>
				</div>
			</div>
			<div class="footer">
				<div class="footerLeft">
					<div class="zuo events"></div>
					<div class="you"></div>
					<div style="text-align: center;font-size: 24rpx;">
						<div>⭐</div>
						<div>收藏</div>
						
					</div>
				</div>
				<div></div>
				<div class="footer">
					
				</div>
			</div>
		</div>
		
	</div>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, vacanciesTo, formatTotal, config } = inject('globalFunction');
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';

const radio = ref('');
const radio2 = ref('');
const checkList = ref([]);
const questionIndex = ref(1);
const correctIndex = ref(0);
const errorsIndex = ref(0);
const accuracyRate = ref(0);
const problemData = reactive([
	{
		type:'single',
		content:"君不见黄河之水天上来，下一句是？",
		fraction:5,
		trainChooses:"奔流到海不复回,朝如青丝暮成雪,人生得意须尽欢,莫使金樽空对月",
	  },{
		type:'multiple',
		content:"以下哪些是欧姆定律的适用条件？",
		fraction:8,
		trainChooses:"线性电阻,恒定温度,金属导体,半导体材料",
		
	  },{
		type:'judge',
		content:"功率越大的电器，其电阻值越小",
		fraction:2,
		trainChooses:[
		  "正确",
		  "错误",
		]
	  }
]);

function selected(i){
    radio.value=i
};
//多选
function selected2(i){
	let arr=checkList.value.join(",")
	if(arr.indexOf(i) !== -1){
	  const index = checkList.value.indexOf(i);
	  if (index !== -1) {
		  checkList.value.splice(index, 1);
	  }
	}else{
	  checkList.value.push(i)
	}
};
function judgment(i){
	let arr=checkList.value.join(",")
	if(arr.indexOf(i) !== -1){
	  return true
	}else{
	  return false
	}
};
function selected3(i){
    radio2.value=i
};
// 解析选项
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);
};
</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;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(0deg, #4285EC 0%, #0BBAFB 100%);
			color: #fff;
			font-size: 26rpx;
			border-radius: 10rpx
			.headBtn{
				background: #499FFF;
				border-radius: 4px;
				width: 100rpx;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
		.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;
				.zuo{
					width: 24rpx;
					height: 24rpx;
					border-top: 2px solid #666
					border-left: 2px solid #666
					transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
					margin-left: 50rpx;
				}
				.you{
					width: 24rpx;
					height: 24rpx;
					border-right: 2px solid #666
					border-bottom: 2px solid #666
					transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
					margin-left: 30rpx;
					margin-right: 50rpx;
				}
			}
			
		}
	}
}
.events{
	pointer-events: none; /* 这会禁用所有指针事件 */
	opacity: 0.5; /* 可选：改变透明度以视觉上表示不可点击 */
	cursor: not-allowed; /* 可选：改变鼠标光标样式 */
}
</style>