<!-- 查看试卷 -->
<template>
	<div class="testPaper">
		<div class="content">
			<div class="paper-left" ref="testPage">
				<div class="paperName">{{this.paperName}}</div>
				<el-divider></el-divider>
				<div class="bigBox">
					<div class="operating" v-for="(item,index) in this.paperData.questionsInfoVos">
						<div class="title">
							<div class="title-left">
								<span>{{index+1}}、</span>
								<span>[{{item.typeName}}] </span>
								<span v-html="item.question"></span>
								<span>({{item.score}}分)</span>
							</div>
							<div class="score">
								得分：{{item.actualScore}}</div>
						</div>

						<div class="operating_content" :class="[item.isRight==1?'active':'onActive']">
							<el-radio-group v-model="item.result" v-if="item.type==1">
								<el-radio :label="x.optionKey" v-for="x in item.options" disabled>{{x.optionKey}}、<span
										v-html="x.optionContent"></span></el-radio>
							</el-radio-group>
							<el-checkbox-group v-model="item.result" v-if="item.type==2" disabled>
								<el-checkbox :label="x.optionKey" v-for="x in item.options">{{x.optionKey}}、<span
										v-html="x.optionContent"></span></el-checkbox>
							</el-checkbox-group>
							<el-radio-group v-model="item.result" v-if="item.type==3" disabled>
								<!-- <el-radio :label="x.optionKey" v-for="x in item.options" > <span v-html="x.optionContent"></span><i :class="el-icon-check"></i></el-radio> -->
								<el-radio label="1">对</el-radio>
								<el-radio label="0">错</i></el-radio>
							</el-radio-group>
							<el-input v-model="item.result" v-if="item.type==4" disabled></el-input>
							<el-input v-model="item.result" v-if="item.type==5" type="textarea" disabled>
							</el-input>
							<el-input v-model="item.result" v-if="item.type==6" type="textarea" disabled>
							</el-input>

						</div>
						<div class="operating_footer">
							正确答案：
							<span v-if="item.type==3">
								{{item.rightOption==1?'对':item.rightOption==0?'错':''}}
							</span>
							<span v-else>
								{{item.rightOption}}
							</span>
						</div>
						<div class="operating_footer">
							题目解析：{{item.parsing?item.parsing:'无解析'}}
						</div>
						<!-- <div class="operating_footer" v-if="item.type==4||item.type==5||item.type==6">
							实际得分：<el-input-number v-model="item.actualScore"  size="small" controls-position="right"  :min="0" :max="item.score"></el-input-number>
						</div> -->
					</div>
				</div>
			</div>
			<div class="paper-right">
				<div class="block">
					<el-avatar :size="50" :src="circleUrl"></el-avatar>
				</div>
				<div class="information">
					<span>姓名：{{paperData.userName}}</span>
					<el-divider></el-divider>

					<div class="third">
						<div>题卡</div>
						<div>
							提示：<span>蓝色为正确</span>，<span>橙色为半对</span>，<span>红色为错误</span>
						</div>
						<div style="maxHeight:40vh;overflowY:auto">
							<el-tag class="tagBox"
								:class="[t.isRight==1?'isTag':t.result==''?'wIsTag':t.isRight==2?'bIsTag':'onIsTag']"
								type="info" v-for="(t,ti) in this.paperData.questionsInfoVos">{{ti+1}}
							</el-tag>
						</div>
					</div>
					<el-divider></el-divider>
					<div class="fourth">
						<el-button type="primary" @click="submitPaper">返 回</el-button>
						<el-button type="primary" @click="printPaper" v-if="$route.query.type == '1'">下 载</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import ypMenu from '@/api/examination/ypMenu.js'

export default {
		mixins: [TableMixin],
		name: 'lookPaper',
		components: {},
		data() {
			return {
				circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //头像
				hr: 1,
				min: 60,
				sec: 0,
				radio: '',
				checkList: [],
				radio3: '',
				input: '',
				textarea: '',
				end: null,
				paperData: {}, //试卷数据
				topicList: [], //题目类型
				formalType: false, //正式考试
				param: {
					status: 0,
					recordId: null,
					questionOptionList: []
				},
				userKey: null,
				paperName: null,
				newParams: {

				}
			}
		},
		created() {
			this.topicList = dictUtils.getDictItemsFromCache('sttx')
		},
		methods: {
			loadData() {
				console.log(this.$route.params);
				if (this.$route.params.id !== {} && typeof(this.$route.params.id) === 'string') {
					this.userKey = this.$route.params.id
					this.paperName = this.$route.params.paperName
					sessionStorage.setItem('userkey', this.userKey) //初次收到userKey，存起来
					sessionStorage.setItem('paperName', this.paperName) //初次收到userKey，存起来
				} else {
					if (sessionStorage.getItem('userkey')) {
						this.userKey = sessionStorage.getItem('userkey') //不是第一次了，取出来
						this.paperName = sessionStorage.getItem('paperName') //不是第一次了，取出来
					} else {
						//如果实在是没有了，就直接去store里面取
						this.userKey = store.state.user.userInfo.userKey
						this.paperName = store.state.user.userInfo.paperName
					}
				}


				ypMenu.getUserRecord(this.userKey, res => {
					if (res) {

						res.questionsInfoVos.forEach(e => {
							if (e.parsing) {
								e.parsing = e.parsing.replace(/<[^>]+>/g, '')
							}
							if (e.result) {
								if (e.type == 2) {
									let arr = JSON.parse(JSON.stringify(e.result.split(",")))
									e.result = []
									arr.forEach(re => {
										e.result.push(re)
									})
								}
							} else {
								if (e.type == 2) {
									e.result = []
								} else {
									e.result = ''
								}
							}
							this.topicList.forEach(t => {
								if (e.type == t.value) {
									e.typeName = t.name
								}
							})
						})
						this.paperData = res
						this.param.recordId = res.recordId
					}
				})
			},
			submitPaper() {
				this.$router.go(-1)
			},
			printPaper(){
				this.$router.push({
					name:'printPage',
					params:{id:this.userKey,paperName:this.paperName}
				})
			}
		}
	}
