zc_saas_h5/pages2/bank/questionBankExplainDetail.vue

<template>
	<view class="questionBank">
		<view class="tabs-top">
			<u-tabs :list="list" sticky :current="tabCurrent" @change="tabChange" active-color="#007AFF"></u-tabs>
		</view>
		<swiper class="swiper" :current="current" @change="swiperChange" :interval="interval">
			<swiper-item v-for="(bank,bankIndex) in questionList" :key="bankIndex">
				<view class="pageContent">
					<view class="pad_8 titBox" >
						<view class="firstLetter">
							<view class="leftLetters">
								<view class="btnType">
									<text v-if="bank.type==1">单选</text>
									<text v-if="bank.type==2">多选</text>
									<text v-if="bank.type==3">判断</text>
									<text v-if="bank.type==4">案例</text>
									<text v-if="bank.type==5">简答</text>
								</view>
								<text>{{bankIndex+1}}/{{questionList.length}}</text>
							</view>
							<view style="color: #666;font-size: 28rpx;"></view>
							<view class="leftLetters"></view>
						</view>
						<view class="titles">
							<rich-text :nodes="bank.content"></rich-text>
						</view>		
					</view>
					<template v-if="bank.type == 1">
						<view class="pad_8 titBox no-margin">
							<view v-if="!bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty" @click="radioSelect(item.optionsId,bankIndex)">
									<view class="activeTI">{{ ast[index] }}</view>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty">
									<text :class="{right:(item.optionsId == bank.ques) || (item.optionsId == bank.ans),wrong:(item.optionsId == bank.ques) && (bank.ques != bank.ans)}"  class="activeTI">{{ ast[index] }}</text>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view> 
						</view>
						<view v-if="bank.ques">
							<view class="pad_8 answer">
								<view>正确答案：{{ast[bank.ans-1]}}</view>
								<view v-if="!explain">我的答案：{{ast[bank.ques-1]}}</view>
							</view>
							<view class="pad_8 answerInfos">
								<view class="answerTitle">答案解析</view>
								<view class="answerContent">
									<rich-text :nodes="bank.analysisContent"></rich-text>
								</view>
							</view>
						</view>
					</template>
						
					<template v-if="bank.type == 2">
						<view class="pad_8 titBox no-margin">
							<view v-if="!bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty" @click="checkboxSelect(item.optionsId,bankIndex,index)">
									<view :class="{checked:item.checked}" class="activeTI">{{ ast[index] }}</view>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view>
							<view v-if="!bank.ques" class="submit_checkbox" @click="checkboxSubmit(bankIndex)">
								确认答案
							</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty">
									<text :class="{right:(bank.ques.indexOf(item.optionsId) != -1 ) || (bank.ans.indexOf(item.optionsId) != -1),wrong:(bank.ques.indexOf(item.optionsId) != -1 ) && (bank.ans.indexOf(item.optionsId) == -1)}"  class="activeTI">{{ ast[index] }}</text>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view> 
						</view>
						<view v-if="bank.ques">
							<view class="pad_8 answer">
								<view>正确答案：
									<text :key="ansItemIndex" v-for="(ansItem,ansItemIndex) in bank.ans">{{ast[ansItem-1]}}</text>
								</view>
								<view v-if="!explain">我的答案：
									<text :key="quesItemIndex" v-for="(quesItem,quesItemIndex) in bank.ques">{{ast[quesItem-1]}}</text>
								</view>
							</view>
							<view class="pad_8 answerInfos">
								<view class="answerTitle">答案解析</view>
								<view class="answerContent">
									<rich-text :nodes="bank.analysisContent"></rich-text>
								</view>
							</view>
						</view>
					</template>
						
					<template v-if="bank.type == 3">
						<view class="pad_8 titBox no-margin">
							<view v-if="!bank.ques">
								<view v-for="(item, index) in judge" :key="index" class="lisSty" @click="judgeSelect(index,bankIndex)">
									<view class="activeTI">{{ ast[index] }}</view>
									{{ item }}
								</view>
							</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in judge" :key="index" class="lisSty">
									<text :class="{right:(index == bank.ques) || (index == bank.ans),wrong:(index == bank.ques) && (bank.ques != bank.ans)}"  class="activeTI">{{ ast[index] }}</text>
									{{ item }}
								</view>
							</view> 
						</view>
						<view v-if="bank.ques">
							<view class="pad_8 answer">
								<view>正确答案：{{ast[bank.ans]}}</view>
								<view v-if="!explain">我的答案：{{ast[bank.ques]}}</view>
							</view>
							<view class="pad_8 answerInfos">
								<view class="answerTitle">答案解析</view>
								<view class="answerContent">
									<rich-text :nodes="bank.analysisContent"></rich-text>
								</view>
							</view>
						</view>
					</template>
						
						
					<!-- 简答题 -->
					<template v-if="bank.type == 5">
						<view class="pad_8 titBox">
							<view class="ans">
								<view class="ans_input" v-if="!bank.ques || (!bank.ques.text && !bank.ques.imageList.length)">
									<view class="top flex">
										<image :data-index="bankIndex" class="icon" @click="chooseImg(bankIndex)" src="/static/camera.png" mode=""></image>
										<view class="progress">{{bank.ansText.imageList.length || '0'}}/4</view>
										<view class="submit"  :class="{disabled:!bank.ansText.text && hasImgs(bank)}" @click="submitAns(bankIndex)" >确认答案</view>
									</view>
									<view class="textarea">
										<textarea v-model="bank.ansText.text" placeholder="在此输入答案"></textarea>
									</view>
									<view class="imgs">
										<view class="img" v-for="(img,imgIndex) in bank.ansText.imageList" :key="imgIndex" >
											<text @click="deleteImg(imgIndex,bankIndex)">x</text>
											<image :src="$method.splitImgHost(img, true)"></image>
										</view>
									</view>
								</view>
								<view class="ans_submit answerInfos" v-if="bank.ques && !explain">
									<view class="answerTitle">我的答案:</view>
									{{bank.ques.text}}
									<view class="imgs">
										<image class="img" :key="quesIndex" v-for="(ques,quesIndex) in bank.ques.imageList" :src="$method.splitImgHost(ques,true)"></image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="bank.ques">
							<view class="pad_8 answerInfos">
								<view class="answerTitle">答案解析:</view>
								<view class="answerContent">
									<rich-text :nodes="bank.analysisContent"></rich-text>
								</view>
							</view>
						</view>
					</template>
						
					<!-- 案例题 -->
					<template v-if="bank.type == 4">
						<view class="tabs">
							<view class="tab" 
								:class="{current:tabIndex == bank.current}" 
								:key="tabIndex" v-for="(tab,tabIndex) in bank.jsonStr"
								 @click="tabSelect(tabIndex,bankIndex)"
							>
								问题{{tabIndex+1}}
							</view>
						</view>
						<view v-for="(ansItem,ansIndex) in bank.jsonStr" v-if="bank.current == ansIndex" :key="ansIndex">
							<template v-if="ansItem.type == 1">
								<view class="pad_8 titBox">
									<view class="titles">
										<rich-text :nodes="ansItem.content"></rich-text>
									</view>
									<view v-if="!bank.ques[ansIndex]">
										<view v-for="(option, childIndex) in ansItem.optionsList" :key="childIndex" class="lisSty" @click="radioSelectChild(option.optionsId,ansIndex,bankIndex)">
											<view class="activeTI">{{ ast[childIndex] }}</view>
											<rich-text class="textChild" :nodes="option.content"></rich-text>
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view v-for="(option, childIndex) in ansItem.optionsList" :key="childIndex" class="lisSty">
											<text :class="{right:(option.optionsId == bank.ques[ansIndex]) || (option.optionsId == bank.ans[ansIndex]),wrong:(option.optionsId == bank.ques[ansIndex]) && (bank.ques[ansIndex] != bank.ans[ansIndex])}"  class="activeTI">{{ ast[childIndex] }}</text>
											<rich-text :nodes="option.content"></rich-text>
										</view>
									</view> 
								</view>
								<view v-if="bank.ques[ansIndex]">
									<view class="pad_8 answer">
										<view>正确答案：{{ast[bank.ans[ansIndex]-1]}}</view>
										<view v-if="!explain">我的答案：{{ast[bank.ques[ansIndex]-1]}}</view>
									</view>
									<view class="pad_8 answerInfos">
										<view class="answerTitle">答案解析</view>
										<view class="answerContent">
											<rich-text :nodes="option.analysisContent"></rich-text>
										</view>
									</view>
								</view>
							</template>
							
							<template v-if="ansItem.type == 2">
								<view class="pad_8 titBox">
									<view class="titles">
										<rich-text :nodes="ansItem.content"></rich-text>
									</view>
									<view v-if="!bank.ques[ansIndex]">
										<view v-for="(option, childindex) in ansItem.optionsList" :key="childindex" class="lisSty" @click="checkboxSelectChild(bankIndex,ansIndex,childindex)">
											<view :class="{checked:option.checked}" class="activeTI">{{ ast[childindex] }}</view>
											<rich-text :nodes="option.content"></rich-text>
										</view>
									</view>
									<view v-if="!bank.ques[ansIndex]" class="submit_checkbox" @click="checkboxSubmitChild(bankIndex,ansIndex)">
										确认答案
									</view>
									<view v-if="bank.ques && bank.ques[ansIndex]">
										<view v-for="(option, childindex) in ansItem.optionsList" :key="childindex" class="lisSty">
											<text :class="{right:right(bankIndex,ansIndex,option),wrong:wrong(bankIndex,ansIndex,option)}"  class="activeTI">{{ ast[childindex] }}</text>
											<rich-text :nodes="option.content"></rich-text>
										</view>
									</view> 
								</view>
								<view v-if="bank.ques[ansIndex]">
									<view class="pad_8 answer">
										<view>正确答案：
											<text :key="ansItemIndex1" v-for="(ansItem1,ansItemIndex1) in bank.ans[ansIndex]">{{ast[ansItem1-1]}}</text>
										</view>
										<view v-if="!explain">我的答案：
											<text :key="quesItemIndex" v-for="(quesItem,quesItemIndex) in bank.ques[ansIndex]">{{ast[quesItem-1]}}</text>
										</view>
									</view>
									<view class="pad_8 answerInfos">
										<view class="answerTitle">答案解析</view>
										<view class="answerContent">
											<rich-text :nodes="ansItem.analysisContent"></rich-text>
										</view>
									</view>
								</view>
							</template>
							
							<template v-if="ansItem.type == 3">
								<view class="pad_8 titBox">
									<view class="titles">
										<rich-text :nodes="ansItem.content"></rich-text>
									</view>
									<view v-if="!bank.ques[ansIndex]">
										<view v-for="(option, childindex) in judge" :key="childindex" class="lisSty" @click="judgeSelectChild(ansIndex,childindex,bankIndex)">
											<view class="activeTI">{{ ast[childindex] }}</view>
											{{ option }}
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view v-for="(option, childindex) in judge" :key="childindex" class="lisSty">
											<text :class="{right:(childindex == bank.ques[ansIndex]) || (childindex == bank.ans[ansIndex]),wrong:(childindex == bank.ques[ansIndex]) && (bank.ques[ansIndex] != bank.ans[ansIndex])}"  class="activeTI">{{ ast[childindex] }}</text>
											{{ option }}
										</view>
									</view> 
								</view>
								<view v-if="bank.ques[ansIndex]">
									<view class="pad_8 answer">
										<view>正确答案：{{ast[bank.ans[ansIndex]]}}</view>
										<view v-if="!explain">我的答案：{{ast[bank.ques[ansIndex]]}}</view>
									</view>
									<view class="pad_8 answerInfos">
										<view class="answerTitle">答案解析</view>
										<view class="answerContent">
											<rich-text :nodes="ansItem.analysisContent"></rich-text>
										</view>
									</view>
								</view>
							</template>
							
							
							<!-- 简答题 -->
							<template v-if="ansItem.type == 5">
								<view class="pad_8 titBox_title">
									<view>
										<rich-text :nodes="ansItem.content"></rich-text>
									</view>
								</view>
								<view class="pad_8 titBox_title">
									<view class="ans">
										<view class="ans_input" v-if="!bank.ques[ansIndex] || (!bank.ques[ansIndex].text && !bank.ques[ansIndex].imageList.length)">
											<view class="top flex">
												<image class="icon" @click="chooseImgChild(bankIndex,ansIndex)" src="/static/08-10_032.jpg" mode=""></image>
												<view class="progress">{{ansItem.ansText.imageList.length || '0'}}/4</view>
												<view class="submit"  :class="{disabled:!ansItem.ansText.text && hasImgs(ansItem)}"  @click="submitAnsChild(bankIndex,ansIndex)">确认答案</view>
											</view>
											<view class="textarea">
												<textarea v-model="ansItem.ansText.text" placeholder="在此输入答案"></textarea>
											</view>
											<view class="imgs">
												<view class="img" v-for="(img,imgIndex) in ansItem.ansText.imageList" :key="imgIndex">
													<text @click="deleteImgChild(imgIndex,bankIndex,ansIndex)">x</text>
													<image :src="$method.splitImgHost(img, true)"></image>
												</view>
											</view>
										</view>
										<view class="ans_submit answerInfos" v-if="bank.ques[ansIndex] && !explain">
											<view class="answerTitle">我的答案</view>
											{{bank.ques[ansIndex].text}}
											<view class="imgs">
												<image class="img" :key="quesIndex" v-for="(ques,quesIndex) in bank.ques[ansIndex].imageList" :src="$method.splitImgHost(ques,true)"></image>
											</view>
										</view>
									</view>
								</view>
								<view v-if="bank.ques[ansIndex]">
									<view class="pad_8 answerInfos">
										<view class="answerTitle">答案解析</view>
										<view class="answerContent">
											<rich-text :nodes="ansItem.analysisContent"></rich-text>
										</view>
									</view>
								</view>
							</template>
						</view>	
					</template>
						
						
					
				
					<view class="footer_btn">
						<view class="collect" @click="collect(collectList[bankIndex], bankIndex)">
							<view v-if="collectList[bankIndex]">
								<image src="/static/icon/collected.png" mode=""></image>
								<view>取消收藏</view>
							</view>
							<view v-if="!collectList[bankIndex]">
								<image src="/static/icon/collect.png" mode=""></image>
								<view>收藏</view>
							</view>
						</view>
						<view class="flex_center" @click="openFooterTab">
							<view class="up-icon">
								<image src="/static/up.png"></image>
							</view>
							答题卡
						</view>
						<view class="collect" @click="submit">
							<view>
								<image src="/static/jj.png" mode=""></image>
								<view>交卷</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<u-popup v-model="show" mode="bottom" border-radius="14" height="680rpx">
			<view class="popupView">
				<view class="popupTops">
					<view class="topIcon"></view>
					点击编号即可跳转至对应题目
				</view>
				<view class="popupContent">
					<scroll-view scroll-y="true" style="height: 506rpx;">
						<view class="boxSty">
							<view v-for="(item, index) in questionList" :key="index" @click="changeIndex(index)" :class="{isRight:isRight(item,index),isWrong:isWrong(item,index)}" class="liListSty">{{ index + 1 }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		
		<view class="dialog" v-if="showDialog">
			<image class="pointer" src="/static/pointer.png"></image>
			<view class="text">左右滑动切换上下题</view>
			<view class="btn" @click="hideDialog">我知道了</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			examId:'',
			tabCurrent:0,
			current:0,
			questionList:[],
			ast: ['A', 'B', 'C', 'D','E','F','G'],
			judge:['错误','正确'],
			show: false,
			showDialog:false,
			bankList: [],
			collectList:[],
			goodsId:'',
			explain:'1',  	//是否显示答案
			chapterId:'',
			moduleId:'',
			list:[{
				name:'对题'
			},{
				name:'错题'
			}]
		};
	},
	onLoad(option){
		this.examId = option.examId;
		this.goodsId = option.goodsId;
		this.chapterId = option.chapterId;
		this.moduleId = option.moduleId;
		// this.goodsQuestionList();
		
		let showDialog = uni.getStorageSync('showDialog');
		
		if(showDialog) {
			this.showDialog = false;
		} else {
			this.showDialog = true;
			uni.setStorageSync('showDialog','1');
		}
		
		if(this.tabCurrent == 0) {
			this.examRecordRightList();
		} else {
			this.examRecordWrongList();
		}
		
	},
	onUnload() {
		
	},
	methods: {
		tabChange(e) {
			this.tabCurrent = e;
			if(this.tabCurrent == 0) {
				this.examRecordRightList();
			} else {
				this.examRecordWrongList();
			}
		},
		/**
		 * 是否有上传图片
		 */
		hasImgs(bank) {
			
			return bank.ansText.imageList.length == 0;
		},
		/**
		 * 获取错题列表
		 */
		examRecordWrongList() {
			this.$api.examRecordWrongList({
				examId:this.examId,
				goodsId:this.goodsId
			}).then(res => {
				
				res.data.rows.forEach((item,index) => { 
					if(typeof item.jsonStr == 'string') {
						item.jsonStr = JSON.parse(item.jsonStr)
						
						if(item.type == 2) { //多选
							item.jsonStr.forEach(str => {
								str.optionsId = ''+str.optionsId;
							})
							let arr = item.answerQuestion.split(',');
							arr.forEach((a,i) => {
								arr[i] = ''+a;
							})
							item.ans = arr;
							if(this.explain) {
								item.ques = item.ans;
							}
							return;
						} else if(item.type == 5) {
							item.ansText = {
								text: '',
								imageList: []
							}
							
							if(this.explain) {
								item.ques = {
									text:item.analysisContent
								}
								
								return;
							}
							
							
						} else if(item.type == 4) {
							console.log(item.jsonStr)
							item.ques = []
							item.current = 0;
							let ansArr = []; 
							item.jsonStr.forEach((json,index) => {
								if(json.type == 1) {
									ansArr[index] = json.answerQuestion;
								} else if(json.type == 2) {
									json.optionsList.forEach(str => {
										str.optionsId = ''+str.optionsId;
									})
									let arr = json.answerQuestion.split(',');
									arr.forEach((a,i) => {
										arr[i] = ''+a;
									})
									ansArr[index] = arr
								} else if(json.type == 3) {
									ansArr[index] = json.answerQuestion;
								} else if(json.type == 5) {
									ansArr[index] = {
										text: '',
										imageList: []
									}
									json.ansText = {
										text: '',
										imageList: []
									}
								}
							})
							
							item.ans = ansArr
							if(this.explain) {
								item.ques = item.ans;
							}
							return;
							
						}
						
						item.ans = item.answerQuestion
						if(this.explain) {
							item.ques = item.ans;
						}
					} else {
						if(this.explain) {
							item.ques = item.ans;
						}
					}
					
				})
				
				this.questionList = res.data.rows;
				
			})
		},
		/**
		 * 获取对题列表
		 */
		examRecordRightList() {
			this.$api.examRecordRightList({
				examId:this.examId,
				goodsId:this.goodsId
			}).then(res => {
				
				res.data.rows.forEach((item,index) => { 
					if(typeof item.jsonStr == 'string') {
						item.jsonStr = JSON.parse(item.jsonStr)
						
						if(item.type == 2) { //多选
							item.jsonStr.forEach(str => {
								str.optionsId = ''+str.optionsId;
							})
							let arr = item.answerQuestion.split(',');
							arr.forEach((a,i) => {
								arr[i] = ''+a;
							})
							item.ans = arr;
							if(this.explain) {
								item.ques = item.ans;
							}
							return;
						} else if(item.type == 5) {
							item.ansText = {
								text: '',
								imageList: []
							}
							
							if(this.explain) {
								item.ques = {
									text:item.analysisContent
								}
								
								return;
							}
							
							
						} else if(item.type == 4) {
							console.log(item.jsonStr)
							item.ques = []
							item.current = 0;
							let ansArr = []; 
							item.jsonStr.forEach((json,index) => {
								if(json.type == 1) {
									ansArr[index] = json.answerQuestion;
								} else if(json.type == 2) {
									json.optionsList.forEach(str => {
										str.optionsId = ''+str.optionsId;
									})
									let arr = json.answerQuestion.split(',');
									arr.forEach((a,i) => {
										arr[i] = ''+a;
									})
									ansArr[index] = arr
								} else if(json.type == 3) {
									ansArr[index] = json.answerQuestion;
								} else if(json.type == 5) {
									ansArr[index] = {
										text: '',
										imageList: []
									}
									json.ansText = {
										text: '',
										imageList: []
									}
								}
							})
							
							item.ans = ansArr
							if(this.explain) {
								item.ques = item.ans;
							}
							return;
							
						}
						
						item.ans = item.answerQuestion
						if(this.explain) {
							item.ques = item.ans;
						}
					} else {
						if(this.explain) {
							item.ques = item.ans;
						}
					}
					
				})
				
				this.questionList = res.data.rows;
				
			})
		},
		/**
		 * @param {Object} state
		 * @param {Object} index
		 * 收藏
		 */
		collect(state, index) {
			if (!state) {
				this.$api
					.collectQuestion({
						examId: this.id,
						questionId: this.questionList[index].questionId,
						goodsId: this.goodsId || ''
					})
					.then(res => {
						if (res.data.code == 200) {
							this.$set(this.collectList, index, true);
							uni.showToast({
								title: '收藏成功',
								duration: 2000,
								icon: 'none'
							});
							this.getCollectInfo(index)
						}
					});
			} else {
				this.$api.deleteCollectQuestion(this.collectList[index].collectQuestionId).then(res => {
					if (res.data.code == 200) {
						this.$set(this.collectList, index, false);
						uni.showToast({
							title: '取消收藏成功',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			}
			return;
		},
		goodsQuestionList() {
			//继续答题
			if(this.isContinue || this.isHistory) {
				
				console.log(this.isHistory,"历史做题")
				console.log(this.isContinue,"继续做题")
				this.$api.examReport(this.recordId).then(res => {
					let json = JSON.parse(res.data.data.historyExamJson)
					
					this.questionList = json;
				})
			} else {  //解析
				this.$api.goodsQuestionList({
					examId:this.id
				}).then(res => {
					
					res.data.data.forEach((item,index) => { 
						if(typeof item.jsonStr == 'string') {
							item.jsonStr = JSON.parse(item.jsonStr)
							
							if(item.type == 2) { //多选
								item.jsonStr.forEach(str => {
									str.optionsId = ''+str.optionsId;
								})
								let arr = item.answerQuestion.split(',');
								arr.forEach((a,i) => {
									arr[i] = ''+a;
								})
								item.ans = arr;
								if(this.explain) {
									item.ques = item.ans;
								}
								return;
							} else if(item.type == 5) {
								item.ansText = {
									text: '',
									imageList: []
								}
								
								if(this.explain) {
									item.ques = {
										text:item.analysisContent
									}
									
									return;
								}
								
								
							} else if(item.type == 4) {
								console.log(item.jsonStr)
								item.ques = []
								item.current = 0;
								let ansArr = []; 
								item.jsonStr.forEach((json,index) => {
									if(json.type == 1) {
										ansArr[index] = json.answerQuestion;
									} else if(json.type == 2) {
										json.optionsList.forEach(str => {
											str.optionsId = ''+str.optionsId;
										})
										let arr = json.answerQuestion.split(',');
										arr.forEach((a,i) => {
											arr[i] = ''+a;
										})
										ansArr[index] = arr
									} else if(json.type == 3) {
										ansArr[index] = json.answerQuestion;
									} else if(json.type == 5) {
										ansArr[index] = {
											text: '',
											imageList: []
										}
										json.ansText = {
											text: '',
											imageList: []
										}
									}
								})
								
								item.ans = ansArr
								if(this.explain) {
									item.ques = item.ans;
								}
								return;
								
							}
							
							item.ans = item.answerQuestion
							if(this.explain) {
								item.ques = item.ans;
							}
						} else {
							if(this.explain) {
								item.ques = item.ans;
							}
						}
						
					})
					
					this.questionList = res.data.data;
					this.getCollectInfo(this.current);
					console.log(this.questionList)
					
				})
			}
			
		},
		
		/**
		 * @param {Object} current
		 * 获取收藏信息
		 */
		getCollectInfo(current) {
			this.$api
				.getCollectInfo({
					examId: this.id,
					questionId: this.questionList[current].questionId,
					goodsId: this.goodsId
				})
				.then(res => {
					if (res.data.code == 500) {
						this.$set(this.collectList, current, false);
					} else if (res.data.code == 200) {
						this.$set(this.collectList, current, res.data.data);
					}
				});
		},
		/**
		 * @param {Object} e单选点击
		 */
		radioSelect(optionsId,bindex) {
			if(this.questionList[bindex].ques) return;
			this.$set(this.questionList[bindex],'ques',optionsId)
			
		},
		examRecordEdit() {
			if(!this.isSubmit) {
				let number = 0;
				let score = 0;
				let doQuestionNum = 0;
				this.questionList.length && this.questionList.forEach((item,index) => {
					if(item.type == 1) {
						if(item.ques == item.ans) { 
							score += item.score;
							number++
						}
						if (item.ques) {
							doQuestionNum++;
						}
					} else if(item.type == 2) {
						let isRight = item.ques && item.ques.every((quesItem,quesIndex) => {
							return item.ques[quesIndex] == item.ans[quesIndex]
						})
						
						if(isRight) {
							score += item.score;
							number++
						}
						if (item.ques && item.ques.length) {
							doQuestionNum++;
						}
					} else if(item.type == 3) {
						if(item.ques == item.ans) {
							score += item.score;
							number++
						}
						if (item.ques) {
							doQuestionNum++;
						}
					} else if (item == 4) {
						if (item.ques.length) {
							doQuestionNum++;
						}
					} else if (item.type == 5) {
						if (item.ques) {
							doQuestionNum++;
						}
					}
				})
				
				this.$api.examRecordEdit({
					examId:this.id,
					goodsId:this.goodsId,
					recordId: this.recordId,
					rightQuestionNum:number,
					status:0,
					moduleExamId:this.moduleId || 0,
					chapterExamId:this.chapterId || 0,
					doQuestionNum: doQuestionNum,
					historyExamJson:JSON.stringify(this.questionList)
				}).then(res => {
					
				})
			}
		},
		
		/**
		 * @param {Object} e单选点击
		 */
		radioSelectChild(optionsId,ansIndex,bindex) {
			if(this.questionList[bindex].ques[ansIndex]) return;
			this.$set(this.questionList[bindex].ques,ansIndex,optionsId)
			
		},
		
		
		/**
		 * @param {Object} 多选点击
		 */
		checkboxSelect(optionsId,bindex,index) {
			
			this.$set(this.questionList[bindex].jsonStr[index],'checked',!this.questionList[bindex].jsonStr[index].checked)
		},
		
		/**
		 * @param {Object} 多选点击
		 */
		checkboxSelectChild(bindex,ansIndex,childIndex) {
			
			this.$set(this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex],'checked',!this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex].checked)
		},
		
		/**
		 * 提交数据
		 */
		submit() {
			let score = 0; //计算总分
			let reportStatus = 0;
			let number = 0;
			let allScore = 0;
			let passScore = 0;
			let doWrongQuestionIds = []; //错题和未做题id(客观题)
			let doQuestionIds = []; //做过的题目id
			let rightQuestionIds = []; //做对的题目id
			this.questionList.forEach((item,index) => {
				passScore = item.passScore
				if(item.type == 1) {
					if(item.ques == item.ans) { 
						score += item.score;
						number++
						rightQuestionIds.push(item.questionId)
					} else { //错误
						doWrongQuestionIds.push(item.questionId)
					}
					allScore += item.score
					if (item.ques) {
						doQuestionNum++;
						doQuestionIds.push(item.questionId)
					}
				} else if(item.type == 2) {
					let isRight = item.ans && item.ans.every((quesItem,quesIndex) => {
						if(item.ques) {
							return item.ques[quesIndex] == item.ans[quesIndex]
						} else {
							return false;
						}
					})
					
					if(isRight) {
						score += item.score;
						number++
						rightQuestionIds.push(item.questionId)
					} else {
						let checkboxScore = item.score;  //获取单题总分数
						item.ques.forEach((ques,quesIndex) => {
							//选错一个全扣
							if(item.ques) {
								if(item.ans.indexOf(item.ques[quesIndex]) == -1) {
									checkboxScore = 0;
								} 
							} else {
								checkboxScore = 0;
							}
						})
						console.log(checkboxScore)
						
						//没选错
						if(checkboxScore) {
							
							item.ans.forEach((ans,quesIndex) => {
								//漏选扣一部分
								if(item.ques) {
									
									if(item.ques.indexOf(item.ans[quesIndex]) == -1) {
										checkboxScore -= item.partScore;
									}
								} else {
									checkboxScore = 0;
								}
							})
						}
						
						
						if(checkboxScore <= 0) { //0分
							item.scoreResult = 0;
							doWrongQuestionIds.push(item.questionId)
						} else { //部分分
							number++;
							item.scoreResult = checkboxScore;
							score += checkboxScore;
							rightQuestionIds.push(item.questionId)
						}
					}
					allScore += item.score;
					if (item.ques && item.ques.length) {
						doQuestionNum++;
						doQuestionIds.push(item.questionId)
					}
				} else if(item.type == 3) {
					if(item.ques == item.ans) {
						score += item.score;
						number++
						rightQuestionIds.push(item.questionId)
					} else {
						doWrongQuestionIds.push(item.questionId)
					}
					allScore += item.score;
					if (item.ques) {
						doQuestionNum++;
						doQuestionIds.push(item.questionId)
					}
				} else if (item.type == 4) {
					if (item.ques && item.ques.length) {
						doQuestionNum++;
					}
				} else if (item.type == 5) {
					if (item.ques) {
						doQuestionNum++;
					}
				}
			})
			
			//大于60分及格
			if(score >= passScore) {
				reportStatus = 1
			} else {
				reportStatus = 0
			}
			
			this.$api.examRecordEdit({
				examId:this.id,
				goodsId:this.goodsId,
				reportStatus:reportStatus,
				totalScore:allScore,
				recordId: this.recordId,
				rightQuestionNum:number,
				status:1,
				moduleExamId:this.moduleId || 0,
				chapterExamId:this.chapterId || 0,
				doQuestionIds:doQuestionIds.join(','),
				rightQuestionIds:rightQuestionIds.join(','),
				doQuestionNum: doQuestionNum,
				performance: score,
				historyExamJson:JSON.stringify(this.questionList)
			}).then(res => {
				this.isSubmit = true;
				if(res.data.code == 200) {
					
					uni.showToast({
						title: '交卷成功',
						duration: 2000,
						icon:'none'
					});
					
					setTimeout(() => {
						uni.redirectTo({
							url:'/pages2/bank/question_report?id='+this.recordId+'&examId='+this.id
						})
					},2000)
				}
			})
		},
		
		/**
		 * @param {Object} 多选确认
		 */
		checkboxSubmit(bindex) {
			
			if(this.questionList[bindex].ques) return;
			let arr = [];
			this.questionList[bindex].jsonStr.forEach(item => {
				if(item.checked) {
					arr.push(item.optionsId)
				}
			})
			
			this.$set(this.questionList[bindex],'ques',arr)
			
		},
		
		/**
		 * @param {Object} 多选确认
		 */
		checkboxSubmitChild(bindex,ansIndex) {
			
			if(this.questionList[bindex].ques[ansIndex]) return;
			let arr = [];
			this.questionList[bindex].jsonStr[ansIndex].optionsList.forEach(item => {
				if(item.checked) {
					arr.push(item.optionsId)
				}
			})
			
			this.$set(this.questionList[bindex].ques,ansIndex,arr)
		},
		
		judgeSelect(index,bindex) {
			if(this.questionList[bindex].ques) return;
			this.$set(this.questionList[bindex],'ques',index+'')
			
		},
		
		judgeSelectChild(ansindex,childindex,bindex) {
			if(this.questionList[bindex].ques[ansindex]) return;
			this.$set(this.questionList[bindex].ques,ansindex,childindex+'')
		},
		
		openFooterTab() {
			this.show = true;
		},
		hideDialog() {
			this.showDialog = false
		},
		changeIndex(index) {
			this.current = index
		},
		
		swiperChange(e) {
			this.current = e.detail.current;
		},
		
		
		deleteImg(imgIndex,bankIndex) {
			
			
			this.questionList[bankIndex].ansText.imageList.splice(imgIndex,1)
		},
		
		
		deleteImgChild(imgIndex,bankIndex,ansIndex) {
			
			
			this.questionList[bankIndex].jsonStr[ansIndex].ansText.imageList.splice(imgIndex,1)
		},
		
		chooseImg(bankindex) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed', ], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: (res) => {
					let self = this;
					// console.log(JSON.stringify(res.tempFilePaths));
					let img = res.tempFilePaths[0];
					uni.getImageInfo({
						src: img,
						success: async res => {
							let canvasWidth = res.width; //图片原始长宽
							let canvasHeight = res.height;
							if (canvasWidth > 1000 || canvasHeight > 1000) {
								uni.compressImage({
									src: img,
									quality: 75,
									width: '50%',
									height: '50%',
									success: async rest => {
										const dir = await self.uploadFile(rest.tempFilePath, 0);
										this.questionList[bankindex].ansText.imageList.push(dir)
									} 
								});
							} else {
								const dir = await self.uploadFile(img, 0);
								this.questionList[bankindex].ansText.imageList.push(dir)
							}
						}
					});
				}
			})
		},
		
		chooseImgChild(bankindex,ansindex) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed', ], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: (res) => {
					let self = this;
					// console.log(JSON.stringify(res.tempFilePaths));
					let img = res.tempFilePaths[0];
					uni.getImageInfo({
						src: img,
						success: async res => {
							let canvasWidth = res.width; //图片原始长宽
							let canvasHeight = res.height;
							if (canvasWidth > 1000 || canvasHeight > 1000) {
								uni.compressImage({
									src: img,
									quality: 75,
									width: '50%',
									height: '50%',
									success: async rest => {
										const dir = await self.uploadFile(rest.tempFilePath, 0);
										this.questionList[bankindex].jsonStr[ansindex].ansText.imageList.push(dir)
									} 
								});
							} else {
								const dir = await self.uploadFile(img, 0);
								this.questionList[bankindex].jsonStr[ansindex].ansText.imageList.push(dir)
							}
						}
					});
				}
			})
		},
		
		uploadFile(options, int) {
			var self = this;
			return new Promise((resolve, reject) => {
				var data = {
					imageStatus: int
				};
				self.$api.aliyunpolicy(data).then(res => {
					console.log(res.data,6)
					if(res.data.code!=200){
						self.$method.showToast('签名错误'+JSON.stringify(res.data))
						return
					}
					var ossToken = res.data.data.resultContent;
					if(ossToken.host==null||ossToken.host==undefined){
						self.$method.showToast('上传路径报错'+JSON.stringify(res.data))
						return
					}
					uni.uploadFile({
						url: ossToken.host,
						name: 'file',
						filePath: options,
						fileType: 'image',
						header: {
							AuthorizationToken: 'WX ' + uni.getStorageSync('token')
						},
						formData: {
							key: ossToken.dir,
							OSSAccessKeyId: ossToken.accessid,
							policy: ossToken.policy,
							Signature: ossToken.signature,
							callback: ossToken.callback,
							success_action_status: 200
						},
						success: result => {
							if (result.statusCode === 200) {
								resolve(ossToken.dir);
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
								return;
							}
						},
						fail: error => {
							uni.showToast({
								title: '上传接口报错'+error,
								icon: 'none'
							});
							return;
						}
					});
				});
			});
		},
		submitAns(bankindex) {
				
			console.log(this.questionList[bankindex])
			if(!this.questionList[bankindex].ansText.text && !this.questionList[bankindex].ansText.imageList.length) {
				uni.showToast({
					title: '请输入内容或上传图片',
					duration: 2000,
					icon:'none'
				});
				return
			}
			
			this.$set(this.questionList[bankindex],'ques',{
				imageList:this.questionList[bankindex].ansText.imageList,
				text:this.questionList[bankindex].ansText.text,
			})
			
		},
		
		submitAnsChild(bankindex,ansindex) {
				
			if(!this.questionList[bankindex].jsonStr[ansindex].ansText.text && !this.questionList[bankindex].jsonStr[ansindex].ansText.imageList.length) {
				uni.showToast({
					title: '请输入内容或上传图片',
					duration: 2000,
					icon:'none'
				});
				return
			}
			
			this.$set(this.questionList[bankindex].ques,ansindex,{
				imageList:this.questionList[bankindex].jsonStr[ansindex].ansText.imageList,
				text:this.questionList[bankindex].jsonStr[ansindex].ansText.text,
			})
			
		},
		
		isRight(item,index) {
			//单选
			if(this.questionList[index].ques) {
				if(item.type == 1) {
					return this.questionList[index].ques == this.questionList[index].ans;
				//多选
				} else if(item.type == 2) {
					//每一项都相等
					return this.questionList[index].ques.every((item,i) => {
						console.log(item == this.questionList[index].ans[i])
						return item == this.questionList[index].ans[i];
					})
				//判断
				} else if(item.type == 3) {
					return this.questionList[index].ques == this.questionList[index].ans;
				} else {
					return false;
				}
			} else {
				return false;
			}
			
		},
		
		
		right(bankIndex,ansIndex,option) {
			if(this.questionList[bankIndex].ques[ansIndex] && this.questionList[bankIndex].ans[ansIndex]) {
				
				if((this.questionList[bankIndex].ques[ansIndex].indexOf(option.optionsId) != -1 ) || (this.questionList[bankIndex].ans[ansIndex].indexOf(option.optionsId) != -1)) {
					return true
				} else {
					return false;
				}
			} else {
				return false;
			}
			
		},
		
		wrong(bankIndex,ansIndex,option) {
			if(this.questionList[bankIndex].ques[ansIndex] && this.questionList[bankIndex].ans[ansIndex]) {
				
				if((this.questionList[bankIndex].ques[ansIndex].indexOf(option.optionsId) != -1 ) && (this.questionList[bankIndex].ans[ansIndex].indexOf(option.optionsId) == -1)) {
					return true;
				} else {
					return false;
				}
			} else {
				return false;
			}
		},
		
		isWrong(item,index) {
			if(this.questionList[index].ques) {
				//单选
				if(item.type == 1) {
					return this.questionList[index].ques != this.questionList[index].ans;
				//多选
				} else if(item.type == 2) {
					//每一项都相等
					return this.questionList[index].ques.some((item,i) => {
						return item != this.questionList[index].ans[i];
					})
				//判断
				} else if(item.type == 3) {
					return this.questionList[index].ques != this.questionList[index].ans;
				} else {
					return false;
				}
			} else {
				return false;
			}
			
		},
		
		tabSelect(index,bankindex) {
			
			this.$set(this.questionList[bankindex],'current',index)
			
		},
	}
};
</script>

