<template>
	<!-- 单选题 -->
	<view class="modal">
		<view class="item" style="padding: 0 20px">
			<van-nav-bar fixed>
				<template #left>
					<van-icon name="cross" size="40rpx" @click="goBack()" />
				</template>
				<template #title>
					<text class="Exam_Current">{{current+1}}</text><text class="Exam_Count">/{{Count}}</text>
				</template>
			</van-nav-bar>
			<swiper class="swiper-box" :style="{height: `calc(100vh - 300rpx - ${statusBarHeight}px)`,}"
				:current="current" @change="onchange" :touchable="false">
				<swiper-item v-for="(item1, index1) in dataList" :key="index1">
					<view class="item1" :style="{height: `calc(100vh - 390rpx)`}">
						<view class="flex flex_start_center">
							<view class="num" v-html="item1.Title"></view>
						</view>
						<view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2"
							class="flex item2 flex_start_center">
							<template v-if="item1.StudentAnswer.length==0">
								<view class="chooseNum" @click="change(item1, item2)">{{ item2.ShowName }}
								</view>
								<view class="chooseName" @click="change(item1, item2)" v-html="item2.Content"></view>
							</template>
							<template v-else>
								<view class="chooseNum"
									:class="{ 'isRightAnswer': item2.IsAnswer,'isNotRightAnswer':getErrorAnswer(item1,item2.Name) }">
									{{ item2.Name }}
								</view>
								<view class="chooseName"
									:class="{ 'isRightText': item2.IsAnswer,'isNotAnswer':getErrorAnswer(item1,item2.Name) }"
									v-html="item2.Content">
								</view>
							</template>
						</view>
						<view class="AnswerContent" v-if="item1.StudentAnswer.length>0">
							<view>
								<text style="color: #8c8a94">正确答案：</text>
								<text class="isTrueAnswer">{{ item1.QuestionAnswerList[0] }}</text>，
								<text>您的答案是：
									<template v-if="item1.StudentAnswer.length>0">
										<text v-if="item1.StudentAnswer[0] == item1.QuestionAnswerList[0]"
											class="isTrueAnswer">
											{{ item1.StudentAnswer }}，回答正确
										</text>
										<text v-else class="isNotAnswer">{{ item1.StudentAnswer[0] }}，回答错误</text>
									</template>
									<template v-else>
										<text>未作答</text>
									</template>
								</text>
							</view>
							<view style="margin-top: 20rpx; word-wrap: break-word" v-if="item1.AnswerParse"
								class="flex">
								<text style="color: #8c8a94;flex-shrink: 0;">解析：</text>
								<view style="color: #000" v-html="item1.AnswerParse"></view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted
	} from "vue";
	import {
		SetStudentPractice
	} from "../../api/exam";
	export default {
		props: {
			paperData: Array,
			Count: Number,
			Times: Number,
			StartIndex: Number
		},
		setup(props, context) {
			let {
				ctx
			} = getCurrentInstance();
			let data = reactive({
				dataList: [],
				current: 0, //默认从第几个开始-用于从快捷菜单点入
				statusBarHeight: 0,
				isDati: false,
				// stopTouchMove:false
			});
			let UserInfo = uni.getStorageSync('userInfo');
			watch(() => [...props.paperData], (val) => {
				data.dataList = [...data.dataList, ...val];
			})
			// watch(()=>props.StartIndex,(val)=>{
			// 	if(val>-1){
			// 		data.current=val;
			// 	}
			// })			
			let methods = {
				goBack() {
					uni.navigateBack();
				},
				onchange(e) {
					data.current = e.detail.current;
					if(data.current+1==data.dataList.length){
						console.log('翻页');
						this.$emit('getAfter');
					}
				},
				//点击选择答案
				change(item1, item2) {
					item1.StudentAnswer[0] = item2.Name;
					if (item1.QuestionAnswerList && item1.QuestionAnswerList.length > 0) {
						if (item1.StudentAnswer[0] == item1.QuestionAnswerList[0]) {
							data.current += 1;
						}
					}
					let msg = {
						Id: 0,
						StudentId: UserInfo.AccountId,
						Category: item1.Category,
						QuestionId: item1.QuestionId,
						Title: item1.Title,
						QuestionContent: item1.QuestionContentObj,
						QuestionTypeId: item1.QuestionTypeId,
						QuestionTypeKey: item1.QuestionTypeKey,
						StudentAnswer: item1.StudentAnswer,
						Answer: item1.Answer,
						AnswerParse: item1.AnswerParse,
						LevelType:item1.LevelType,
						IsAnswer: 0,
						IsWrong: 0,
						Times: props.Times
					}
					if(item1.StudentAnswer.length>0){
						msg.IsAnswer=1;
					}else{
						msg.IsAnswer=0;
					}
					if(item1.StudentAnswer[0]==item1.QuestionAnswerList[0]){
						msg.IsWrong=0;
					}else{
						msg.IsWrong=1;
					}
					let res = SetStudentPractice(msg).then(res => {
						if (res) {
							if (res.Code == 1) {

							}
						}
					});
				},
				//判断是否为正确答案
				getErrorAnswer(item1, Number) {
					if (item1.StudentAnswer[0] != item1.QuestionAnswerList[0]) {
						if (item1.StudentAnswer[0] == Number) {
							return true
						}
					}
				}
			};
			onMounted(() => {
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			});
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		async onLoad(options) {}
	};
</script>
<style scoped>
	.To_Trans{
		width:100%;
		height:100vh;
		background-color: transparent;
	}
	.isRightAnswer{
		background-color: green!important;
		color:#fff!important;
	}
	.isRightText{
		color:green!important;
	}
	
	.isTrueAnswer {
		color: green !important;
	}
	.isNotRightAnswer{
		background-color: red!important;
		color:#fff!important;
	}
	.isNotAnswer {
		color: red!important ;
	}
	.AnswerContent {
		font-size: 28rpx;
		padding: 25rpx;
		background-color: #f4f4f4;
		border-radius: 5px;
	}

	.swiper-box {
		box-sizing: border-box;
	}

	.num {
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #111111;
	}

	.item {
		position: relative;
	}

	.item1 {
		align-items: center;
	}

	.item2 {
		padding-left: 25rpx;
		margin: 30rpx 0;
	}

	.chooseNum {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 50%;
		border: 1px solid #e2e2e2;
		margin-right: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
		flex-shrink: 0;
	}

	.chooseName {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
	}
	.Exam_Current{
		font-size:35rpx;
		color:red;
	}
	.Exam_Count{
		color:gray;
		font-size:26rpx;
	}
</style>