</script>

<style>
	.testPaper p {
		display: inline !important;
	}
</style>
<style lang="scss" scoped>
	.testPaper {
		background-color: #EBEEF5;
		display: flex;
		justify-content: space-evenly;

		.content {
			width: 1200px;
			display: flex;

			.paper-left {
				padding: 10px 20px;
				box-sizing: border-box;
				background-color: #FFFFFF;
				width: 80%;
				margin-right: 10px;

				.paperName {
					margin-top: 20px;
					text-align: center;
					font-size: 24px;
				}

				.operating {
					// width: 100%;
					margin: 10px 0;
					padding-right: 10px;

					.title {
						padding: 20px 0;
						display: flex;
						justify-content: space-between;

						span:nth-child(1) {
							font-weight: bold;
						}

						span:nth-child(2) {
							color: #34A9FD;
						}

						.title-left {
							width: 70%;
						}

						.title-right {
							width: 25%;
							// color: #999 !important;
							display: flex;
							align-items: center;
						}
					}
				}
			}

			.paper-right {
				background-color: #FFFFFF;
				padding: 0 20px;
				width: 20%;

				.block {
					height: 120px;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
				}

				.information {
					.second {
						text-align: center;

						div:nth-child(1) {
							font-size: 26px;
							color: #34A9FD;
						}

						div:nth-child(4) {
							font-weight: 700;
							line-height: 30px;
						}

						div:nth-child(3) {
							margin-top: 20px;
							font-weight: 700;
							line-height: 30px;
						}
					}

					.third {

						div:nth-child(1) {
							text-align: center;
							height: 30px;
						}

						div:nth-child(2) {
							color: #999;
							margin-bottom: 20px;

							span:nth-child(1) {
								color: #2BA5FC;
							}

							span:nth-child(2) {
								color: orange;
							}

							span:nth-child(3) {
								color: #F56C6C;
							}
						}
					}

					.fourth {
						text-align: center;
					}
				}
			}
		}

	}

	.score {
		margin-right: 20px;
		color: #2BA5FC;
	}

	.operating_footer {
		margin-top: 15px;
		color: #999 !important;
		display: flex;
		align-items: center;
	}

	.tagBox {
		width: 40px;
		height: 35px;
		line-height: 35px;
		margin-right: 5px;
		text-align: center;
		margin-bottom: 5px;
	}

	.isTag {
		background-color: #36AAFD;
		color: #FFFFFF;
	}

	.onIsTag {
		background-color: #F56C6C;
		color: #FFFFFF;
	}

	.bIsTag {
		background-color: orange;
		color: #FFFFFF;
	}

	.wIsTag {
		background-color: #FFf;
		color: #000;
	}

	.bigBox {
		height: calc(100% - 100px);
		overflow-y: auto;
	}

	// active
	.active {
    ::v-deep .el-radio__input.is-checked + .el-radio__label {
			color: #2BA5FC !important;
		}

    ::v-deep .el-radio {

			//从这里开始 就是更改颜色的代码，将你的颜色           改掉我的颜色就可以了
			.el-radio__label {
				color: #000 !important;
			}

			.el-radio__input {
				margin-bottom: px(5);

				&.is-checked {
					.el-radio__inner {
						background-color: #2BA5FC;
						border-color: #2BA5FC;
					}
				}

				.el-radio__inner {
					&:hover {
						border-color: #2BA5FC;
					}
				}
			}
		}

    ::v-deep .el-checkbox {
			.el-checkbox__input {
				margin-bottom: px(5);

				&.is-checked {
					.el-checkbox__inner {

						background-color: #2BA5FC;
						border-color: #2BA5FC;
					}
				}

				.el-checkbox__inner {
					&:hover {
						border-color: #2BA5FC;
					}
				}
			}
		}
	}



	// // onActive
	.onActive {
    ::v-deep .el-radio__input.is-checked + .el-radio__label {
			color: #F56C6C !important;
		}

    ::v-deep .el-radio {

			//从这里开始 就是更改颜色的代码，将你的颜色           改掉我的颜色就可以了
			.el-radio__label {
				color: #000 !important;
			}

			.el-radio__input {
				margin-bottom: px(5);

				&.is-checked {
					.el-radio__inner {
						background-color: #F56C6C;
						border-color: #F56C6C;
					}
				}

				.el-radio__inner {
					&:hover {
						border-color: #F56C6C;
					}
				}
			}
		}

    ::v-deep .el-checkbox {
			.el-checkbox__input {
				margin-bottom: px(5);

				&.is-checked {
					.el-checkbox__inner {

						background-color: #F56C6C;
						border-color: #F56C6C;
					}
				}

				.el-checkbox__inner {
					&:hover {
						border-color: #F56C6C;
					}
				}
			}
		}
	}

	::-webkit-scrollbar {
		width: 3px !important;
	}
</style>