<style lang="scss" scoped>
.questionBank {
	width:100%;
	height:100vh;
	display: flex;
	flex-direction: column;
}
.tabs-top {
	display: flex;
	justify-content: center;
	margin-bottom:10rpx;
}
.swiper {
	width:100%;
	flex:1;
}
.lisSty {
	margin-bottom: 16rpx;
	display: flex;
	
	.flex_auto {
		flex:1;
	}
}
.activeTI {
	vertical-align: middle;
	display: inline-block;
	border: 1rpx solid #eee;
	border-radius: 50rpx;
	height: 48rpx;
	line-height: 46rpx;
	text-align: center;
	width: 48rpx;
	margin-right: 15rpx;
	color: #666;
	font-size: 30rpx;
	
	
	&.right {
		color:#fff;
		background:green;
	}
	
	&.wrong {
		color:#fff;
		background:red;
	}
	
	&.checked {
		color:#fff;
		background:#007AFF;
	}
}

.submit_checkbox {
	margin:20rpx auto;
	width: 526rpx;
	height: 80rpx;
	background: rgba(0, 122, 255, 1);
	color:#fff;
	text-align: center;
	line-height: 80rpx;
	font-size: 30rpx;
	border-radius: 40rpx;
}
.titles {
	overflow: hidden;
	margin-bottom: 24rpx;
}
.titBox {
	padding: 41rpx 25rpx 24rpx 25rpx;
}

