<template>
	<div :style="{backgroundColor:daAn.length == 0 || disabled == true?'':'#F2F6FC'}" style="padding: 10px 20px 1px;">
		<div style="font-size: 16px;">
			<span>{{content.tihao+". "}}{{getContent.TestContent}}</span><span style="color: #F56C6C;">（{{getContent.TestMark
}}分）</span>
		</div>
		<div style="padding-left: 20px;margin-top:20px">
			<div style="display: flex;align-items: center;margin-bottom: 18px;" v-for="(v,i) in getContent.OptionContent
" :key="v"> 
				<el-checkbox v-model="checks[i]" :key="i" :disabled="disabled"  @change="chooseDa(i,$event)"> 
					<span style="font-weight: bold;font-size: 16px;">
						{{abc[i]+". "}}
					</span>
					<span style="font-size: 16px;text-wrap: wrap;line-height: 20px;">
						{{v}}
					</span>
				</el-checkbox> 
			</div>
		</div>
		<div style="color: #0000FF;margin-top: 20px;" v-if="show">
			标准答案：{{getContent.StandardAnswer}}
		</div>
		<div v-if="disabled">
			<div style="color: #0000FF;margin-top: 5px;">
				考生答案：{{getContent.userAnswer}}
			</div>
			<div :style="{color: getContent.userAnswer == getContent.StandardAnswer ?'#0000FF':'#F56C6C'}" style=" margin-top: 5px;">
				本题得分：{{getContent.userScore}}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"Duoxuan",
		props: {
			content: { // 传入的地址
				type: Object,
				default:null,
			},
			index:{
				type:Number,
				default:null,
			},
			show:{
				type:Boolean,
				default:true
			},
			fIndex:{
				type:Number,
				default:null
			},
			disabled:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				abc:["A","B","C","D","E","F"],
				StandardAnswer:"",
				checks:[],
				daAn:[],
				tmInfo:{}
			};
		},
		computed: {
			getContent(){
				this.tmInfo = null 
				this.daAn = []
				this.checks = []
				this.tmInfo = {...this.content}
				this.tmInfo.OptionContent = this.tmInfo.OptionContent.split("|") 
				for(let i in this.tmInfo.OptionContent){
					this.checks.push(false) 
				} 
				if(this.tmInfo.userAnswer != null && this.tmInfo.userAnswer !== ""){
					this.daAn = this.tmInfo.userAnswer.split("")
					for(let i in this.daAn){
						let index = this.abc.findIndex(obj=> obj == this.daAn[i])
						this.checks[index] = true
					}
					console.log(this.checks)
				} 
				return this.tmInfo
			}
		},
		mounted() {
			
		},
		methods: {
			chooseDa(i,e){
				this.checks[i] = e
				if(e == true){
					this.daAn.push(this.abc[i])
				}else{
					let index = this.daAn.findIndex(obj=> obj == this.abc[i])
					this.daAn.splice(index,1)
				}
				let obj = {
					fIndex:this.fIndex,
					index:this.index,
					xx:this.daAn.join(""),
					tihao:this.content.tihao
				}
				this.$emit("chooseXx",obj)
			}
		},
	};
</script>

<style scoped lang="scss">
	::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label{
		color:#606266 !important;
	}
	::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
		background-color:  #1890ff !important;
	}
</style>