<template>
	<div :style="{backgroundColor:(StandardAnswer === '' || StandardAnswer === null) || disabled == true?'':'#F2F6FC'}" style="padding: 20px;">
		<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-radio v-model="StandardAnswer" :disabled="disabled" :label="abc[i]" @change="chooseXx">
					<span style="font-weight: bold;font-size: 16px;">
						{{abc[i]+". "}}
					</span>
					<span style="font-size: 16px;">
						{{v}}
					</span>
				</el-radio>
				
			</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>
import { number } from 'echarts';
	export default {
		name:"Danxuan",
		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:"",
				tmInfo:{}
			};
		},
		computed: {
			getContent(){
				this.tmInfo = null
				this.tmInfo = {...this.content}
				this.tmInfo.OptionContent = this.tmInfo.OptionContent.split("|")
				this.StandardAnswer = this.tmInfo.userAnswer
				return this.tmInfo
			}
		},
		mounted() {
			
		},
		methods: {
			chooseXx(e){ 
				let obj = {
					fIndex:this.fIndex,
					index:this.index,
					xx:e,
					tihao:this.content.tihao
				}
				this.$emit("chooseXx",obj)
			}
		},
	};
</script>

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