.titBox_title {
	padding: 21rpx;
}

.tabs {
	margin:10rpx;
	display: flex;
	.tab {
		margin: 0 4rpx;
		padding:10rpx 13rpx;
		text-align: center;
		color: #007aff;
		font-size: 28rpx;
		border-radius: 16rpx;
		background:#fff;
		
		&.current {
			color:#fff;
			background: #007AFF;
		}
	}
}

.ans {
	margin:8rpx 8rpx 8rpx;
	
	.ans_input {
	    border-radius: 16rpx;
		background:#fff;
		.top {
			border-bottom:1rpx solid #EEEEEE;
			padding: 16rpx;
			display: flex;
			align-items: center;
			
			.icon {
				margin-right:20rpx;
				width: 40rpx;
				height: 38rpx;
			}
			
			.progress {
				flex:1;
			}
			
			.submit {
				width: 168rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				color:#fff;
				font-size: 30rpx;
				background: #007AFF;
				border-radius: 24rpx;
				
				&.disabled {
					opacity: 0.6;
				}
			}
		}
		
		.textarea {
			textarea {
				width:100%;
				height:287rpx;
				padding:10rpx;
			}
		}
		
		.imgs {
			overflow: hidden;
			display: flex;
			width:100%;
			.img {
				width: 104rpx;
				height: 104rpx;
				border-radius: 8rpx;
				position:relative;
				margin:20rpx;
				
				
				text {
					position:absolute;
					right:-15rpx;
					top:-15rpx;
					width:30rpx;
					height:30rpx;
					text-align: center;
					line-height: 30rpx;
					color:#fff;
					background:red;
					border-radius:50%;
				}
				
				image {
					width:100%;
					height:100%;
				}
			}
		}
	}
	
	.ans_submit {
		padding:16rpx;
		border-radius: 16rpx;
		background:#fff;
		
		.imgs {
			overflow: hidden;
			display: flex;
			width:100%;
			.img {
				width: 104rpx;
				height: 104rpx;
				border-radius: 8rpx;
				position:relative;
				margin:20rpx;
				
				image {
					width:100%;
					height:100%;
				}
			}
		}
	}
}
.firstLetter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	.leftLetters {
		display: flex;
		align-items: center;
		width: 220rpx;
		.btnType {
			padding: 5rpx 10rpx;
			border: 1rpx solid #007aff;
			border-radius: 10rpx;
			background-color: rgba(0, 122, 255, 0.1);
			font-size: 28rpx;
			color: #007aff;
			margin-right: 15rpx;
		}
	}
}
.popupView {
	height: 100%;
	padding-bottom: 100rpx;
	.popupTops {
		height: 77rpx;
		border-bottom: 1rpx solid #eee;
		text-align: center;
		line-height: 77rpx;
		font-size: 24rpx;
		color: #999;
		position: relative;
		.topIcon {
			position: absolute;
			top: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 80rpx;
			height: 8rpx;
			background-color: #999;
			border-radius: 4rpx;
		}
	}
	.popupContent {
	}
}
.pageContent {
	position:relative;
	background-color: #eaeef1;
	height: 100%;
	overflow-y: scroll;
	padding-top: 8rpx;
	padding-bottom: 100rpx;
}
.pad_8 {
	background-color: #fff;
	margin: 0rpx 8rpx 8rpx;
	border-radius: 16rpx;
	
	&.no-margin {
		margin-top:-16rpx;
		border-radius: 0 0 16rpx 16rpx;
	}
}
.answer {
	height: 80rpx;
	line-height: 80rpx;
	padding: 0rpx 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #666;
	font-size: 30rpx;
}
.footer_btn {
	background-color: #fff;
	z-index: 10078;
	position: fixed;
	bottom: 0rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 98rpx;
	padding: 0rpx 38rpx;
	border-top: 1rpx solid #eee;
	
	.flex_center {
		flex:1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin:0 200rpx;
		font-size: 24rpx;
		color: #999999;
		
		
		.up-icon {
			margin-bottom:18rpx;
			width:100%;
			display: flex;
			justify-content: center;
			image {
				width:58rpx;
				height:21rpx;
			}
		}
	}
	
	
	.collect {
		visibility: hidden;
		width:100rpx;
	
		&.show {
			visibility: visible;
		}
		
		>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			image {
				width:32rpx;
				height:32rpx;
				margin-bottom:6rpx;
			}
			
			view {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
}
.boxSty {
	padding: 44rpx 41rpx 0rpx;
}
.liListSty {
	border:1rpx solid #EEEEEE;
	width: 88rpx;
	height: 88rpx;
	border-radius: 32rpx;
	text-align: center;
	line-height: 88rpx;
	color: #333;
	font-size: 32rpx;
	float: left;
	margin: 20rpx 23rpx;
	
	&.isRight {
		border:1rpx solid #EEEEEE;
		color:#fff;
		background: green;
	}
	
	&.isWrong {
		border:1rpx solid #EEEEEE;
		color:#fff;
		background: red;
	}
}
.answerInfos {
	padding: 25rpx 25rpx 25rpx 23rpx;
}
.answerTitle {
	margin-bottom: 28rpx;
	color: #666;
	font-size: 30rpx;
}
.answerContent {
	font-size: 30rpx;
	color: #666;
}

.textChild {
	display: inline-block;
	vertical-align: middle;
}

.dialog {
	position: fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.8);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 20000;
	
	.pointer {
		width:338rpx;
		height:240rpx;
	}
	
	.text {
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
	}
	
	.btn {
		width: 242rpx;
		height: 82rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 16rpx;
		text-align: center;
		line-height: 82rpx;
		margin:41rpx auto;
		color:#fff;
		font-size: 32rpx;
	}
}
</style>