<template>
	<view class="content">
		<view class="content__titletop">
			<view class="content__title">试卷名称:{{info.examname}}</view>
			<view class="content__subtitle">(满分: {{info.paperexamscore}}分)</view>
			<view class="content__subtitle">(合格分: {{info.passscore}}分)</view>
		</view>

		<view class="content__info">
			<view class="content__top">
				<view>姓名: {{info.username}}</view>
				<view>分数: {{info.examscore}}分</view>
			</view>
			<view>考试时间: {{info.examtimeend}}</view>
		</view>

		<view class="content__sign">
			<view style="margin-right: 10rpx">签字: </view>
			<image style="width: 120rpx; height: 70rpx;" :src="$filePath + info.signaturePath" />
		</view>

		<view class="counter">
			当前试题: <text style="color: orange">{{ current + 1 }}</text>/{{ questionList.length }}
		</view>

		<view class="topic">
			<view class="title">
				<text class="tag_title">
					{{ handleCalcQuestType(questionList[current].questiontype) }}
				</text>
				{{ current + 1 }}.
				<text>{{ questionList[current].questiondry }}</text>
			</view>
			<view v-if="questionList[current].questiontype === '1'" class="options">
				<view v-for="(item, index) in ['A', 'B', 'C', 'D']" :key="index"
					:class="['item', questionList[current].answer === item ? 'active' : '']">
					<text class="option">{{ item }}</text>
					<text class="text">
						{{ questionList[current]['option' + item.toLocaleLowerCase()] }}
					</text>
				</view>
			</view>
			<view v-if="questionList[current].questiontype === '2'" class="options">
				<view v-for="(item, index) in ['A', 'B', 'C', 'D']" :key="index"
					:class="['item', questionList[current].answer && questionList[current].answer.indexOf(item) !== -1 ? 'active' : '']">
					<text class="option">{{ item }}</text>
					<text class="text">
						{{ questionList[current]['option' + item.toLocaleLowerCase()] }}
					</text>
				</view>
			</view>
			<view v-if="questionList[current].questiontype === '3'" class="options">
				<view v-for="(item, index) in ['A', 'B']" :key="index"
					:class="['item', questionList[current].answer === item ? 'active' : '']">
					<text class="option">
						{{ questionList[current]['option' + item.toLocaleLowerCase()] }}
					</text>
					<text class="text"></text>
				</view>
			</view>
			<view class="correct-answer">
				<text>正确答案</text>
				<view v-if="questionList[current].questiontype === '3'">
					{{ questionList[current].answerright === 'A' ? '对' : '错' }}
				</view>
				<view v-else>{{ questionList[current].answerright || '无' }}</view>
				<text>权威解读</text>
				<view>{{ questionList[current].descr || "无" }}</view>
			</view>
		</view>

		<view class="footer">
			<block v-if="current !== 0">
				<u-button
					shape="circle"
					:custom-style="{
						width: current === questionList.length - 1 ? '100%' : '45%'
					}"
					text="上一题"
					@click="current--"
				/>
			</block>
			<block v-if="current !== questionList.length - 1">
				<u-button
					shape="circle"
					type="primary"
					:custom-style="{
						width: current === 0 ? '100%' : '45%',
						marginLeft: current === 0 ? '0' : '10%'
					}"
					text="下一题"
					@click="current++"
				/>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		getTaskScoreInfo
	} from "@/api";

	export default {
		data() {
			return {
				info: {},
				questionList: [],
				current: 0, // 新增当前激活的题目索引
				questionTypeMap: {
					1: '单选题',
					2: '多选题',
					3: '判断题',
					4: '填空题',
					5: '简答题'
				}
			}
		},

		onLoad(query) {
			const {
				stagestudentrelationId,
				classId
			} = query
			this.getData(stagestudentrelationId, classId)
		},

		mounted() {},

		methods: {
			async getData(stagestudentrelationId, classId) {
				const resData = await getTaskScoreInfo({
					stagestudentrelationId,
					classId
				})
				this.questionList = resData.pd.questionList
				this.info = resData.pd
				console.log(this.info)
			},
			handleCalcQuestType(type) {
				return `(${this.questionTypeMap[type]})`
			},
			previewImage() {
				uni.previewImage({
					urls: [this.$filePath + this.info.signaturePath],
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 16rpx;

		.content__titletop {
			text-align: center;

			.content__title {
				font-size: 34rpx;
				font-weight: 600;
			}

			.content__subtitle {
				margin-top: 8rpx;
				font-size: 24rpx;
			}
		}

		.content__info {
			font-size: 34rpx;

			view {
				margin-top: 8rpx;
			}
			
			.content__top {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.content__sign {
			margin-top: 10rpx;
			font-size: 34rpx;
			display: flex;
			align-items: center;
		}

		.counter {
			font-size: 28rpx;
			margin: 10rpx 0;
			text-align: end;
		}

		.topic {
			box-sizing: border-box;

			.tag_title {
				font-size: 28rpx;
				background-color: #fff;
				color: #5ac725;
				border-radius: 8rpx;
				padding: 2rpx 8rpx;
				margin-right: 10rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: 600;

				.question-type {
					border-radius: 40rpx;
					padding: 4rpx 14rpx;
					border: 1rpx solid #3c9cff;
					font-size: 28rpx;
					color: #3c9cff;
				}
			}

			.options {
				margin-top: 40rpx;

				.item {
					position: relative;
					margin-top: 40rpx;
					color: #696868;

					&.active {
						color: #3c9cff;

						.option {
							background-color: #3c9cff;
							color: #fff;
						}
					}

					.option {
						background-color: #eee;
						border-radius: 80rpx;
						width: 65rpx;
						height: 65rpx;
						line-height: 65rpx;
						text-align: center;
						font-size: 30rpx;
						display: inline-block;
					}

					.text {
						margin-left: 30rpx;
						height: 60rpx;
						line-height: 60rpx;
					}
				}
			}

			.correct-answer {
				text {
					display: inline-block;
					margin-top: 10rpx;
					color: #696868;
					font-size: 30rpx;
					font-weight: bold;
				}

				view {
					margin-top: 20rpx;
					color: #333;
					padding: 20rpx;
					background-color: #eee;
					border-radius: 10rpx;
					font-size: 30rpx;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			padding: 20rpx;
			box-sizing: border-box;
			background: #fff;
			text-align: center;
			display: flex;
		}
	}
</style>