<template>
	<view>
		<van-nav-bar fixed>
			<template #left>
				<van-icon name="cross" style="font-size: 40rpx; color: #111" @click="back" />
			</template>
			<template #title>
				<view style="
            font-size: 32rpx;
            color: #111;
            font-family: PingFang SC;
            font-weight: 800;
          ">答题卡</view>
			</template>
		</van-nav-bar>
		<view class="answer-sheets">
			<view class="item">
				<view class="flex flex_wrap">
					<view v-for="(item, index) in questionList" :key="index" class="flex flex_wrap">
						<view class="item1" :class="{ isRes: item.StudentAnswer.length>0 }" @click="chooseTopic(index)">
							{{ index + 1 }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submitBox" v-if="!isShowJx">
			<view class="submit" @click="savePaper">立即提交</view>
		</view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	import {
		SetStudentExam
	} from "../../../api/exam";
	export default {
		props: {
			paperData: Array,
			saveId: Number,
			isShowJx: Boolean
		},
		setup(props, ctx) {
			let data = reactive({
				questionList: props.paperData,
				saveMsg: {
					Id: props.saveId,
					ExamDetailsList: [],
				},
				isShowJx:props.isShowJx
			});
			let methods = {
				chooseTopic(index) {
					ctx.emit("chooseTopic", index);
				},
				//隐藏答题卡
				back() {
					ctx.emit("hideAnswer");
				},
				//交卷
				async savePaper() {
					data.saveMsg.ExamDetailsList=[];
					data.questionList.forEach(x => {
						let obj = {
							DetailId: 0,
							ExamId: 0,
							QuestionId: x.QuestionId,
							Title: x.Title,
							QuestionContent: x.QuestionContentObj,
							QuestionTypeId: x.QuestionTypeId,
							QuestionTypeKey: x.QuestionTypeKey,
							Answer: x.Answer,
							AnswerParse: x.AnswerParse,
							IsAnswer: 0,
							IsWrong: 1,
							StudentAnswer:x.StudentAnswer,
							Score:x.Score
						}
						if(obj.StudentAnswer.length>0){
							obj.IsAnswer=1;
						}
						if(obj.StudentAnswer.length>0){
							if(obj.StudentAnswer.toString()==obj.Answer){
								obj.IsWrong = 0
							}else{
								obj.IsWrong = 1
							}
						}
						data.saveMsg.ExamDetailsList.push(obj);
					})
					SetStudentExam(data.saveMsg).then(res=>{
						console.log(res);
						uni.navigateBack();
					})
				},
			};
			return {
				...toRefs(data),
				...methods,
			};
		},
	};
</script>

<style scoped>
	.answer-sheets {
		box-sizing: border-box;
		padding: 30rpx;
		height: calc(100vh - 300rpx);
		overflow-y: auto;
		margin-top: 140rpx;
	}

	.name,
	.num {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #111111;
	}

	.num {
		width: 100rpx;
		text-align: center;
	}

	.item {
		margin-bottom: 20rpx;
	}

	.item1-1 {
		width: 690rpx;
		margin: 22rpx 0 0 0;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #111111;
	}

	.item1 {
		width: 55rpx;
		height: 55rpx;
		border: 1px solid #e2e2e2;
		border-radius: 50%;
		margin: 22rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #111111;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.item2 {
		width: 44rpx;
		height: 44rpx;
		border: 1px solid #e2e2e2;
		border-radius: 50%;
		text-align: center;
		line-height: 44rpx;
		margin-right: 55rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}

	.choose {
		background-color: #00acf9 !important;
		color: #ffffff !important;
	}

	.submitBox {
		width: 750rpx;
		height: 150rpx;
		background-color: #e2e2e2;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding-top: 40rpx;
	}

	.submit {
		width: 600rpx;
		height: 70rpx;
		border-radius: 35rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #00acf9;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fff;
		margin: 0 auto;
	}

	.isRes {
		background-color: #00acf9 !important;
		color: #ffffff !important;
		border: none !important;
	}
</style>
