<template>
	<div class="components-el-container">
		<!-- 题目列表部分 -->
		<div v-if="exerciseList.length === 0" class="no-data-text">
			<img src="@/assets/icon/no_data.svg" width="120" />
			<span style="margin-top:15px;color:#808080">{{$t('evaluation.noData')}}</span>
		</div>
		<div class="content-wrap" ref="mathJaxContainer" v-else>
			<Loading :top="200" v-show="dataLoading" type="1"></Loading>
			<div class="list-view" :key="typeIndex" v-for="(typeItem,typeIndex) in listData">
				<p v-show="viewModel === 'type' && typeItem.list.length" class="type-name">{{ numberConvertToUppercase(getLatestTypeIndex(typeItem.type) + 1) }}
					: {{ exersicesType[typeItem.type] }}
					（{{ typeItem.score || 0 }} {{$t('evaluation.paperList.score')}}） </p>

				<div v-for="(item,index) of typeItem.list" :key="index" :class='["exercise-item",isError(item.id) ? "exercise-item-error":""]'
				 @mouseenter="exerciseMouseover($event)" @mouseleave="exerciseMouseleave($event)" :data-id="item.id">

					<!-- 工具栏部分 -->
					<div class="item-tools-wrap">
						<!-- <div class="item-tools-t flex-row-center" v-show="isShowTools" @click.stop="handleSetScore(item,exerciseList.indexOf(item),typeItem.list,index)">
							<Icon type="ios-list-box-outline" />配分</div> -->
						<div class="item-tools-t flex-row-center" v-if="!item.blob && errorList.indexOf(item) < 0" @click.stop="handleToolEdit(typeItem.list,item,index)">
							<Icon type="ios-brush-outline" />{{$t('evaluation.editItem')}}</div>
						<div class="item-tools-t flex-row-center" v-show="isShowTools && !isExamPaper &&noAnswerList.indexOf(item) > -1"
						 @click.stop="onSetAnswer(item,exerciseList.indexOf(item),typeItem.list,index)">
							<Icon type="ios-brush-outline" />{{$t('evaluation.exerciseList.setAnswer')}}</div>
						<div class="item-tools-t flex-row-center" v-show="isShowTools && !isExamPaper" @click.stop="handleDelete(typeItem.list,item,index)">
							<Icon type="ios-archive-outline" />{{$t('evaluation.deleteItem')}}</div>
						<div class="item-tools-t flex-row-center" v-show="index != 0 && isShowTools && !isExamPaper" @click.stop="handleMoveUp(typeItem.list,index)">
							<Icon type="md-arrow-up" />{{$t('evaluation.exerciseList.moveUp')}}</div>
						<div class="item-tools-t flex-row-center" v-show="index != (typeItem.list.length - 1)  && isShowTools && !isExamPaper"
						 @click.stop="handleMoveDown(typeItem.list,index)">
							<Icon type="md-arrow-down" />{{$t('evaluation.exerciseList.moveDown')}}</div>
					</div>

					<div class="item-error-wrap" v-if="errorList.indexOf(item) > -1">
						<span v-if="isNoAnswer(item)">{{$t('evaluation.exerciseList.noAnswerTip')}}</span>
						<span v-else>{{$t('evaluation.exerciseList.noOptionTip')}}</span>
					</div>

					<div @click="onQuestionToggle(exerciseList.indexOf(item),item.id,$event,typeItem.list)" style="max-width: 85%;">
						<!-- 题干部分 -->
						<div class="item-question">
							<div v-if="viewModel === 'list'">
								<div class="item-question-order">{{ index + 1 }} : </div>
								<div class="item-question-text" v-html="item.question"></div>
							</div>
							<div v-else>
								<div class="item-question-order">{{ pageSize * (pageNum - 1) + index + 1 }} : </div>
								<div class="item-question-text" v-html="item.question"></div>
							</div>
						</div>
						<!-- 选项部分 -->
						<div v-for="(option,optionIndex) in item.option" :key="optionIndex" class="item-options">
							<div class="item-option-content">
								<div class="item-option-order">{{String.fromCharCode(64 + parseInt(optionIndex+1))}} :</div>
								<div class="item-option-text" v-html="option.value"></div>
							</div>
						</div>
					</div>
					<div class="exercise-item-children" v-if="item.children.length">
						<BaseChild :children="item.children" :totalScore="item.score" :isShowScore="!isExamPaper"></BaseChild>
					</div>
					<div class="item-btn-toggle" @click.stop v-show="isShowTools && !isPreview">
						<template v-if="!isExamPaper">
							<InputNumber :max="item.score + surPlusScore" :min="0" :step="0.5" v-model="item.score" style="display: inline-block ;width: 50px;margin-right: 10px;height: 30px;"
							 @click.stop></InputNumber>
							<span style="margin-right: 10px;">{{$t('evaluation.paperList.score')}}</span>
							<!-- <span class="item-score" title="设置题目分数" @click.stop="onSetSingleItem(item,index)" v-else>{{ item.score }} 分</span> -->
						</template>
						<template v-else>
							<span style="margin-right: 10px;font-size: 16px;"> <span style="font-weight: bold;color: #0086E6;">{{ item.score }}</span>  {{$t('evaluation.paperList.score')}}</span>
						</template>
						<Icon :type="collapseList.indexOf(index) > -1 ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'" v-if="item.type !== 'compose'"/>
					</div>
					
					<!-- 答案以及解析 -->
					<transition name="slide" v-if="item.type !== 'compose'">
						<!-- <div v-show="collapseList.indexOf(exerciseList.indexOf(item)) > -1" class="toggle-area"> -->
						<div v-show="collapseList.indexOf(exerciseList.indexOf(item)) > -1" class="toggle-area">
							<div>
								<!-- 答案展示部分 -->
								<div class="item-explain" v-show="isShowAnswer">
									<span class="explain-title">【{{$t('evaluation.filter.type')}}】</span>
									<div class="item-explain-details">
										{{ exersicesType[item.type] }}
									</div>
								</div>
								<div class="item-explain" v-show="isShowAnswer">
									<span class="explain-title">【{{$t('evaluation.answer')}}】</span>
									<div class="item-explain-details">
										<!-- 问答题答案 -->
										<div v-if="item.type === 'subjective' || item.type === 'complete' || item.type === 'connector' || item.type === 'correct'">
											<span v-for="(answer,index) in item.answer" :key="index" v-html="item.answer.length ? answer : $t('evaluation.noAnswer')"></span>
										</div>
										<!-- 问答题答案 -->
										<div v-else-if="item.type === 'judge'">
											<span>{{ 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">{{answer}}</span>
										</div>
									</div>
								</div>
								<!-- 解析部分 -->
								<div class="item-explain" v-show="isShowAnswer">
									<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" v-show="isShowAnswer">
									<span class="explain-title">【{{$t('evaluation.knowledgePoints')}}】</span>
									<div class="item-explain-details">
										<span v-if="!item.knowledge || !(_.compact(item.knowledge).length)">{{$t('evaluation.noPoints')}}</span>
										<div v-else> 
											<span v-for="(point,index) in item.knowledge" :key="index" class="item-point-tag">
												{{ point }}
											</span>
										</div>
									</div>
								</div>
								<!-- 认知层次部分 -->
								<div class="item-explain" v-show="isShowAnswer">
									<span class="explain-title">【{{$t('evaluation.filter.level')}}】</span>
									<div class="item-explain-details">
										{{ item.field ? exersicesField[item.field - 1] : exersicesField[0]}}
									</div>
								</div>
							</div>
							<!-- 如果是综合题 则加载子题渲染组件 -->
							<!-- <div v-else>
								<BaseChild :children="item.children" :totalScore="item.score" :isShowScore="!isExamPaper"></BaseChild>
							</div> -->
						</div>
					</transition>
				</div>
			</div>
		</div>

		<!-- 单个试题配分弹框 -->
		<Modal v-model="answerModal" :title="$t('evaluation.exerciseList.setAnswer')" @on-ok="onConfirmAnswer">
			<div v-if="curErrorItem.type === 'single'">
				<RadioGroup v-model="curErrorSingleAnswer" type="button">
					<Radio v-for="(option,index) in curErrorItem.option" :key="index" :label="option.code"></Radio>
				</RadioGroup>
			</div>
			<div v-else>
				<CheckboxGroup v-model="curErrorMulAnswer">
					<Checkbox v-for="(option,index) in curErrorItem.option" :key="index" :label="option.code" border></Checkbox>
				</CheckboxGroup>
			</div>
		</Modal>

		<!-- 题型配分弹窗 -->
		<Modal v-model="typeScoreModel" :title="$t('evaluation.exerciseList.typeScore')" footer-hide>
			<span class="type-score-item">{{$t('evaluation.exerciseList.totalScore')}} ： <span style="color: #0086E6;font-weight: bold;">{{ paperInfo.score }}</span> </span>
			<span class="type-score-item">{{$t('evaluation.exerciseList.alreadyScore')}} ： <span style="color: #04945f;font-weight: bold;">{{ getTotalScore(groupTypeList) }}</span></span>
			<span class="type-score-item">{{$t('evaluation.exerciseList.waitScore')}} ： <span style="color: #e63c3f;font-weight: bold;">{{ paperInfo.score - getTotalScore(groupTypeList) }}</span></span>
			<div v-for="(modalItem,modalIndex) in groupTypeList" :key="modalIndex" class="type-score-item">
				<div v-if="modalItem.list.length">
					<span>{{ exersicesType[modalItem.type] }} </span>
					<span>{{$t('unit.text12')}} <span style="color: #0086E6;font-weight: bold;margin: 0 10px;">{{ modalItem.list.length }}</span> {{$t('evaluation.exerciseList.itemNums')}} :</span>
					<InputNumber :max="paperInfo.score" :min="0" :step="scoreStep" v-model="modalItem.score"></InputNumber>
					<span> {{$t('unit.text11')}}</span>
				</div>
			</div>
			<div style="margin: 20px 10px;">
				<p style="margin-bottom: 10px;">{{$t('evaluation.exerciseList.multipleRule')}}</p>
				<div class="rule-item">
					<RadioGroup v-model="multipleRule" vertical>
						<Radio :label="1">
							<Icon type="social-android"></Icon>
							<span>{{$t('evaluation.exerciseList.rule1')}}</span>
						</Radio>
						<Radio :label="2">
							<Icon type="social-windows"></Icon>
							<span>{{$t('evaluation.exerciseList.rule2')}}</span>
						</Radio>
						<Radio :label="3">
							<Icon type="social-windows"></Icon>
							<span>{{$t('evaluation.exerciseList.rule3')}}</span>
						</Radio>
						<Radio :label="4">
							<Icon type="social-windows"></Icon>
							<span>{{$t('evaluation.exerciseList.rule4')}}{{$t('unit.text11')}}</span>
						</Radio>
					</RadioGroup>
				</div>
			</div>
			<Button class="type-score-btn" @click="onConfirmTypeScore" type="info" :disabled="getTotalScore(groupTypeList) > paperInfo.score">{{$t('evaluation.confirm')}}</Button>
			<p style="color:red;text-align:center;font-weight:bold;margin-top:10px" v-show="getTotalScore(groupTypeList) > paperInfo.score">{{$t('evaluation.exerciseList.overScoreTip')}}</p>

		</Modal>

		<!-- 编辑试题弹窗 -->
		<Modal v-model="editExerciseModal" class-name="edit-exercise-modal" width="1200px" footer-hide :title="$t('evaluation.exerciseList.editExercise')"  @on-visible-change="editModalChange">
			<BaseEditExercise :exerciseItem="currentExercise" @onEditSuccess="onEditSuccess" refId="paperEdit" ref="paperEdit"></BaseEditExercise>
			<div slot="footer">
				<Button type="success">{{$t('evaluation.confirm')}}</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		props: {
			paper: {
				type: Object,
				default: null
			},
			isShowTools: {
				type: Boolean,
				default: false
			},
			isPreview: {
				type: Boolean,
				default: false
			},
			isExamPaper: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				schoolCode: '',
				dataLoading: false,
				curEditItemId: null,
				curOrderIndex:0,
				exerciseList: [],
				schoolInfo: {},
				isShowUploadList: false,
				multipleRule: 1,
				typeScoreModel: false,
				setPaperInfoModal: false,
				editExerciseModal: false,
				exersicesType: this.$GLOBAL.EXERCISE_TYPES(),
				exersicesDiff: this.$GLOBAL.EXERCISE_DIFFS(),
				exersicesField: this.$GLOBAL.EXERCISE_LEVELS(),
				diffColors: ['#32CF74', '#E8BE15', '#F19300', '#EB5E00', '#D30000'],
				totalNum: 0,
				isShowAnswer: true,
				importLoading: false,
				pageSize: 99,
				pageNum: 1,
				currentPage: 1,
				collapseList: [],
				periodList: [],
				gradeList: [],
				subjectList: [],
				basketList: [],
				originData: [],
				groupList: [],
				groupTypeList: [],
				orderList: [],
				typeList: ['single', 'multiple', 'judge', 'complete', 'subjective', 'connector', 'correct', 'compose'],
				viewModel: 'list',
				filterParams: {},
				surPlusScore: 0,
				curItemScore: 0,
				curIndex: 0,
				lastScore: 0,
				scoreStep: 0.5,
				curTypeItems: [],
				scoreModal: false,
				currentExercise: {},
				allPointList: [],
				modifyItems: [],
				errorList: [],
				paperInfo: {
					score: 0
				},
				curErrorItem: {
					type:''
				},
				curErrorSingleAnswer: 'A',
				curErrorMulAnswer: [],
				noAnswerList:[],
				answerModal: false
			}
		},

		created() {
			//console.log(this.exerciseList)
		},
		methods: {
			/**
			 * 题干展开与收缩
			 * @param index
			 * @param id
			 */
			onQuestionToggle(index, id, e) {
				e.stopPropagation()
				this.curEditItemId = null
				let listIndex = this.collapseList.indexOf(index)
				if (listIndex > -1) {
					this.collapseList.splice(listIndex, 1)
				} else {
					/** 如果是首次展开 则需要获取详细数据 否则直接展开 */
					if (!this.exerciseList[index].answer.length) {
						this.collapseList.push(index)
						this.pageScrollTo(e.target.offsetTop + 420) // 490就是 content-wrap 距离顶部高度
					} else {
						this.collapseList.push(index)
						this.pageScrollTo(e.target.offsetTop + 420) // 490就是 content-wrap 距离顶部高度
					}

				}

				this.$emit('toggleChange', this.collapseList)
			},

			/**
			 * 数字与中文转换
			 * @param num
			 */
			numberConvertToUppercase(num) {
				num = Number(num)
				var upperCaseNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '百', '千', '万', '亿']
				var length = String(num).length
				if (length === 1) {
					return upperCaseNumber[num]
				} else if (length === 2) {
					if (num === 10) {
						return upperCaseNumber[num]
					} else if (num > 10 && num < 20) {
						return '十' + upperCaseNumber[String(num).charAt(1)]
					} else {
						return upperCaseNumber[String(num).charAt(0)] + '十' + upperCaseNumber[String(num).charAt(1)].replace('零', '')
					}
				}
			},
			/**
			 * 页面滚动事件
			 * @param scrollDistance 页面滚动距离
			 */
			pageScrollTo(scrollDistance) {
				//let parentVm = this.$parent.$parent.$parent.$parent
				//parentVm.$refs['evScroll'].scrollTo(
				//    {
				//        y: scrollDistance
				//    },
				//    500, 'easeInQuad'
				//)
			},
			// 题目鼠标滑过事件
			exerciseMouseover(e) {
				e.preventDefault()
				e.target.children[0].style.display = 'block'
			},

			// 题目鼠标移出事件
			exerciseMouseleave(e) {
				e.preventDefault()
				e.target.children[0].style.display = 'none'
			},

			// 子题顺序操作
			moveItems(arr, index1, index2) {
				arr[index1] = arr.splice(index2, 1, arr[index1])[0]
				return arr
			},

			// 子题上移操作
			handleMoveUp(arr, index) {
				this.moveItems(arr, index, index - 1)
			},

			// 子题下移操作
			handleMoveDown(arr, index) {
				this.moveItems(arr, index, index + 1)
			},
			
			editModalChange(val) {
				this.$nextTick(() => {
					this.$refs.paperEdit.backToTop();
				})
			},


			/**
			 * 删除试卷中的单个试题
			 * @param index
			 */
			handleDelete(arr, item, index) {
				this.$Modal.confirm({
					title: this.$t('evaluation.newExercise.modalTip'),
					content: this.$t('evaluation.exerciseList.confirmDelete'),
					onOk: () => {
						this.$Message.success(this.$t('evaluation.deleteSuc'))
						this.surPlusScore += item.score
						this.$emit('scoreUpdate', this.surPlusScore)
						arr.splice(index, 1)
						this.exerciseList.splice(this.exerciseList.indexOf(item), 1)
						this.$emit('dataUpdate', this.exerciseList)
						this.$EventBus.$emit('onPaperItemChange', this.exerciseList)
						if(this.errorList.indexOf(item) > -1){
							this.errorList.splice(this.errorList.indexOf(item),1)
						}
					}
				})
			},

			/**
			 * 编辑单个试题
			 * @param item
			 */
			handleToolEdit(arr, item, index) {
				this.currentExerciseIndex = this.exerciseList.indexOf(item) // 清单列表下的index
				this.curOrderIndex = index
				if(item.scope === 'school'){
					this.getSchoolBaseInfo().then(res => {
						if (!res) return
						item.periodId = res.period[this.paperInfo.paperPeriod].id
						item.subjectId = res.period[this.paperInfo.paperPeriod].subjects[this.paperInfo.paperSubject].id
						this.curTypeItems = arr
						this.currentExercise = item
						this.editExerciseModal = true
					})
				}else{
					this.curTypeItems = arr
					this.currentExercise = item
					this.editExerciseModal = true
				}
				console.log('试卷当前编辑的题目')
				console.log(item)
				console.log(this.paperInfo)
			},
			
			/** 获取当前学校基础数据 */
			getSchoolBaseInfo() {
				return new Promise((r, j) => {
					this.$store.dispatch("user/getSchoolProfile").then((res) => {
						let schoolBaseInfo = res.school_base;
						if (schoolBaseInfo) {
							r(schoolBaseInfo)
						} else {
							r(null)
						}
					});
				})
			},


			/**
			 * 给单个试题配分
			 * @param item
			 * @param index
			 */
			onSetAnswer(item, index, arr, groupIndex) {
				this.currentExerciseIndex = index
				this.curIndex = groupIndex
				this.curTypeItems = arr
				this.curErrorItem = item
				this.answerModal = true
			},

			onConfirmAnswer() {
				if(this.curErrorItem.type === 'single'){
					this.curErrorItem.answer = [this.curErrorSingleAnswer]
					let errorIndex = this.errorList.map(i => i.id).indexOf(this.curErrorItem.id)
					if(errorIndex > -1){
						this.errorList.splice(errorIndex,1)
					}
				}else{
					if(this.curErrorMulAnswer.length){
						this.curErrorItem.answer = this.curErrorMulAnswer
						let errorIndex = this.errorList.map(i => i.id).indexOf(this.curErrorItem.id)
						if(errorIndex > -1){
							this.errorList.splice(errorIndex,1)
						}
					}else{
						this.curErrorItem.answer = []
						this.errorList.push(this.curErrorItem)
					}
				}
				
			},


			/**
			 * 给单个试题配分
			 * @param item
			 * @param index
			 */
			handleSetScore(item, index, arr, groupIndex) {
				this.currentExerciseIndex = index
				this.curIndex = groupIndex
				this.curTypeItems = arr
				this.curItemScore = item.score
				this.lastScore = item.score
				this.scoreModal = true
			},

			/**
			 * 配分变化时的剩余分数处理
			 * @param val
			 */
			// onScoreChange(val) {
			// 	this.surPlusScore = this.surPlusScore + this.lastScore - val
			// 	this.lastScore = val
			// 	this.$emit('scoreUpdate', this.surPlusScore)

			// },

			/** 确认单个试题配分 */
			onConfirmScore() {
				this.$set(this.exerciseList[this.currentExerciseIndex], 'score', this.curItemScore);
				this.$set(this.curTypeItems[this.curIndex], 'score', this.curItemScore);
			},

			/** 按照题型配分 */
			onConfirmTypeScore() {
				/** 重新计算剩余分配分数 */
				this.surPlusScore = this.paperInfo.score - this.groupTypeList.reduce((p, e) => parseInt(p) + parseInt(e.score), 0)
				if (this.surPlusScore < 0) {
					this.$Message.warning(this.$t('totalAnalysis.addTip1'))
				} else {
					/* 按照题型配分后平均分配给每个子题 */
					this.groupTypeList.forEach(item => {
						item.list.forEach((exercise, exerciseIndex) => {
							// 先找到原始列表里面的当前题目
							let listItem = this.exerciseList.filter(item => item.id === exercise.id)[0]
							// 先判断是否总分除以题目数量能否除尽
							let remainder = item.score % item.list.length
							// 如果可以整除 则直接计算
							if (remainder === 0) {
								exercise.score = item.score / item.list.length
							} else {
								// 如果不能整除 则前面所有取整 最后一题加上余数 即可完成配分
								let integerScore = parseInt(item.score / item.list.length)
								let lastItem = exerciseIndex === item.list.length - 1
								exercise.score = lastItem ? integerScore + remainder : integerScore
							}
							listItem.score = exercise.score
							
							if(exercise.type === 'compose' && exercise.children && exercise.children.length){
								exercise.children.forEach((child,childIndex) => {
									let remainder = exercise.score % exercise.children.length
									let integerScore = parseInt(exercise.score / exercise.children.length)
									let lastItem = childIndex === exercise.children.length - 1
									child.score = lastItem ? integerScore + remainder : integerScore
								})
							}
							
						})
					})

					/** 回到题型视图 */
					this.groupList = this.groupTypeList
					this.$parent.viewModel = 'type'
					this.$parent.paperInfo.multipleRule = this.multipleRule || 1
					this.typeScoreModel = false
					this.$emit('scoreUpdate', this.surPlusScore)
				}

			},

			/** 编辑成功 */
			onEditSuccess(item) {
				let preOrderList = JSON.parse(JSON.stringify(this.orderList[0].list))
				
				this.$refs.paperEdit.isLoading = false
				this.editExerciseModal = false
				this.$Message.success(this.$t('evaluation.editSuc'))
				
				this.exerciseList.splice(this.currentExerciseIndex, 1, item)
				this.curTypeItems.splice(this.curIndex, 1, item)
				this.$emit('dataUpdate', this.exerciseList)

				let existIndex = this.modifyItems.map(i => i.id).indexOf(item.id)
				if (existIndex < 0) {
					this.modifyItems.push(item)
				} else {
					this.modifyItems[existIndex] = item
				}
				
				if(this.viewModel === 'list' && this.orderList.length){
					preOrderList.splice(this.curOrderIndex, 1, item)
					console.log(preOrderList[this.curOrderIndex])
					this.paper.item = preOrderList
				}
				
				
				
			},


			/**
			 * 全部展开与全部折叠
			 * @param isAllOpen
			 */
			onHandleToggle(isAllOpen) {
				if (isAllOpen) {
					this.collapseList = []
				} else {
					this.collapseList = [...this.exerciseList.keys()]
				}
			},


			/** 打开题型配分 */
			onSetScoreByType() {
				this.typeScoreModel = true;
			},


			/**
			 * 获取题目列表总分
			 * @param arr
			 */
			getTotalScore(arr) {
				arr.forEach(i => {
					if (i.list.length === 0) {
						i.score = 0
					}
				})
				return arr.reduce((p, e) => p + (e.score || 0), 0)
			},

			/**
			 * 拿到当前页面所有知识点集合
			 * @param arr
			 */
			getPointIds(arr) {
				let ids = []
				arr.forEach(i => {
					ids = ids.concat(i.points)
				})
				return this._.compact([...new Set(ids)])
			},
			getLatestTypeIndex(type) {
				let arr = []
				this.groupList.forEach(i => {
					if (i.list.length) {
						arr.push(i.type)
					}
				})
				return arr.indexOf(type)
			},
			
		},
		mounted() {
			this.$EventBus.$off('importFinish')
			this.$EventBus.$on('importFinish', list => {
				this.errorList = list
				this.noAnswerList = list.filter(i => i.answer.length === 0)
				console.log(list)
				console.log(this.noAnswerList)
			})
		},
		computed: {
			listData() {
				return this.viewModel === 'type' ? this.groupList : this.orderList
			},
			isError() {
				return id => {
					return this.errorList.length && this.errorList.map(i => i.id).indexOf(id) > -1
				}
			},
			isNoAnswer() {
				return item => {
					return (item.question.replace(/\s*/g, "")) && item.option.length && !item.answer.length
				}
			}
		},
		watch: {
			paper: {
				handler(newPaper) {
					if (newPaper) {
						console.log('获取的试卷信息')
                        console.log(newPaper)
						let that = this
						this.groupList = [] // 题型排序的数据
						this.orderList = [] //顺序排列的数据
						this.exerciseList = []
						this.paperInfo = newPaper
						this.multipleRule = newPaper.multipleRule || 1 // 配分规则
						if (newPaper.item.length) {
							newPaper.item.forEach(i => {
								if (!i.score) i.score = 0
								// 如果有综合题 则将小题的分数进行累加作为综合题的分数
								// if(i.type === 'compose' && i.children.length){
								// 	i.score = i.children.reduce((a,b) => a + b.score , 0)
								// }
							})
							// 给顺序题目排序
							this.orderList.push({
								list: newPaper.item
							})
							/* 处理试卷内题目按照题型排序 */
							this.typeList.forEach(item => {
								this._.mapKeys(this._.groupBy(newPaper.item, 'type'), function(value, key) {
									if (key === item) { /* 按照题型排序，并且计算每种题型的总分 */
										that.groupList.push({
											type: key,
											list: value,
											score: value.reduce((p, e) => parseInt(p) + parseInt(e.score), 0)
										})
										that.exerciseList = that.exerciseList.concat(value)
									}
								})
							});
						}
						
						// 重新赋值
						this.originData = this.exerciseList
						this.groupTypeList = this.groupList
						this.totalNum = newPaper.item.length
						
						// 剩余可分配分数 更新
						this.surPlusScore = newPaper.score - newPaper.item.reduce((p, e) => Number(p) + Number(e.score), 0);
						this.$emit('scoreUpdate', this.surPlusScore)
						
						this.pageScrollTo(0)
						this.$nextTick(() => {
							// this.$MathJax.MathQueue(this.$refs.mathJaxContainer);
						})
					}
				},
				deep: true
			},
			viewModel: {
				handler(newValue) {
					if (newValue) {
						if (newValue === 'list') {
							this.groupList = [{
								type: 'all',
								score: this.exerciseList.reduce((p, e) => p + e.score, 0),
								list: this.exerciseList
							}]
						} else {
							this.groupList = this.groupTypeList
							console.log(this.groupList)
						}
					}
				},
				immediate: true
			}
		}

	}
