<template>
	<div  >
		<div
			style="padding: 10px;text-align: center;font-size: 20px;font-weight: bold;border-bottom: 2px solid #60A900;position: relative;">
			{{title}}
			<div style="position: absolute;right: 0;bottom: 10px;font-weight: normal;font-size: 14px;">
				{{allNum}}
			</div>
		</div>
		<div class="flex-ac-jc flex-wrap">
			<span class="m-r-10" v-if="config.UserCord != null">
				身份证号：{{config.UserCord}}
			</span>
			<span class="m-r-10" v-if="config.UserName != null">
				姓名：{{config.UserName}}
			</span>
			<span class="m-r-10">
				答题时间：{{config.StartTime+" 至 "+ config.EndTime}}
			</span>
			<span class="m-r-10">
				通过分数：{{config.passMark}}
			</span>
			<span>
				考生得分：{{config.TotalMark}}
			</span>
		</div>
		<div style="padding: 10px 20px;position: relative;">
			<div v-for="(v,i) in content" :key="i">
				<div v-for="(item,key) in v" :key="key">
					<div v-if="key == '27'">
						<span v-if="i==0">
							一、
						</span>
						<span v-else-if="i==1">
							二、
						</span>
						<span v-else>
							三、
						</span>
						单选题 （{{'共'+item.count+'题,共'+item.score+'分'}}）
					</div>
					<div v-else-if="key == '28'">
						<span v-if="i==0">
							一、
						</span>
						<span v-else-if="i==1">
							二、
						</span>
						<span v-else>
							三、
						</span>
						多选题 （{{'共'+item.count+'题,共'+item.score+'分'}}）
					</div>
					<div v-else>
						<span v-if="i==0">
							一、
						</span>
						<span v-else-if="i==1">
							二、
						</span>
						<span v-else>
							三、
						</span>
						判断题 （{{'共'+item.count+'题,共'+item.score+'分'}}）
					</div>
					<div v-for="(value,index) in item.list" :key="value.RubricID">
						<div v-if="key == '27'" style="width:calc(100% - 360px);">
							<danxuan :id="`#question-${value.tihao}`" :content="value"  :show="true" :disabled="true" >
							</danxuan>
						</div>
						<div v-else-if="key == '28'" style="width:calc(100% - 360px);">
							<duoxuan :id="`#question-${value.tihao}`" :content="value"   :show="true" :disabled="true" >
							</duoxuan>
						</div>
						<div v-else style="width:calc(100% - 360px);">
							<panduan :id="`#question-${value.tihao}`" :content="value"   :show="true" :disabled="true" >
							</panduan>
						</div>
					</div>
				</div>
			</div>
			<div class="flex-ac-jc pd-20">
				<el-button type="danger" @click="back">关 闭</el-button> 
			</div>
			<div style="position: fixed;top;width: 384px;top:60px;right:20px;z-index: 99;background-color: #fff;border: 2px solid #ccc;padding:5px 10px;border-radius: 10px;"> 
				<div v-for="(v,i) in content" :key="i">
					<div v-for="(item,key) in v" :key="key" >
						<div v-if="key == '27'" class="m-b-10">
							<span v-if="i==0">
								一、
							</span>
							<span v-else-if="i==1">
								二、
							</span>
							<span v-else>
								三、
							</span>
							单选题 （{{'共'+item.count+'题,共'+item.score+'分'}}）
						</div>
						<div v-else-if="key == '28'" class="m-b-10">
							<span v-if="i==0">
								一、
							</span>
							<span v-else-if="i==1">
								二、
							</span>
							<span v-else>
								三、
							</span>
							多选题 （{{'共'+item.count+'题,共'+item.score+'分'}}）
						</div>
						<div v-else class="m-b-10" >
							<span v-if="i==0">
								一、
							</span>
							<span v-else-if="i==1">
								二、
							</span>
							<span v-else>
								三、
							</span>
							判断题 （{{'共'+item.count+'题,共'+item.score+'分'}}）
						</div>
						<div style="width: 100%;display: flex;flex-wrap: wrap;box-sizing: border-box;border-collapse: collapse;" class="m-b-10"> 
							<div v-for="(value,index) in item.list" :key="value.RubricID" style="width: 60px;border:1px solid #ccc;margin-bottom:-1px;margin-right: -1px;color:#fff" class="pd-10 flex-ac-jc tihao" :style="{backgroundColor:value.userScore == value.TestMark?'#67C23A':value.userScore == 0?'#F56C6C':'#E6A23C'}" @click="scrollToQuestion(index,value)"  >
								{{value.tihao}}
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import danxuan from "./danxuan.vue"
	import duoxuan from "./duoxuan.vue"
	import panduan from "./panduan.vue"
	import {
		submitDaan
	} from "@/api/jianliyuan/index"
	export default {
		name: "FinishSj",
		props: {
			content: { // 传入的地址
				type: Object,
				default: null,
			}, 
			title:{
				type:String,
				default:null
			},
			config:{
				type:Object,
				default:null
			}
		},
		components: {
			danxuan,
			duoxuan,
			panduan
		},
		data() {
			return {
				show: false,
				answerList: [],
				allNum: null,
				min:null,
				second:59,
				miao:59,
				ti:null,
				startTime:null,
			};
		},
		computed: {
			
		},
		mounted() {  
			this.getAllNum() 
		},
		methods: { 
			getAllNum() {
				let num = 0
				let score = 0
				for (let i in this.content) {
					this.answerList.push([])
					for (let q in this.content[i]) {
						this.answerList[i] = this.content[i][q].list
						num += this.content[i][q].count
						score += this.content[i][q].score
					}
				}
				this.allNum = "总共" + num + "题 共" + score + "分" 
			}, 
			scrollToQuestion(index,value) {  
			  const questionId = `#question-${value.tihao}`;  
			  const questionElement = document.getElementById(questionId);  
		  
			  if (questionElement) {    
				questionElement.scrollIntoView({ behavior: 'smooth' });  
			  }  
			}, 
			back(){
				this.$emit("back",false)
			}
		},
	};
</script>

<style scoped lang="scss"> 
	.tihao:hover{
		cursor: pointer;
	}
</style>