<template>
	<div class="child-wrap" ref="childRef">
		<div class="child-item" v-for="(item,index) in children" :key="index"  @click.stop="onQuestionToggle(index, item.id, $event)">
			<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: 50px;margin-right: 10px;height: 30px;" @click.stop>
					</InputNumber>
					<span style="margin-right: 20px;">{{$t('evaluation.paperList.score')}}</span>
				</template>
			</div>


			<transition name="slide">
				<div v-if="collapseList.includes(children.indexOf(item))" class="toggle-area">
					<!-- 答案展示部分 -->
					<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 class="item-explain">
						<span class="explain-title" :style="{ color:isShowAnalysis ? '#099209' : '#10abe7' }">【{{$t('evaluation.field')}}】</span>
						<div class="item-explain-details">
							<span>{{ exersicesField[item.field - 1] }}</span>
						</div>
					</div>
					<div class="item-explain" v-if="isShowAnalysis">
						<span class="explain-title">【{{ $t('totalAnalysis.showAnalysis') }}】</span>
						<div class="item-explain-details">
							<AnalysisItemTable :analysisJson="analysisJson[index]"></AnalysisItemTable>
							</br>
							<OptionsTable v-if="item.type === 'single' || item.type === 'multiple' || item.type === 'judge'" 
							:options="item.option.map(i => i.code)" :optionRate="optionRate[index]" :answer="item.answer"></OptionsTable>
							</br>
							<Row>
							 <Col span="12" v-if="item.type === 'single' || item.type === 'multiple' || item.type === 'judge'">
								<BaseRateLine :ids="'cR1' + item.id" :echartsData="getOptionLineData(item,index)"></BaseRateLine>
							 </Col>
							 <Col span="12">
								<BaseLine :ids="'cr' + item.id" :echartsData="analysisJson[index]"></BaseLine>
							 </Col>
							</Row>
						</div>
					</div>
				</div>
			</transition>

		</div>
	</div>
</template>
<script>
	import '@/utils/Math.uuid'
	import AnalysisItemTable from '@/components/evaluation/AnalysisItemTable'
	import OptionsTable from '@/components/evaluation/OptionsTable'
	import BaseLine from '@/components/student-analysis/total/BaseLine.vue'
	import BaseRateLine from '@/components/student-analysis/total/BaseRateLine.vue'
	export default {
		name: 'BaseChild',
		components: { AnalysisItemTable,OptionsTable,BaseRateLine,BaseLine },
		props: {
			children: {
				type: Array,
				default: []
			},
			totalScore: {
				type: Number,
				default: 0
			},
			analysisJson:{
				type:Array,
				default:() => {
					return []
				}
			},
			optionRate:{
				type:Array,
				default:() => {
					return []
				}
			},
			isShowScore: {
				type: Boolean,
				default: false
			},
			isShowAnalysis: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				collapseList:[],
				surPlusScore: 0,
				exersicesField: this.$GLOBAL.EXERCISE_LEVELS(),
			}
		},
		created() {
			if (this.children && this.children.length) {
				this.children.forEach(i => {
					if (!i.score) {
						i.score = 0
					}
					this.surPlusScore = this.totalScore - i.score
				})
			}

		},
		methods: {
			getOptionLineData(item,index){
				let result = []
				console.log(this.optionRate)
				let n = this.optionRate[index]
				let total = this.$store.state.totalAnalysis.analysisJson.all.total // 取总人数
				let phCount = Math.floor(total * 0.27) //取高分组人数
				let plCount = Math.ceil(total * 0.27) //取低分组人数
				item.option.map(i => i.code).forEach(key => {
					result.push({
						option:key,
						rate:n.record[key] ? ((n.record[key] / total) * 100).toFixed(1) : 0,
						PH: n.ph[key] ? ((n.ph[key] / phCount) * 100).toFixed(1) : 0,
						PL: n.pl[key] ? ((n.pl[key] / plCount) * 100).toFixed(1) : 0,
					})
				})
				console.log(result)
				return result
			},
			
			onQuestionToggle(index, id, e) {
				let curClassName = e.target.className;
				if (
					curClassName === "item-tools" ||
					curClassName === "richText-video" ||
					curClassName === "richText-audio"
				)
					return;
				e.stopPropagation();
				let listIndex = this.collapseList.indexOf(index);
				if (listIndex > -1) {
					this.collapseList.splice(listIndex, 1);
				} else {
					this.collapseList.push(index);
					let exerciseItemDom = e.path.filter(
						(i) => i.className === "exercise-item"
					);
					// if (exerciseItemDom.length) {
					// 	this.pageScrollTo(exerciseItemDom[0].offsetTop + 240);
					// }
				}
			
				this.$emit("toggleChange", this.collapseList);
			},

		},

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

				}
			},
		}

	}
</script>

<style lang="less" scoped>
	@import "../../../components/evaluation/ExerciseList.less";
</style>
<style lang="less" scoped>
	.child-wrap {
		.child-item {
			position: relative;
			margin: 40px 10px 0 10px;
			
			.item-btn-toggle {
			  position: absolute;
			  right: 20px;
			  top: 0 !important;
			 }

			&-question {
				font-size: 14px;
				max-width: 85%;
				// color:#01b087;

				&-order {
					// color: #10abe7;
					display: inline-block;
					width: 20px;
				}

				&-content {
					display: inline-block;
					margin-left: 5px;
					width: calc(90% - 20px);
					vertical-align: text-top;
				}
			}

			&-option {
				margin: 10px 5px;
				margin-left: 20px;

				&-order {
					display: inline-block;
					width: 25px;
				}

				&-text {
					display: inline-block;
					margin-left: 5px;
					width: calc(90% - 25px);
					vertical-align: text-top;
				}
			}
		}
	}
</style>
