<template>
	<div class="child-wrap" ref="childRef">
		<div class="child-item" v-for="(item,index) in children" :key="index">
			<div class="child-item-question">
				<span class="child-item-question-order">【小题{{ index + 1 }}】</span>
				<p class="child-item-question-content" v-html="item.question"></p>
			</div>
			<!-- 选项部分 -->
			<div v-for="(option,optionIndex) in item.option" :key="optionIndex" class="child-item-option" style="pointer-events:none">
				<div>
					<div class="child-item-option-order">{{String.fromCharCode(64 + parseInt(optionIndex+1))}} : </div>
					<div class="child-item-option-text" v-html="option.value"></div>
				</div>
			</div>
			<div class="item-btn-toggle" v-if="isShowScore">
				<template>
					<InputNumber :max="totalScore" :min="0" v-model="item.score" style="display: inline-block ;width: 60px;margin-right: 10px;height: 30px;"
					 @click.stop></InputNumber>
					<span style="margin-right: 20px;">{{$t('evaluation.paperList.score')}}</span>
				</template>
			</div>
			<!-- 答案展示部分 -->
			<div class="item-explain">
				<span class="explain-title">【{{$t('evaluation.answer')}}】</span>
				<div class="item-explain-details">
					<!-- 问答题答案 -->
					<div v-if="item.type === 'subjective' || item.type === 'complete'">
						<span v-for="(answer,index) in item.answer" :key="index" v-html="item.answer && item.answer.length ? answer : $t('evaluation.noAnswer')"></span>
					</div>
					<!-- 问答题答案 -->
					<div v-else-if="item.type === 'judge'">
						<span>{{ item.answer && item.answer.length ? (item.answer[0] === 'A' ? $t('evaluation.isTrue') : $t('evaluation.isFalse')) : $t('evaluation.answer') }}</span>
					</div>
					<!-- 其余题型答案 -->
					<div v-else>
						<span :class="[ item.type === 'complete' ? 'item-answer-item':'']" v-for="(answer,index) in item.answer" :key="index" v-html="answer"></span>
					</div>
				</div>
			</div>
			<!-- 解析部分 -->
			<div class="item-explain">
				<span class="explain-title">【{{$t('evaluation.explain')}}】</span>
				<div class="item-explain-details">
					<span v-html="item.explain || $t('evaluation.noExplain')"></span>
				</div>
			</div>
			<!-- 知识点部分 -->
			<div class="item-explain">
				<span class="explain-title">【{{$t('evaluation.knowledgePoints')}}】</span>
				<div class="item-explain-details">
					<span v-if="!item.knowledge || !item.knowledge.length">{{$t('evaluation.noPoints')}}</span>
					<div v-else>
						<span v-for="(point,index) in item.knowledge" :key="index" class="item-point-tag">
							<span>{{ point }}</span>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import '@/utils/Math.uuid'
	export default {
		name:'BaseChild',
		components: {},
		props: {
			children: {
				type: Array,
				default: []
			},
			totalScore:{
				type:Number,
				default:0
			},
			isShowScore:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				surPlusScore:0
			}
		},
		created() {
			if(this.children && this.children.length){
				this.children.forEach(i => {
					if(!i.score){
						i.score = 0
					}
					this.surPlusScore = this.totalScore - i.score
				})
			}
			
		},
		methods: {
			/* 给小题配分 */
			doDistribution(){
				
			}
			
		},

		mounted() {
			this.$nextTick(()=>{
				this.$MathJax.MathQueue(this.$refs.childRef);
			})
		},

		watch: {
			children:{
				handler(n){
					this.$nextTick(()=>{
						this.$MathJax.MathQueue(this.$refs.childRef);
					})
				}
			},
			totalScore:{
				handler(n){
					
				}
			}
		}

	}
</script>
<style lang="less" scoped>
	@import "../index/CommonExercise.less";
</style>
<style lang="less" scoped>
	.child-wrap{
		.child-item{
			position: relative;
			margin:40px 10px 0 10px;
			
			&-question{
				font-size: 14px;
				// color:#01b087;
				
				&-order{
					 color:#10abe7;
					 display: inline-block;
					 width: 75px;
				}
				&-content{
					display: inline-block;
					margin-left: 5px;
					width: calc(90% - 75px);
					vertical-align: text-top;
				}
			}
			
			&-option{
				font-size: 14px;
				margin: 10px 5px;
				margin-left: 80px;
				
				&-order{
					display: inline-block;
					width: 25px;
				}
				
				&-text{
					display: inline-block;
					margin-left: 5px;
					width: calc(90% - 25px);
					vertical-align: text-top;
				}
			}
		}
	}
</style>
