<template>
	<view>
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">考试详情</block>
		</cu-custom>
		<view class="course">
			<view class="course-aa">
				<view class="course-items" v-for="(item,index) in form.QUESTIONLIST" :key="item.QUESTION_ID">
					<view class="course-ask">
						{{ index + 1 }}.
						<text v-if="item.QUESTIONTYPE == '1'" class="mark">(单选题)</text>
						<text v-if="item.QUESTIONTYPE == '2'" class="mark">(多选题)</text>
						<text v-if="item.QUESTIONTYPE == '3'" class="mark">(判断题)</text>
						{{ item.QUESTIONDRY }}
					</view>
					<view class="course-answer">
						<radio-group v-if="item.QUESTIONTYPE == '1'" v-model="item.ANSWER">
							<label class="answer-lable">
								<radio class="blue" :class="item.ANSWER=='A'?'checked':''" :checked="item.ANSWER=='A'?true:false" :disabled="isDisabled" value="A"></radio>
								<text class="title">A.{{ item.OPTIONA }}</text>
							</label>
							<label class="answer-lable">
								<radio class="blue" :class="item.ANSWER=='B'?'checked':''" :checked="item.ANSWER=='B'?true:false" :disabled="isDisabled" value="B"></radio>
								<text class="title">B.{{ item.OPTIONB }}</text>
							</label>
							<label class="answer-lable">
								<radio class="blue" :class="item.ANSWER=='C'?'checked':''" :checked="item.ANSWER=='C'?true:false" :disabled="isDisabled" value="C"></radio>
								<text class="title">C.{{ item.OPTIONC }}</text>
							</label>
							<label class="answer-lable">
								<radio class="blue" :class="item.ANSWER=='D'?'checked':''" :checked="item.ANSWER=='D'?true:false" :disabled="isDisabled" value="D"></radio>
								<text class="title">D.{{ item.OPTIOND }}</text>
							</label>
						</radio-group>
						<checkbox-group v-if="item.QUESTIONTYPE == '2'" class="checkbox" v-model="item.ANSWER">
							<label class="answer-lable">
								<checkbox :id="'checkA'+index" value="A" :checked="item.ANSWER.includes('A')?true:false" :disabled="isDisabled"></checkbox>
								<text class="title">A.{{ item.OPTIONA }}</text>
							</label>
							<label class="answer-lable">
								<checkbox :id="'checkB'+index" value="B" :checked="item.ANSWER.includes('B')?true:false" :disabled="isDisabled"></checkbox>
								<text class="title">B.{{ item.OPTIONB }}</text>
							</label>
							<label class="answer-lable">
								<checkbox :id="'checkC'+index" value="C" :checked="item.ANSWER.includes('C')?true:false" :disabled="isDisabled"></checkbox>
								<text class="title">C.{{ item.OPTIONC }}</text>
							</label>
							<label class="answer-lable">
								<checkbox :id="'checkD'+index" value="D" :checked="item.ANSWER.includes('D')?true:false" :disabled="isDisabled"></checkbox>
								<text class="title">D.{{ item.OPTIOND }}</text>
							</label>
						</checkbox-group>
						<radio-group v-if="item.QUESTIONTYPE == '3'" v-model="item.ANSWER">
							<label class="answer-lable">
								<radio class="blue" :class="item.ANSWER=='A'?'checked':''" :checked="item.ANSWER=='A'?true:false" :disabled="isDisabled" value="A"></radio>
								<text class="title">A.{{ item.OPTIONA }}</text>
							</label>
							<label class="answer-lable">
								<radio class="blue" :class="item.ANSWER=='B'?'checked':''" :checked="item.ANSWER=='B'?true:false" :disabled="isDisabled" value="B"></radio>
								<text class="title">B.{{ item.OPTIONB }}</text>
							</label>
						</radio-group>
					</view>
					<view class="course-ask">
						正确答案：
						<text :class="item.RESULT == 'RIGHT' ? 'color-green' : 'color-red'" class="mark">{{ item.ANSWERRIGHT }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {
		basePath,
		corpinfoId,
		deptId,
		loginSession,
		formatDate,
		loginUser
	} from '@/common/tool.js'

	export default {
		components: {},
		data() {
			return {
				isDisabled: true,
				STUDYTASK_ID: '',
				STAGEEXAMPAPER_ID: '',
				dataFlag: 'noData',
				sTop: 0,
				totalHeight: 0,
				form: {
					STAGEEXAMPAPER_ID: '', // 阶考ID
					EXAMNAME: '', // 试卷名称
					EXAMTIME: '', // 考试时间（开始时间）
					ANSWERSHEETTIME: '', // 答卷时间（持续时间）
					EXAMSCORE: 100, // 试卷分数
					QUESTIONNUM: '', // 试题数量（10、20、50、100）
					QUESTIONLIST: [],
					QUESTION_ID: [], // 试题ID数组
					QUESTIONTYPE: [], // 试题类型数组
					ANSWER: [], // 学员答案
					ANSWERRIGHT: [] // 正确答案
				}, //页面数据
				subForm: {}, //交卷数据
				list: [], //返回数据
				page: 1, //分页参数--页数
				rows: 10, //分页参数--每页数据条数
				totalCount: 0, //分页参数--初始化页数
				isEnd: false, //防止多次刷新
				totalPage: 0, //分页参数--分页数量
				noClick: true
			}
		},
		onLoad(event) {
			this.STUDYTASK_ID = event.STUDYTASK_ID
			this.STAGEEXAMPAPER_ID = event.STAGEEXAMPAPER_ID
			this.getData();
		},
		methods: {
			getData() {
				var _this = this;
				uni.showLoading({
					title: '请稍候'
				})
				uni.request({
					url: basePath + '/app/stageexam/findResult',
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						STUDYTASK_ID: this.STUDYTASK_ID,
						STAGEEXAMPAPER_ID: this.STAGEEXAMPAPER_ID,
            CORPINFO_ID:loginUser.CORPINFO_ID,
            USER_ID:loginUser.USER_ID,
					},
					success: (res) => {
						if ("success" == res.data.result) {
							uni.hideLoading();
							_this.form = Object.assign(_this.form, res.data.pd)
							_this.form.QUESTIONLIST.forEach((ele) => {
								if (ele.ANSWER == ele.ANSWERRIGHT) {
									ele.RESULT = 'RIGHT'
								} else {
									ele.RESULT = 'ERROR'
								}
								if (ele.QUESTIONTYPE === '2') {
									ele.ANSWER = ele.ANSWER.split('')
								}
							})
							console.info(_this.form)
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	.course {
		background-color: #fff;
	}

	.course-header {
		padding: 20upx;
		border-bottom: 1upx solid #F1F1F1;
		line-height: 1.6;
	}

	.course-name {
		font-weight: bold;
		font-size: 30upx;
	}

	.course-int {
		color: #888;
	}

	.course-obj {
		color: #888;
	}

	.course-aa {
		padding: 0 20upx;
	}

	.course-items {
		border-bottom: 1px dashed #F1F1F1;
		padding: 20upx 0;
	}

	.course-items .course-ask {
		line-height: 1.6;
		font-size: 28upx;
		/* margin-bottom: 10upx; */
	}

	.course-answer {
		padding-left: 40upx;
		margin-top: 20upx;
	}

	.answer-lable {
		display: block;
		margin-bottom: 20upx;
	}

	.answer-lable:last-child {
		margin-bottom: 0;
	}

	.answer-lable radio {
		margin-right: 20upx;
	}

	.color-red {
		color: red;
	}

	.color-green {
		color: #21a03c;
	}
</style>