</script>

<style scoped lang="less">
	@import "../index/CommonExercise.less";
</style>

<style scoped>
	.components-el-container .ivu-page {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 20px 0;
	}

	.components-el-container .exercise-item-error {
		background-color: rgb(255 152 152 / 60%);
	}

	.components-el-container .exercise-item-error:hover {
		border: 2px solid red !important;
	}


	.components-el-container .type-name {
		font-size: 18px;
		font-weight: bold;
		margin-top: 20px;
	}

	.components-el-container /deep/ .ivu-input-number-handler-down-inner,
	.components-el-container /deep/ .ivu-input-number-handler-up-inner {
		right: 8px;
		font-size: 16px;
	}


	.components-el-container .exercise-item:hover {
		border: 2px solid #01b4ef;
	}

	.components-el-container .exercise-item {
		position: relative;
		margin-top: 30px;
		font-size: 14px;
	}

	.components-el-container .exercise-item p {
		width: 92%;
	}

	.components-el-container .exercise-item .item-error-wrap {
		position: absolute;
		right: -2px;
		bottom: 0;
		width: auto;
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		margin: 0;
		background: #ff5656;
		color: #fff
	}


	.components-el-container .exercise-item .item-tools-wrap {
		position: absolute;
		right: -2px;
		top: -32px;
		width: auto;
		height: 30px;
		margin: 0;
		padding: 0;
		background: #01b4ef;
		display: none;
	}

	.components-el-container .exercise-item .item-tools-t {
		height: 100%;
		padding: 0 15px;
		float: left;
		color: white;
		cursor: pointer;
	}

	.components-el-container .exercise-item .item-tools-t:hover {
		background: #4a5ae6;
	}

	.components-el-container .exercise-item .item-score {
		margin-right: 10px;
		color: #fff;
		background: #01b4ef;
		padding: 4px 10px;
		border-radius: 5px;
	}

	.components-el-container .exercise-item .item-explain-details {
		/* width: 90%; */
	}

	.components-el-container .exercise-item .item-tools-t .ivu-icon {
		color: white;
		font-size: 14px;
		margin: 0 3px;
	}

	.type-score-btn {
		width: 80%;
		margin-left: 10%;
		height: 40px;
		line-height: 40px;
	}

	.type-score-item {
		margin: 20px 10px;
	}


	/*横向垂直水平居中*/
	.flex-row-center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.no-data-text {
		width: 100%;
		padding: 30px;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
		font-size: 16px;
	}
</style>

<style>
	.edit-exercise-modal .ivu-modal-body {
		max-height: 700px;
		overflow: auto;
		padding: 0;
	}
</style>
