<template>
	<div class="question-list-container" ref="questionContainer">
		<!-- 左侧题目列表清单 -->
		<div class="ql-left-box">
			<Loading :top="300" v-show="dataLoading" type="3"></Loading>
			<ExerciseList :propsList="questionList" :flatIds="flatList.length ? flatList.map(i => i.id) : []" :examScope="examScope"
			 :analysisJson="paperAnalysisJson" :optionRate="paperOptionRateArr" isAnalysis
				@pageScroll="doScroll" ref="exList" isShowAnalysis></ExerciseList>
		</div>

		<!-- 右侧题目列表题型概览 -->
		<div class='ql-right-box' ref="rightBox" :style="{width: isOpen ? '17%' : '18%'}">
			<Button type="info" @click="handleBackTo"
				style="width: 100%;height: 50px;margin-bottom: 15px;border-radius: 0;">{{ $t('totalAnalysis.backUp')}}</Button>
			<Button type="info" @click="isShowAnalysis = true"
				style="width: 100%;height: 40px;margin-bottom: 15px;border-radius: 0;background-color: #29a482;border: none;">{{ $t('evaluation.paperList.paperAnalysis')}}</Button>
			<div style="background-color: #fff;">
				<div class="ql-right-score">
					<p style="margin-top: 20px;">{{ $t('totalAnalysis.paperSubject')}}：{{ $store.state.totalAnalysis.currentSubject }}</p>
					<p style="margin-top: 10px;">{{ $t('totalAnalysis.paperItemsCount')}}：{{ questionList.length }}</p>
					<p style="margin-top: 10px;">{{$t('totalAnalysis.ql_text1')}}
						：<span>{{sumArr(questionList.map(item => item.score))}} {{$t('totalAnalysis.ql_text8')}}</span>
					</p>
				</div>

				<div class="ql-right-list">
					<div>
						<div class="ql-right-part" v-if="SingleList.length">
							<span class="ql-right-part-title"><span
									class="ql-line"></span>{{$t('totalAnalysis.ql_text2')}}({{sumArr(SingleList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
							<div class="ql-right-items">
								<span class="ql-right-item" v-for="(item,index) in SingleList" :key="index"
									@click="handleItemClick(item,$event)" :ref="'indexRef' + flatList.indexOf(item)"
									:data-order="flatList.indexOf(item)">{{getIndexOrder(item)}}</span>
							</div>
						</div>
						<div class="ql-right-part" v-if="MultipleList.length">
							<span class="ql-right-part-title"><span
									class="ql-line"></span>{{$t('totalAnalysis.ql_text3')}}({{sumArr(MultipleList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
							<div class="ql-right-items">
								<span class="ql-right-item" v-for="(item,index) in MultipleList" :key="index"
									@click="handleItemClick(item,$event)" :ref="'indexRef' + flatList.indexOf(item)"
									:data-order="flatList.indexOf(item)">{{getIndexOrder(item)}}</span>
							</div>
						</div>
						<div class="ql-right-part" v-if="JudgeList.length">
							<span class="ql-right-part-title"><span
									class="ql-line"></span>{{$t('totalAnalysis.ql_text4')}}({{sumArr(JudgeList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
							<div class="ql-right-items">
								<span class="ql-right-item" v-for="(item,index) in JudgeList" :key="index"
									@click="handleItemClick(item,$event)" :ref="'indexRef' + flatList.indexOf(item)"
									:data-order="flatList.indexOf(item)">{{getIndexOrder(item)}}</span>
							</div>
						</div>
						<div class="ql-right-part" v-if="CompleteList.length">
							<span class="ql-right-part-title"><span
									class="ql-line"></span>{{$t('totalAnalysis.ql_text5')}}({{sumArr(CompleteList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
							<div class="ql-right-items">
								<span class="ql-right-item" v-for="(item,index) in CompleteList" :key="index"
									@click="handleItemClick(item,$event)" :ref="'indexRef' + flatList.indexOf(item)"
									:data-order="flatList.indexOf(item)">{{getIndexOrder(item)}}</span>
							</div>
						</div>
						<div class="ql-right-part" v-if="SubjectiveList.length">
							<span class="ql-right-part-title"><span
									class="ql-line"></span>{{$t('totalAnalysis.ql_text6')}}({{sumArr(SubjectiveList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
							<div class="ql-right-items">
								<span class="ql-right-item" v-for="(item,index) in SubjectiveList" :key="index"
									@click="handleItemClick(item,$event)" :ref="'indexRef' + flatList.indexOf(item)"
									:data-order="flatList.indexOf(item)">{{getIndexOrder(item)}}</span>
							</div>
						</div>
						<div class="ql-right-part" v-if="ConnectorList.length">
							<span class="ql-right-part-title"><span
									class="ql-line"></span>{{$t('totalAnalysis.ql_text14')}}({{sumArr(ConnectorList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
							<div class="ql-right-items">
								<span class="ql-right-item" v-for="(item,index) in ConnectorList" :key="index"
									@click="handleItemClick(item,$event)" :ref="'indexRef' + flatList.indexOf(item)"
									:data-order="flatList.indexOf(item)">{{getIndexOrder(item)}}</span>
							</div>
						</div>
						<div class="ql-right-part" v-if="CorrectList.length">
							<span class="ql-right-part-title"><span
									class="ql-line"></span>{{$t('totalAnalysis.ql_text15')}}({{sumArr(CorrectList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
							<div class="ql-right-items">
								<span class="ql-right-item" v-for="(item,index) in CorrectList" :key="index"
									@click="handleItemClick(item,$event)" :ref="'indexRef' + flatList.indexOf(item)"
									:data-order="flatList.indexOf(item)">{{getIndexOrder(item)}}</span>
							</div>
						</div>
						<div class="ql-right-part" v-if="ComposeList.length">
							<span class="ql-right-part-title"><span
									class="ql-line"></span>{{$t('totalAnalysis.ql_text7')}}({{sumArr(ComposeList.map(item => item.score))}}{{$t('totalAnalysis.ql_text8')}})</span>
							<div class="ql-right-items">
								<!-- 如果是综合题 则需要把小题题序放出来 -->
								<span v-for="(item,index) in ComposeList" :key="index" style="background-color: none;"
									class="ql-right-items">
									<span class="ql-right-item" v-for="(child,childIndex) in item.children"
										:key="childIndex" @click="handleItemClick(item,$event)"
										:ref="'indexRef' + (flatList.indexOf(child))"
										:data-order="flatList.indexOf(child)">{{ fillIndexOrder(flatList.indexOf(child)) }}
										({{getIndexOrder(item)}} - {{ childIndex + 1 }})</span>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<Modal v-model="isShowAnalysis" width="1100" footer-hide class="export-modal analysis-modal">
				<ExamPaperAnalysis :testPaper="paperInfo" v-if="isShowAnalysis"></ExamPaperAnalysis>
			</Modal>
		</div>
	</div>
</template>

<script>
	
	import ExerciseList from '@/components/evaluation/ExerciseList.vue'
	import ExamPaperAnalysis from '@/view/learnactivity/ExamPaperAnalysis.vue'
	export default {
		components: {
			ExamPaperAnalysis,
			ExerciseList
		},
		data() {
			return {
				paperInfo:null,
				examScope: null,
				dataLoading: false,
				isOpen: true,
				activeCollapseIndex: [],
				isFixed: false,
				isLoadingEcharts: false,
				isShowAnswerExplain: false,
				isShowAnalysis:false,
				tableData: [],
				optionsData: [],
				collapseList: [],
				questionList: [],
				flatList: [],
				SingleList: [],
				MultipleList: [],
				JudgeList: [],
				CompleteList: [],
				SubjectiveList: [],
				ConnectorList: [],
				CorrectList: [],
				ComposeList: [],
				diffColors: ['#32CF74', '#E8BE15', '#F19300', '#EB5E00', '#D30000'],
				scrollTop: 0,
				fromRoutePath: null,
				paperAnalysisJson: [],
				paperOptionRateArr:[]
			}
		},
		created() {
			let that = this
			let parentVm = this.$parent.$parent.$parent
			parentVm.isShowQuestions = true

			let curExam = JSON.parse(localStorage.getItem('curExam'))
			let curSubjectIndex = curExam.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
			console.log(curSubjectIndex)
			console.log('当前的评测数据', curExam)
			this.examScope = curExam.scope
			let curPaper = curExam.papers[curSubjectIndex]
			this.initFullPaper(curPaper, curExam)
		},

		methods: {

			async initFullPaper(examPaper, exam) {
				console.log(examPaper.name)
				examPaper.examId = exam.code.replace('Exam-', '')
				let fullPaperJson = await this.$evTools.getFullPaper(examPaper, exam.scope)
				this.questionList = fullPaperJson.item
				this.SingleList = this.questionList.filter(item => item.type === 'single')
				this.MultipleList = this.questionList.filter(item => item.type === 'multiple')
				this.JudgeList = this.questionList.filter(item => item.type === 'judge')
				this.CompleteList = this.questionList.filter(item => item.type === 'complete')
				this.SubjectiveList = this.questionList.filter(item => item.type === 'subjective')
				this.ConnectorList = this.questionList.filter(item => item.type === 'connector')
				this.CorrectList = this.questionList.filter(item => item.type === 'correct')
				this.ComposeList = this.questionList.filter(item => item.type === 'compose')
				this.dataLoading = false
				console.log('当前的评测试卷数据', fullPaperJson)
				this.paperInfo = fullPaperJson

				// 如果是试题页面过来带有题序 则获取指定题目并进行滚动
				let qIndex = this.$route.query.QIndex
				if (qIndex) {
					let paperItems = fullPaperJson.item
					let allItems = []
					paperItems.forEach(i => {
						allItems = allItems.concat(i.type === 'compose' ? i.children : [i])
					})
					this.flatList = allItems
					console.log('拉平后的题目', allItems)
					// 获取当前试题的分析数据
					this.paperAnalysisJson = this.getExerciseList()
					this.$nextTick(() => {
						console.log(this.$refs['indexRef' + (qIndex - 1)][0])
						setTimeout(() => {
							this.$refs['indexRef' + (qIndex - 1)][0]
							.click() // 根据路由携带的题序 来触发对应题序的点击事件 完成滚动
						}, 1000)
					})
				} else {
					this.$nextTick(() => {
						this.$refs.indexRef0[0].click()
					})
				}
			},

			/* 页面滚动逻辑 */
			doScroll(scrollDistance) {
				this.$nextTick(() => {
					let parentVm = this.$parent.$parent.$parent
					parentVm.$refs['vs'].scrollTo({
							y: scrollDistance,
						},
						500,
						"easeInQuad"
					);
				})
			},

			// 指定容器滚动到指定位置
			scrollToTop(element, to, duration) {
				if (duration <= 0) return
				const diff = to - element.scrollTop
				const perTick = diff / duration * 10
				this.timer = setTimeout(() => {
					element.scrollTop += perTick
					if (element.scrollTop === to) return
					this.scrollToTop(element, to, duration - 10)
				}, 10)
			},

			// 点击右边题序 获取到题目DOM 进行滚动操作
			handleItemClick(item, e) {
				this.$nextTick(() => {
					let parentVm = this.$parent.$parent.$parent
					let currentSpan = e.target || e
					let allList = document.getElementsByClassName('ql-right-item')
					let questionList = this.$refs.exList.$el.getElementsByClassName('cp-exercise-item')
					let itemIndex = this.questionList.indexOf(item)
					let questionDom = questionList[itemIndex]
					questionDom.style.border = '2px solid #2db7f5'
					setTimeout(() => {
						questionDom.style.border = '2px solid transparent'
					}, 2000)
					this.doScroll(questionDom.offsetTop)
					// 伪数组处理统一背景颜色
					Array.prototype.slice.call(allList).forEach(item => {
						item.style.background = '#2db7f5'
					})
					// 将当前选中项修改选中色
					currentSpan.style.background = '#139c51'
					this.$refs.exList.collapseList = [itemIndex]
				})

			},

			// 点击返回
			handleBackTo() {
				// this.$refs.btnBack.style.display = 'none'
				this.$parent.$parent.$parent.isShowQuestions = false
				this.$router.back(-1)
			},

			// 返回题目区域总分 字符串换算
			sumArr(arr) {
				if (arr.length) {
					return arr.reduce((a, b) => a + b)
				} else {
					return 0
				}

			},

			/* 获取所有试题的对应分析数据 */
			getExerciseList() {
				let analysisJson = JSON.parse(JSON.stringify(this.getAnalysisJson))
				let curSubjectIndex = analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis
					.currentSubject)
				let result = []
				analysisJson.paper[curSubjectIndex].value.forEach((exercise, exerciseIndex) => {
					let obj = {}
					analysisJson.paperKey.forEach((key, index) => {
						obj[key] = exercise[index]
					})

					analysisJson.classes.forEach(classItem => {
						obj[classItem.className] = classItem.subjects[curSubjectIndex].item[exerciseIndex]
					})
					result.push(obj)
				})
				
				let curSubject = analysisJson.subjects[curSubjectIndex]
				curSubject.record.forEach((i,itemIndex) => {
					this.paperOptionRateArr.push({
						record:curSubject.record.length ? curSubject.record[itemIndex] : {},
						ph:curSubject.phc.length ? curSubject.phc[itemIndex] : {},
						pl:curSubject.plc.length ? curSubject.plc[itemIndex] : {}
					})
				})
				
				return result
			},
		},

		mounted() {
			this.$EventBus.$off('onCollapseChange')
			this.$EventBus.$on('onCollapseChange', val => {
				// 如果侧边栏展开的时候
				this.isOpen = !val
			})





		},

		computed: {
			// 获取最新滚动数据
			getScrollTop() {
				let top = this.$store.state.totalAnalysis.scrollTop
				return top
			},
			// 获取最新试题数据
			getAnalysisJson() {
				return this.$store.state.totalAnalysis.analysisJson
			},
			// 替换题序
			getIndexOrder() {
				return item => {
					return this.questionList.indexOf(item) + 1 > 9 ? this.questionList.indexOf(item) + 1 : '0' + (this
						.questionList.indexOf(item) + 1)
				}
			},
			// 替换题序
			fillIndexOrder(index) {
				return index => {
					return index + 1 > 9 ? index + 1 : '0' + (index + 1)
				}
			}
		},
		watch: {
			getScrollTop(val) {
				this.scrollTop = val
				// let box = this.$refs.rightBox
				// let btnBack = this.$refs.btnBack
				// let t = 232 - this.scrollTop
				// box.style.top = this.scrollTop >= 129 ? '100px' : (t + 'px')
				// btnBack.style.top = this.scrollTop >= 129 ? (this.scrollTop - 152) + 'px' : '0px'
			},
		}
	}
</script>

<style src="./QuestionList.css" scoped></style>

<style>
	.ql-item .ivu-collapse {
		border: 0;
	}

	.ql-item .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header {
		color: #06a9bb;
	}

	.ql-item .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header>.ivu-icon {
		vertical-align: unset;
	}

	.ql-item .ivu-collapse>.ivu-collapse-item {
		border-top: 0;
	}
	
	.analysis-modal .ivu-modal-body{
		padding: 50px 46px !important;
		height: 800px !important;
		overflow: auto;
	}
	
	.analysis-modal .ivu-icon-ios-close{
		font-size: 40px !important;
		font-weight: bolder;
	}
</style>
