<template>
	<div class="testPaper">
		<div class="content">
			<div class="paper-left">
				<div class="paperName">
{{this.paperData.name}} 	
					</div>
				<el-divider></el-divider>
				<div  class="bigBox">
					<div class="operating" v-for="(item,index) in this.paperData.examQuestionsInfos">
						<div class="title">
							<span>{{index+1}}、</span>
							<span>[{{item.typeName}}] </span>
							<span v-html="item.question"></span>
							<span>({{item.score}}分)</span>
						</div >
						<div class="operating_content">
							<el-radio-group v-model="item.answer" v-if="item.type==1">
								<el-radio :label="x.optionKey" v-for="x in item.options" :key="x.optionKey"
									:checked="item.answer==x.optionKey">{{x.optionKey}}、<span
										v-html="x.optionContent"></span></el-radio>
							</el-radio-group>
							<el-checkbox-group v-model="item.answer" v-if="item.type==2">
								<el-checkbox :label="x.optionKey" v-for="x in item.options" :key="x.optionKey">
									{{x.optionKey}}、<span v-html="x.optionContent"></span></el-checkbox>
							</el-checkbox-group>
							<el-radio-group v-model="item.answer" v-if="item.type==3">
								<el-radio :label="1">对</el-radio>
								<el-radio :label="0">错</i></el-radio>
							</el-radio-group>
							<el-input v-model="item.answer" v-if="item.type==4" placeholder="请输入答案"></el-input>
							<el-input v-model="item.answer" v-if="item.type==5" type="textarea" :rows="3"
								placeholder="请输入答案">
							</el-input>
							<el-input v-model="item.answer" v-if="item.type==6||item.type==7" type="textarea" :rows="3"
								placeholder="请输入答案">
							</el-input>

						</div>
					</div>


				</div>



			</div>
			<div class="paper-right">
				<div class="block">
					<el-avatar :size="50" :src="circleUrl"></el-avatar>
											<div class="back-btn" @click="submitPaper">返回</div> 
				</div>
				<div class="information">
					<span>姓名：{{ $store.state.login.currentUser.username}}</span>
					<el-divider></el-divider>
					<div class="second">
						<div>{{ `${min}: ${sec}` }}</div>
						<div>
							<i class="el-icon-alarm-clock" style="color: #2BA5FC;"></i>总剩余时间
						</div>
						<div>总题数:{{this.paperData.totalNumber}}</div>
						<div>总分数:{{this.paperData.totalScore}}</div>
					</div>
					<el-divider></el-divider>
					<div class="third">
						<div>题卡</div>
						<div style="maxHeight:40vh;overflowY:auto">

							<el-tag class="tagBox" :class="{'isTag':(t.answer.length!==0&&t.answer!=='')}" type="info"
								v-for="(t,ti) in this.paperData.examQuestionsInfos">{{ti+1}}
							</el-tag>
						</div>
					</div>
					<el-divider></el-divider>
					<div class="fourth">
						<el-button type="primary" @click="submitPaper">提交试卷</el-button>
					</div>
				
				</div>
			</div>
		</div>
	</div>
</template>

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

export default {
		mixins: [TableMixin],
		name: 'testPaper',
		components: {},
		data() {
			return {
				circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //头像
				hr: 1,
				min: 30,
				sec: 0,
				radio: '',
				checkList: [],
				radio3: '',
				input: '',
				textarea: '',
				end: Date.parse(new Date()) + ((1 * 30 * 60)) * 1000,
				paperData: {}, //试卷数据
				value: [],
				topicList: [], //题目类型
				formalType: false, //正式考试
			}
		},
		created() {
			this.topicList = dictUtils.getDictItemsFromCache('sttx')
		},
		mounted() {
			this.countdown()
		},
		// watch: {
		// 	paperData: {
		// 		deep: true, //深度监听设置为 true
		// 		handler: function(newVal, oldVal) {
		// 			console.log("数据发生变化啦"); //修改数据时，能看到输出结果
		// 			console.log(newVal, oldVal);
		// 		}
		// 	}
		// },
		methods: {
			loadData() {
				// console.log(this.$route.query);

				let id = this.$route.query.id
				paperMenu.previewPaper(id, res => {
					if (res) {
						res.examQuestionsInfos.forEach(e => {
							if (e.type == 2) {
								e.answer = []
							} else {
								e.answer = ''
							}
							this.topicList.forEach(t => {
								if (e.type == t.value) {
									e.typeName = t.name
								}
							})
						})
						this.paperData = res
					}
				})

			},
			checkout(val) {
				console.log(this.checkList);
				console.log(this.value);
			},
			countdown() {
				const now = Date.parse(new Date())
				const msec = this.end - now
				if (msec < 0) return;
				let day = parseInt(msec / 1000 / 60 / 60 / 24)
				let hr = parseInt(msec / 1000 / 60 / 60 % 24)
				let min = parseInt(msec / 1000 / 60 % 60)
				let sec = parseInt(msec / 1000 % 60)
				this.day = day
				this.hr = hr > 9 ? hr : '0' + hr
				this.min = min > 9 ? min : '0' + min
				this.sec = sec > 9 ? sec : '0' + sec
				const that = this
				if (min >= 0 && sec >= 0) {
					//倒计时结束关闭订单
					if (min == 0 && sec == 0) {

						return
					}
					setTimeout(function() {
						that.countdown()
					}, 1000)
				}
			},
			chengeGroup(val) {
				val
			},
			//提交试卷
			submitPaper() {

				this.$router.go(-1)
			}
		},


	}
</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;

					.title {
						padding: 20px 0;

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

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

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

				.block {
					height: 120px;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					position: relative;
					.back-btn{
						position: absolute;
						right: 0;
						top:5px;
						color: #34A9FD;
						cursor: pointer;
					}
				}

				.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) {
							height: 30px;
							text-align: center;
						}
					}

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

	}

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

	.isTag {
		background-color: #36AAFD;
		color: #FFFFFF;
	}
	.bigBox {
		height: calc(100% - 130px);
		overflow-y: auto;
	}
</style>
