<template>
    <div class="question-list-container" ref="questionContainer">
        <!-- 左侧题目列表清单 -->
        <div class="ql-left-box">
            <!--<p style="font-size:28px;text-align:center;margin:20px 0">芳草小学2019年5月期中考试数学试卷</p>
            <p style="font-size:16px;text-align:center">考试时间：120分钟&nbsp;&nbsp;&nbsp;出卷人：张纪中</p>-->

            <!-- <span class="btn-back" @click="handleBackTo" ref="btnBack"><Icon type="ios-arrow-back" />{{$t('totalAnalysis.ql_text13')}}</span> -->
            <Loading :top="300" v-show="dataLoading" type="3"></Loading>
			<ExerciseList :propsList="questionList" isAnalysis @pageScroll="doScroll" ref="exList"></ExerciseList>
        </div>

        <!-- 右侧题目列表题型概览 -->
        <div class='ql-right-box' ref="rightBox" :style="{width: isOpen ? '17%' : '18%'}">
            <div class="ql-right-score">
				<Button type="info" @click="handleBackTo">返回上级</Button>
				<p style="margin-top: 20px;">试卷科目：{{ $store.state.totalAnalysis.currentSubject }}</p>
				<p style="margin-top: 10px;">试卷题数：{{ 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)">{{getIndexOrder(item)}} - {{ childIndex + 1 }}</span>
								</span>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BaseLine from '@/components/student-analysis/total/BaseLine.vue'
    import BaseRateLine from '@/components/student-analysis/total/BaseRateLine.vue'
    import ExerciseList from '@/components/evaluation/ExerciseList.vue'
    export default {
        components: {
            BaseRateLine, BaseLine,ExerciseList
        },
        data() {
            return {
                dataLoading: false,
				isOpen:true,
                activeCollapseIndex: [],
                isFixed: false,
                isLoadingEcharts: false,
                isShowAnswerExplain: false,
                tableData: [],
                optionsData: [],
                collapseList: [],
                questionList: [],
				flatList:[],
                SingleList: [],
                MultipleList: [],
                JudgeList: [],
                CompleteList: [],
                SubjectiveList: [],
                ConnectorList: [],
                CorrectList: [],
                ComposeList: [],
                typeTransfer: {
                    'single': '单选',
                    'multiple': '多选',
                    'judge': '判断',
                    'complete': '填空',
                    'subjective': '主观',
					'connector': '连线',
					'correct': '改错',
                    'compose': '综合'
                },
                diffColors: ['#32CF74', '#E8BE15', '#F19300', '#EB5E00', '#D30000'],
                dataColumns: [
                    {
                        title: '知识点',
                        key: 'knowledgePoint',
                        align: 'center',
                        width: 150
                    },
                    {
                        title: '落点区域',
                        key: 'areaName',
                        align: 'center'
                    },
                    {
                        title: '配分',
                        key: 'score',
                        align: 'center'
                    },
                    {
                        title: '难易度',
                        key: 'diff',
                        align: 'center'
                    },
                    {
                        title: '鉴别度',
                        key: 'identify',
                        align: 'center',
                        render: function (h, params) {
                            return h('span', (Number(params.row.identify)).toFixed(2))
                        }
                    },
                    {
                        title: '正答率',
                        align: 'center',
                        key: 'classScoreRate'
                    },
                    {
                        title: '高分组正答率',
                        align: 'center',
                        key: 'PH',
                        render: function (h, params) {
                            return h('span', ((Number(params.row.PH)) * 100).toFixed(0) + '%')
                        }
                    },
                    {
                        title: '低分组正答率',
                        align: 'center',
                        key: 'PL',
                        render: function (h, params) {
                            return h('span', ((Number(params.row.PL)) * 100).toFixed(0) + '%')
                        }
                    },
                    {
                        title: 'R1',
                        align: 'center',
                        key: 'R1',
                        render: function (h, params) {
                            return h('span', ((Number(params.row.R1)) * 100).toFixed(0) + '%')
                        }
                    },
                    {
                        title: 'R2',
                        key: 'R2',
                        align: 'center',
                        render: function (h, params) {
                            return h('span', ((Number(params.row.R2)) * 100).toFixed(0) + '%')
                        }
                    },
                    {
                        title: 'R3',
                        align: 'center',
                        key: 'R3',
                        render: function (h, params) {
                            return h('span', ((Number(params.row.R3)) * 100).toFixed(0) + '%')
                        }
                    },
                    {
                        title: 'R4',
                        align: 'center',
                        key: 'R4',
                        render: function (h, params) {
                            return h('span', ((Number(params.row.R4)) * 100).toFixed(0) + '%')
                        }
                    },
                    {
                        title: 'R5',
                        align: 'center',
                        key: 'R5',
                        render: function (h, params) {
                            return h('span', ((Number(params.row.R5)) * 100).toFixed(0) + '%')
                        }
                    },
                    {
                        title: 'R6',
                        align: 'center',
                        key: 'R6',
                        render: function (h, params) {
                            return h('span', ((Number(params.row.R6)) * 100).toFixed(0) + '%')
                        }
                    }
                ],
                optionColumns: [
                    {
                        title: '选项',
                        key: 'option',
                        align: 'center',
                        width: 150
                    },
                    {
                        title: '选答人数',
                        key: 'num',
                        align: 'center'
                    },
                    {
                        title: '选答率',
                        key: 'rate',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Progress', {
                                    props: {
                                        percent: params.row.rate,
                                        strokeColor: params.row.isTrue ? '#14db14' : '#b5bcbe'
                                    }
                                })
                            ])
                        }
                    },
                    {
                        title: '高分组选答率',
                        align: 'center',
                        key: 'PH',
                        render: function (h, params) {
                            return h('span', params.row.PH + '%')
                        }
                    },
                    {
                        title: '低分组选答率',
                        align: 'center',
                        key: 'PL',
                        render: function (h, params) {
                            return h('span', params.row.PL + '%')
                        }
                    }
                ],
                scrollTop: 0,
                fromRoutePath: null

            }
        },
        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)
			let curPaper = curExam.papers[curSubjectIndex]
			this.initFullPaper(curPaper)

            
            this.optionsData = [
                {
                    option: 'A',
                    isTrue: false,
                    num: 12,
                    rate: 40,
                    PH: 10,
                    PL: 60
                },
                {
                    option: 'B',
                    isTrue: false,
                    num: 6,
                    rate: 20,
                    PH: 10,
                    PL: 23
                },
                {
                    option: 'C',
                    isTrue: true,
                    num: 9,
                    rate: 30,
                    PH: 70,
                    PL: 10
                },
                {
                    option: 'D',
                    isTrue: false,
                    num: 3,
                    rate: 10,
                    PH: 10,
                    PL: 7
                }
            ]
        },

        methods: {
			
			async initFullPaper(examPaper){
				console.log(examPaper.name)
				let fullPaperJson =  await this.$evTools.getFullPaper(examPaper)
				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)
				
				// 如果是试题页面过来带有题序 则获取指定题目并进行滚动
				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.$nextTick(() => {
						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) {
				console.log(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('exercise-item')
					let itemIndex = this.questionList.indexOf(item)
					let questionDom = questionList[itemIndex]
					this.doScroll(questionDom.offsetTop)
					// 伪数组处理统一背景颜色
					Array.prototype.slice.call(allList).forEach(item => {
					    item.style.background = '#2db7f5'
					})
					// 将当前选中项修改选中色
					currentSpan.style.background = '#139c51'
					
					console.log(itemIndex)
					console.log(this.$refs.exList)
					this.$refs.exList.collapseList = [itemIndex]
				})
                
            },

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

            // 折叠面板点击事件
            handleCollapseChange(val) {
                let questionIndex = val[0]
                if (questionIndex === '999') return
                if (questionIndex && this.collapseList.indexOf(questionIndex) === -1 && questionIndex !== '999') {
                    this.collapseList.push(questionIndex)
                    this.activeCollapseIndex = questionIndex
                } else if (questionIndex === 0) {
                    this.collapseList.push(questionIndex)
                    this.activeCollapseIndex = questionIndex
                } else {
                    // console.log("加入异常", questionIndex);
                    // console.log("加入异常", this.collapseList.indexOf(questionIndex));
                }
                this.activeCollapseIndex = this.collapseList
            },

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

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

        },

        computed: {
            // 获取最新滚动数据
            getScrollTop() {
                let top = this.$store.state.totalAnalysis.scrollTop
                return top
            },
            // 获取最新试题数据
            getExerciseData() {
                return this.$store.state.totalAnalysis.exerciseData
            },
			// 替换题序
			getIndexOrder(){
				return item => {
					return this.questionList.indexOf(item) + 1 > 9 ? this.questionList.indexOf(item) + 1 : '0' + (this.questionList.indexOf(item) + 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'
            },
            // 渲染最新试题统计数据
            getExerciseData(val) {
                if (!val) return
                this.tableData = JSON.parse(JSON.stringify(val))
                console.log(this.tableData)
            }
        }
    }
</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;
        }
</style>
