saas_miniprogram/pages2/class/questionBank.vue

<template>
	<view class="questionBank">
		<uni-nav-bar class="navbar" @clickLeft="clickLeft" left-icon="back" :statusBar="true"
			:title="examData.examName"></uni-nav-bar>
		<swiper class="swiper" :current="current" @change="swiperChange">
			<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">{{
                countdown(lastTime)
              }}</view>
							<view class="leftLetters" @click="collect(collectList[bankIndex], bankIndex)"
								style="justify-content: flex-end">
								<image v-if="collectList[bankIndex]" src="/static/icon_star_sel.png"></image>
								<image v-else src="/static/icon_star.png"></image>
							</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"
									@click="radioSelect(item.optionsId, bankIndex)">
									<text :class="{
                      right:
                        bankType == 1 &&
                        (item.optionsId == bank.ques ||
                          item.optionsId == bank.ans),
                      wrong:
                        bankType == 1 &&
                        item.optionsId == bank.ques &&
                        bank.ques != bank.ans,
                      user_choose: bankType == 2 && item.optionsId == bank.ques,
                    }" class="activeTI">
										{{ ast[index] }}
									</text>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view>
						</view>
						<view v-if="bankType == 1 && bank.ques">
							<view class="pad_8 answer">
								<view>题目答案：{{ ast[bank.ans - 1] }}</view>
								<view>我的答案：{{ 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="bankType == 2 || (bankType == 1 && !bank.ques)" class="submit_checkbox"
								:class="{ disabled: !isCheckboxChecked(bank.jsonStr) }"
								@click="checkboxSubmit(bankIndex)">确认答案</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in bank.jsonStr" :key="index" class="lisSty"
									@click="checkboxSelect(item.optionsId, bankIndex, index)">
									<text :class="{
                      right:
                        bankType == 1 &&
                        (bank.ques.indexOf(item.optionsId) != -1 ||
                          bank.ans.indexOf(item.optionsId) != -1),
                      wrong:
                        bankType == 1 &&
                        bank.ques.indexOf(item.optionsId) != -1 &&
                        bank.ans.indexOf(item.optionsId) == -1,
                      user_choose: bankType == 2 && item.checked,
                    }" class="activeTI">
										{{ ast[index] }}
									</text>
									<view class="flex_auto">{{ item.content }}</view>
								</view>
							</view>
						</view>
						<view v-if="bankType == 1 && bank.ques">
							<view class="pad_8 answer">
								<view>
									题目答案：
									<text v-for="(ansItem, ansItemIndex) in bank.ans"
										:key="ansItemIndex">{{ ast[ansItem - 1] }}</text>
								</view>
								<view>
									我的答案：
									<text v-for="(quesItem, quesItemIndex) in bank.ques"
										:key="quesItemIndex">{{ 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>
									<view class="flex_auto">
										{{ item }}
									</view>
								</view>
							</view>
							<view v-if="bank.ques">
								<view v-for="(item, index) in judge" :key="index" class="lisSty"
									@click="judgeSelect(index, bankIndex)">
									<text :class="{
                      right:
                        bankType == 1 &&
                        (index == (bank.ques == 1 ? 0 : 1) ||
                          index != bank.ans),
                      wrong:
                        bankType == 1 &&
                        index == (bank.ques == 1 ? 0 : 1) &&
                        bank.ques != bank.ans,
                      user_choose:
                        bankType == 2 && index == (bank.ques == 1 ? 0 : 1),
                    }" class="activeTI">
										{{ ast[index] }}
									</text>
									<view class="flex_auto">
										{{ item }}
									</view>
								</view>
							</view>
						</view>
						<view v-if="bankType == 1 && bank.ques">
							<view class="pad_8 answer">
								<view>题目答案：{{ ast[bank.ans == 1 ? 0 : 1] }}</view>
								<view>我的答案：{{ ast[bank.ques == 1 ? 0 : 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 == 5">
						<view class="pad_8 titBox">
							<view class="ans">
								<view class="ans_input" v-if="
                    bankType == 2 ||
                    (bankType == 1 &&
                      (!bank.ques ||
                        (!bank.ques.imageList.length && !bank.ques.text)))
                  ">
									<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="
                    bankType == 1 &&
                    (bank.ques.text || bank.ques.imageList.length)
                  ">
									<view class="answerTitle">我的答案:</view>
									{{ bank.ques.text }}
									<view class="imgs">
										<image class="img" v-for="(ques, quesIndex) in bank.ques.imageList"
											:key="quesIndex" :src="$method.splitImgHost(ques, true)"></image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="
                bankType == 1 &&
                bank.ques &&
                (bank.ques.text || bank.ques.imageList.length)
              ">
							<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="leftLetters">
										<view class="btnType">
											<text>单选</text>
										</view>
									</view>
									<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>
											<view class="flex_auto">
												<rich-text class="textChild" :nodes="option.content"></rich-text>
											</view>
										</view>
									</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)
                      ">
											<text :class="{
                          right:
                            bankType == 1 &&
                            (option.optionsId == bank.ques[ansIndex] ||
                              option.optionsId == bank.ans[ansIndex]),
                          wrong:
                            bankType == 1 &&
                            option.optionsId == bank.ques[ansIndex] &&
                            bank.ques[ansIndex] != bank.ans[ansIndex],
                          user_choose:
                            bankType == 2 &&
                            option.optionsId == bank.ques[ansIndex],
                        }" class="activeTI">
												{{ ast[childIndex] }}
											</text>
											<view class="flex_auto">
												<rich-text :nodes="option.content"></rich-text>
											</view>
										</view>
									</view>
								</view>
								<view v-if="bankType == 1 && bank.ques[ansIndex]">
									<view class="pad_8 answer">
										<view>题目答案：{{ ast[bank.ans[ansIndex] - 1] }}</view>
										<view>我的答案：{{ 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="leftLetters">
										<view class="btnType">
											<text>多选</text>
										</view>
									</view>
									<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>
											<view class="flex_auto">
												<rich-text :nodes="option.content"></rich-text>
											</view>
										</view>
									</view>
									<view v-if="
                      bankType == 2 || (bankType == 1 && !bank.ques[ansIndex])
                    " class="submit_checkbox" :class="{
                      disabled: !isCheckboxChecked(ansItem.optionsList),
                    }" @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" @click="
                        checkboxSelectChild(bankIndex, ansIndex, childindex)
                      ">
											<text :class="{
                          right:
                            bankType == 1 && right(bankIndex, ansIndex, option),
                          wrong:
                            bankType == 1 && wrong(bankIndex, ansIndex, option),
                          user_choose: bankType == 2 && option.checked,
                        }" class="activeTI">
												{{ ast[childindex] }}
											</text>
											<view class="flex_auto">
												<rich-text :nodes="option.content"></rich-text>
											</view>
										</view>
									</view>
								</view>
								<view v-if="bankType == 1 && 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>
											我的答案：
											<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="leftLetters">
										<view class="btnType">
											<text>判断</text>
										</view>
									</view>
									<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>
											<view class="flex_auto">
												{{ option }}
											</view>
										</view>
									</view>
									<view v-if="bank.ques[ansIndex]">
										<view v-for="(option, childindex) in judge" :key="childindex" class="lisSty"
											@click="judgeSelectChild(ansIndex, childindex, bankIndex)">
											<text :class="{
                          right:
                            bankType == 1 &&
                            (childindex == (bank.ques[ansIndex] == 1 ? 0 : 1) ||
                              childindex != bank.ans[ansIndex]),
                          wrong:
                            bankType == 1 &&
                            childindex == (bank.ques[ansIndex] == 1 ? 0 : 1) &&
                            bank.ques[ansIndex] != bank.ans[ansIndex],
                          user_choose:
                            bankType == 2 &&
                            childindex == (bank.ques[ansIndex] == 1 ? 0 : 1),
                        }" class="activeTI">
												{{ ast[childindex] }}
											</text>
											<view class="flex_auto">
												{{ option }}
											</view>
										</view>
									</view>
								</view>
								<view v-if="bankType == 1 && bank.ques[ansIndex]">
									<view class="pad_8 answer">
										<view>题目答案：{{
                        ast[bank.ans[ansIndex] == 1 ? 0 : 1]
                      }}</view>
										<view>我的答案：{{
                        ast[bank.ques[ansIndex] == 1 ? 0 : 1]
                      }}</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 class="leftLetters">
										<view class="btnType">
											<text>简答</text>
										</view>
									</view>
									<view class="titles">
										<rich-text :nodes="ansItem.content"></rich-text>
									</view>
								</view>
								<view class="pad_8 titBox_title">
									<view class="ans">
										<view class="ans_input" v-if="
                        bankType == 2 ||
                        (bankType == 1 &&
                          (!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" @click="submitAnsChild(bankIndex, ansIndex)">确认答案
												</view>
											</view>
											<view class="textarea">
												<textarea v-model="ansItem.ansText.text"
													placeholder="在此输入答案"></textarea>
											</view>
											<view class="imgs">
												<view class="img" :key="imgIndex"
													v-for="(img, imgIndex) in ansItem.ansText.imageList">
													<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="bankType == 1 && bank.ques[ansIndex]">
											<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="bankType == 1 && 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>
			</swiper-item>
		</swiper>
		<bank-bom v-if="questionList.length" :questionList="questionList" :bankType="bankType" :current.sync="current"
			@submit="pdsubmit"></bank-bom>
		<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: bankType == 1 && isRight(item, index),
                  isWrong: bankType == 1 && isWrong(item, index),
                  isPart: bankType == 1 && isPart(item, index),
                  isOver: bankType == 1 && isOver(item, index),
                  check_ans: bankType == 2 && isCheck(item, index),
                }" class="liListSty">
								{{ index + 1 }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<view class="dialog" v-if="showDialog">
			<view class="text">左右滑动切换上下题</view>
			<view class="btn" @click="hideDialog">我知道了</view>
		</view>

		<view class="dialog-arrow" v-if="showArrow">
			<image class="pointer" src="/static/arrow-left.png" mode=""></image>
			<view class="text">您当前正在测试， 若想退出请点击左上角返回按钮。</view>
			<view class="btn" @click="showArrow = false">我知道了</view>
		</view>

		<view class="dialog_wrap" v-if="testOver">
			<view class="bg"></view>
			<view class="dialog">
				<view class="title">温馨提示</view>
				<view class="content">
					<view>您已完成所有题目，</view>
					<view>快去交卷吧！</view>
				</view>
				<view class="btns">
					<view class="btn" @click="noSubmit()">暂不交卷</view>
					<view class="btn active" @click="submitNow()">立即交卷</view>
				</view>
			</view>
		</view>

		<view class="dialog_wrap" v-if="isLastCount">
			<view class="bg"></view>
			<view class="dialog">
				<view class="title">温馨提示</view>
				<view class="content">
					<view>您当前正在测试，还剩{{ lastCount }}道题未完成，离开视为交卷</view>
				</view>
				<view class="btns">
					<view class="btn" @click="noLeave()">暂不离开</view>
					<view class="btn active" @click="leaveNow()">继续离开</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showpopups" mode="center" border-radius="24" height="439rpx" width="640rpx"
			:mask-close-able="false">
			<view class="popboxs">
				<view class="classTops">温馨提示</view>
				<view class="textStys">
					{{
            cgType === 7
              ? "您还未交卷,确定结束做题吗？"
              : cgType === 8
              ? `您还有${lastCount}道题未作答， 现在继续作答，还是下次继续？`
              : cgType === 6
              ? `您还有${lastCount}道题未作答， 您确定要交卷吗？`
              : cgType == 9
              ? `您已完成所有题目，快去交卷吧！`
              : ""
          }}
				</view>
				<view class="classFootsty" v-if="cgType === 6">
					<view class="btnsty btns1" @click="submit()">立即交卷</view>
					<view class="btnsty btns2" @click="showpopups = false">继续做题</view>
				</view>
				<view class="classFootsty" v-if="cgType === 7">
					<view class="btnsty btns1" @click="showpopups = false">下次继续</view>
					<view class="btnsty btns2" @click="backPages">结束做题</view>
				</view>
				<view class="classFootsty" v-if="cgType === 8">
					<view class="btnsty btns1" @click="leaveNow()">下次继续</view>
					<view class="btnsty btns2" @click="showpopups = false">继续作答</view>
				</view>
				<view class="classFootsty" v-if="cgType === 9">
					<view class="btnsty btns1" @click="showpopups = false">暂不交卷</view>
					<view class="btnsty btns2" @click="submit()">立即交卷</view>
				</view>
			</view>
		</u-popup>
		<!-- 节卷不需要拍照 -->
		<!-- :show="examType != 2 && photoPopup" -->
		<u-popup v-model="photoPopup" mode="bottom" border-radius="40" :mask-close-able="false">
			<!-- 播放前拍照start -->
			<!-- :mask-close-able="false" -->
			<!-- style="bottom: 0; position: fixed; width: 100%; z-index: 999" -->
			<view v-if="examType != 2 && photoPopup">
				<view class="photoBox">
					<view class="photoTop">
						<view class="sqzz" v-if="false">
							<u-icon name="close" color="#333333" size="30" @click="closePhoto"></u-icon>
						</view>
						<view class="centersq">请正视手机屏幕</view>
						<view class="sqzz"></view>
					</view>
					<view class="photoCenter">
						<view class="center_camera" v-if="photoPopup && isTaking">
							<!-- #ifdef MP-WEIXIN -->
							<camera device-position="front" flash="off" @error="error"
								style="width: 100%; height: 100%">
								<!-- 加人脸框 -->
								<cover-view class="head_take">
									<cover-view class="headTake_up color"></cover-view>
									<cover-view class="headTake_minddle">
										<cover-view class="min_left color"></cover-view>
										<cover-view class="min_img"></cover-view>
										<cover-view class="min_right color"></cover-view>
									</cover-view>
									<cover-view class="headTake_down color"></cover-view>
								</cover-view>
							</camera>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<video :controls="false" id="video" width="400" height="300" class="photo_v"></video>
							<view class="mask"></view>
							<!-- #endif -->
						</view>
						<view class="custom" v-if="!isTaking">
							<!-- #ifdef MP-WEIXIN -->
							<image :src="avatarUrl" mode=""></image>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<image :src="faceUrl" mode=""></image>
							<!-- #endif -->
						</view>
					</view>
					<view class="photoBoxbtns">
						<!-- <view class="btnResult" v-if="isTaking" @click="takePhoto"
              >拍照</view
            > -->
						<view v-if="isTaking" class="takePhoto_btn">
							<view style="width: 100rpx; height: 2rpx"></view>
							<view class="middle_btn" @click="takePhoto">
								<view class="square"></view>
							</view>
							<view class="rights" @click="takePhTips()">
								<text>拍照提示</text>
								<u-icon name="arrow-right" color="#FFFFFF" size="30"></u-icon>
							</view>
						</view>
						<view class="btnResult" v-if="!isTaking" @click="reTake">重拍</view>
						<view class="btnResult" v-if="!isTaking" @click="submitPhoto">确认</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 拍照提示 -->
		<popup-photo :popupPhotoShow.sync="popupPhotoShow" @takePhoto="toTakePhoto()"></popup-photo>
	</view>
</template>

<script>
	import PopupPhoto from "@/components/popup/index.vue";
	import BankBom from "../../components/common/BankBom.vue";
	import {
		goodsExamIsCanLearn,
		examClientCanLearn
	} from "@/utils/authority";
	export default {
		components: {
			PopupPhoto,
			BankBom,
		},
		data() {
			return {
				photoPopup: false,
				showpopups: false,
				id: "",
				current: 0,
				questionList: [],
				ast: ["A", "B", "C", "D", "E", "F", "G"],
				judge: ["正确", "错误"],
				ans: [],
				ques: [],
				show: false,
				showDialog: false,
				bankList: [],
				collectList: [],
				goodsId: "",
				recordId: "",
				isSubmit: false,
				lastTime: 0, //剩余考试时长
				allTimes: 0, //总考试时长
				timer: null,
				wrongList: [],
				bankType: 0, //试卷类型
				needBack: false, //是否是考试
				testOver: false,
				isLastCount: false, //是否有未答题目
				lastCount: 0, //剩余没有回答的题目数
				chapterId: 0,
				moduleId: 0,
				sectionId: 0,
				showArrow: false, //退出提示
				isFromVideo: "",
				gradeId: "",
				courseId: 0,
				cgType: 0, //对应设计稿弹窗编码,
				avatarUrl: "",
				ossAvatarUrl: "",
				goodsDetail: {},
				isTakePhoto: false,
				orderGoodsId: 0,
				isTaking: true, //是否正在拍照
				needPhoto: false, //是否需要拍照
				examType: 0, // 3-模块，1-章，2-节
				compareFaceData: 0, // 拍照匹配相似度
				learning: false, // 1合格，0不合格
				originShowDialog: false,
				uploadLock: false, //上传图片
				examData: {},
				popupPhotoShow: false,
				// h5
				faceUrl: "",
				simulateExamId: undefined,
				isBackVideo: "",
				isReach: false, //599重拍
			};
		},
		watch: {
			photoPopup(n) {
				// 拍照弹窗和showDialog同时出现时，先展示拍照弹窗再展示showDialog弹窗
				if (n) {
					this.showDialog && (this.showDialog = false);
				} else {
					this.originShowDialog && (this.showDialog = true);
				}
			},
		},
		async onLoad(option) {
			await goodsExamIsCanLearn(option.goodsid);
			this.examType = option.type;
			this.id = option.id;
			this.goodsId = option.goodsid || "";
			this.chapterId = option.chapterId;
			this.courseId = option.courseId;
			this.sectionId = option.sectionId;
			this.moduleId = option.moduleId;
			this.isFromVideo = option.isFromVideo || "";
			this.gradeId = option.gradeId || "";
			this.orderGoodsId = Number(option.orderGoodsId);
			let isBack = option.isback;
			this.isBackVideo = option.isBackVideo;
			let showDialog = uni.getStorageSync("showDialog");

			if (showDialog) {
				this.showDialog = false;
			} else {
				this.showDialog = true;
				this.originShowDialog = true;
				uni.setStorageSync("showDialog", "1");
			}
			//考试时候用手势或者返回键 被迫返回做题
			if (isBack) {
				let app = getApp();
				let globalData = app.globalData;

				for (var k in globalData.bankData) {
					this[k] = globalData.bankData[k];
				}
				this.showArrow = true;

				//需要拍没拍过直接弹出摄像头
				if (this.needPhoto && !this.isTakePhoto) {
					if (!this.learning && this.examType != 2) {
						if (uni.getStorageSync("tabkePhotoShow")) {
							// #ifdef MP-WEIXIN
							this.photoPopup = true;
							this.isTaking = true;
							// #endif
							this.avatarUrl = "";
							// #ifdef H5
							this.isHadCamera();
							// #endif
						} else {
							this.popupPhotoShow = true;
							uni.setStorageSync("tabkePhotoShow", 1); // 本地缓存用来判断是否已经弹出过弹窗
						}
					}
				} else {
					//不需要拍照
					if (this.lastTime) {
						this.timer = setInterval(() => {
							if (this.lastTime <= 0) {
								clearInterval(this.timer);
								uni.showToast({
									icon: "none",
									mask: true,
									title: "考试时间已到，系统将自动交卷",
									duration: 10000,
								});

								this.submit();
								return;
							}
							this.lastTime--;
						}, 1000);
					}
				}
			} else {
				await this.getGoodsDetail();
				this.needPhoto && (await this.getExamLearnStatus());
				// 请求题目列表
				await this.bankExam();
				this.goodsQuestionList();
			}
		},
		mounted() {},
		onUnload() {
			if (this.isSubmit) {
				clearInterval(this.timer);
				return;
			}

			if (this.needPhoto && !this.isTakePhoto) {
				return;
			}

			//考试试卷 阻止ios手势返回，自动跳回答题页
			if (this.needBack) {
				let app = getApp();
				app.globalData.bankData = this.$data;
				clearInterval(this.timer);
				uni.navigateTo({
					url: "/pages2/class/questionBank?id=" +
						this.id +
						"&goodsid=" +
						this.goodsId +
						"&isback=true&orderGoodsId=" +
						this.orderGoodsId,
				});
			} else {
				//点击返回按钮确认允许退出，交卷
				clearInterval(this.timer);
				this.examRecordEdit();
			}
		},
		computed: {
			doMode() {
				// 做题模式 1章卷 2随机练习 3模拟组卷
				return this.examData.simulateStatus ? 3 : undefined;
			},
		},
		methods: {
			getExamLearnStatus() {
				return this.$api
					.getExamLearnStatus({
						goodsId: this.goodsId,
						gradeId: this.gradeId,
						chapterId: this.chapterId,
						courseId: this.courseId,
						moduleId: this.moduleId,
						type: this.examType,
						examId: this.id,
					})
					.then((res) => {
						if (res.data.data) {
							//之前是否拍照过,拍过则不需要再拍
							this.needPhoto = false;
						}
						this.learning = res.data.data;
						return Promise.resolve();
					});
			},
			getGoodsDetail() {
				return new Promise((resolve) => {
					let self = this;
					this.$api.goodsDetail(this.goodsId).then((res) => {
						self.goodsDetail = res.data.data;
						if (self.goodsDetail.goodsPhotoExamConfig) {
							let goodsPhotoExamConfig = JSON.parse(
								self.goodsDetail.goodsPhotoExamConfig
							);
							if (goodsPhotoExamConfig.photograph > 0) {
								self.needPhoto = true;
							}
						}
						if (res.data.data.erJianErZao) {
							self.needPhoto = true;
						}

						resolve();
					});
				});
			},
			reTake() {
				this.isTaking = true;
				// #ifdef H5
				this.faceUrl = "";
				this.getUserMedia({
					video: {
						width: 400,
						height: 300,
					},
				});
				// #endif
			},
			postStudyRecord() {
				let self = this;
				let data = {
					photo: self.ossAvatarUrl,
					recordId: self.recordId,
				};
				if (this.ossAvatarUrl) {
					data.similarity = this.compareFaceData; // 相似度
				}
				// console.log(data, "拍照提交");
				this.$api.studyExamPhotoRecord(data).then((res) => {
					// console.log(res, "拍照提交结果");
					if (res.data.code != 200) {
						uni.showToast({
							icon: "none",
							mask: true,
							title: res.data.msg,
							duration: 10000,
						});
						return;
					}

					self.ossAvatarUrl = "";
					self.isTakePhoto = true;
					if (this.isReach) {
						return this.submit();
					}
					//拍照
					if (this.lastTime) {
						this.timer = setInterval(() => {
							if (this.lastTime <= 0) {
								clearInterval(this.timer);
								uni.showToast({
									icon: "none",
									mask: true,
									title: "考试时间已到，系统将自动交卷",
									duration: 10000,
								});

								this.submit();
								return;
							}
							this.lastTime--;
						}, 1000);
					}
				});
			},
			uploadFile(options, int) {
				var self = this;
				return new Promise((resolve, reject) => {
					var data = {
						imageStatus: int,
						gradeId: this.gradeId,
					};
					self.$api.aliyunpolicy(data).then((res) => {
						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;
						}
						let filePath = "";
						// #ifdef H5
						var localData = options; //dataUrl为base64位
						let base = atob(localData.substring(localData.indexOf(",") +
							1)); // base是将base64编码解码，去掉data:image/png;base64部分
						let length = base.length;
						let url = new Uint8Array(length);
						while (length--) {
							url[length] = base.charCodeAt(length);
						}
						filePath = new File([url], "a.jpg", {
							type: "image/jpg",
						});
						console.log("filePath:", filePath);

						uni.uploadFile({
							url: ossToken.host,
							name: "file",
							file: filePath,
							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) => {
								this.$u.toast("上传成功");
								this.ossAvatarUrl = ossToken.dir;
								console.log("h5上传成功--:", this.ossAvatarUrl);
								resolve();
							},
							fail: (error) => {
								console.log("h5上传失败:", error);
								uni.showToast({
									title: "上传接口报错，请重新拍照上传" + error,
									icon: "none",
								});
								this.openPhoto();
								return;
							},
						});
						// #endif
						// #ifdef MP-WEIXIN
						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) {
								self.ossAvatarUrl = ossToken.dir;
								resolve(ossToken.dir);
								// } else {
								//   uni.showToast({
								//     title: "上传失败",
								//     icon: "none",
								//   });
								//   return;
								// }
							},
							fail: (error) => {
								uni.showToast({
									title: "上传接口报错" + error,
									icon: "none",
								});
								this.uploadLock = false;
								this.openPhoto();
								return;
							},
						});
						// #endif
					});
				});
			},
			imageInfos() {
				var self = this;
				return new Promise(async (resolve, reject) => {
					// #ifdef MP-WEIXIN
					uni.getImageInfo({
						src: self.avatarUrl,
						success: async (res) => {
							let canvasWidth = res.width; //图片原始长宽
							let canvasHeight = res.height;
							if (canvasWidth > 2000 || canvasHeight > 2000) {
								uni.compressImage({
									src: self.avatarUrl,
									quality: 75,
									width: "35%",
									height: "35%",
									success: async (rest) => {
										const waitUpload = await self.uploadFile(
											rest.tempFilePath,
											0
										);
										resolve(waitUpload);
									},
								});
							} else if (canvasWidth > 1000 || canvasHeight > 1000) {
								uni.compressImage({
									src: self.avatarUrl,
									quality: 75,
									width: "50%",
									height: "50%",
									success: async (rest) => {
										const waitUpload = await self.uploadFile(
											rest.tempFilePath,
											0
										);
										resolve(waitUpload);
									},
								});
							} else {
								console.log("无需压缩");
								const waitUpload = await self.uploadFile(self.avatarUrl, 0);
								resolve(waitUpload);
							}
						},
					});
					// #endif
					// #ifdef H5
					const waitUpload = await this.uploadFile(this.faceUrl, 0);
					resolve(waitUpload);
					// #endif
				});
			},
			/**
			 * 人脸匹配
			 */
			faceRecognition() {
				return new Promise((resolve) => {
					// #ifdef MP-WEIXIN
					let fileSystem = uni.getFileSystemManager();
					fileSystem.readFile({
						filePath: `${this.avatarUrl}`,
						encoding: "base64",
						position: 0,
						success: (res) => {
							let base64 = "data:image/jpg;base64," + res.data;

							console.log("试卷-base64Data人脸识别参数：", {
								imageA: base64,
								orderGoodsId: this.orderGoodsId,
								gradeId: this.gradeId,
							});
							this.CompareFace(base64, resolve);
						},
						fail(err) {
							console.error(err, "err");
						},
					});
					// #endif
					// #ifdef H5
					this.CompareFace(this.faceUrl, resolve);
					// #endif
				});
			},
			CompareFace(url, resolve) {
				let timer = setTimeout(() => {
					uni.showToast({
						icon: "none",
						title: "拍照超时，请重新拍照",
						duration: 2000,
						success: () => {
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						},
					});
				}, 10 * 1000);

				this.$api
					.faceCertificationCompareFace({
						imageA: url,
						orderGoodsId: this.orderGoodsId,
						gradeId: this.gradeId,
					})
					.then((res) => {
						clearTimeout(timer);
						console.log(res, "人脸识别成功res");
						resolve(res.data.data);
					})
					.catch((err) => {
						clearTimeout(timer);
						// 当前网络延迟，
						console.log("人脸识别错误:", err);
						uni.showModal({
							content: "当前网络延迟",
							showCancel: false,
							success: (resultst) => {
								if (resultst.confirm) {
									uni.navigateBack();
								}
							},
						});
					});
			},
			toTakePhoto() {
				this.popupPhotoShow = false;
				this.openPhoto();
			},
			takePhTips() {
				this.popupPhotoShow = true;
				this.isTaking = false;
				this.photoPopup = false;
			},
			// 确认拍照
			async submitPhoto() {
				if (this.uploadLock) {
					return;
				}
				this.uploadLock = true;

				let compareFaceData = await this.faceRecognition();
				this.compareFaceData = compareFaceData;
				if (compareFaceData >= 80) {
					const waitYS = await this.imageInfos();
					this.postStudyRecord(); //提交记录
					this.photoPopup = false;
				} else {
					uni.showToast({
						title: "人脸匹配不通过，请重新拍照上传",
						icon: "none",
						duration: 2000,
					});

					setTimeout(() => {
						this.uploadLock = false;
						this.openPhoto();
					}, 2000);
				}
			},
			//拍照
			openPhoto() {
				console.log("开始拍照");
				// this.enableAutoRotation = false;
				// #ifdef MP-WEIXIN
				this.photoPopup = true;
				this.isTaking = true;
				uni.setKeepScreenOn({
					keepScreenOn: true,
				});
				uni.authorize({
					scope: "scope.camera",
					success() {},
				});
				// #endif
				// #ifdef H5
				this.isHadCamera();
				// #endif
			},
			isHadCamera() {
				if (
					(window.navigator.mediaDevices &&
						window.navigator.mediaDevices.getUserMedia) ||
					window.navigator.getUserMedia ||
					window.navigator.webkitGetUserMedia ||
					window.navigator.mozGetUserMedia
				) {
					console.log("getUserMedia----");
					// 调用用户媒体设备, 访问摄像头
					this.getUserMedia({
							video: {
								width: 400,
								height: 300,
							},
						},
						this.photographSuccess,
						this.photographError
					);
				} else {
					console.log("1111没有摄像");
					this.photographError();
				}
			},
			//确认拍照
			takePhoto() {
				// #ifdef MP-WEIXIN
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: "high",
					success: (res) => {
						console.log(res.tempImagePath);
						this.avatarUrl = res.tempImagePath;
						// self.submitPhoto();
						this.isTaking = false;
					},
					fail: (err) => {
						console.log(err);
					},
				});
				// #endif
				// #ifdef H5
				const canvas = document.createElement("canvas");
				canvas.width = 400;
				canvas.height = 400;
				const context = canvas.getContext("2d");
				const video = document.querySelector("video");
				context.drawImage(video, 0, 0, 400, 400);
				this.faceUrl = canvas.toDataURL("image/png");
				this.isTaking = false;
				// #endif
			},
			/**
			 * 是否有上传图片
			 */
			hasImgs(bank) {
				return bank.ansText.imageList.length == 0;
			},
			/**
			 * 获取试卷类型2考试,1练习
			 */
			bankExam() {
				return this.$api.bankExam(this.id).then((res) => {
					const {
						examLimitClient,
						doType
					} = res.data.data;
					if (!examClientCanLearn(examLimitClient)) {
						return;
					}
					this.bankType = doType;
					this.examData = res.data.data;
					this.allTimes = this.examData.answerTime * 60;
					this.lastTime =
						this.examData.answerTime && this.examData.answerTime * 60;
					if (this.bankType == 2) {
						this.needBack = true;
					}
					return Promise.resolve();
				});
			},
			/**
			 * 点击后退按钮
			 */
			clickLeft() {
				//需要拍照没有拍直接返回
				if (this.needPhoto && !this.isTakePhoto) {
					this.isSubmit = true;
					uni.navigateBack({
						delta: 1,
					});
					return;
				}
				if (this.bankType == 1) {
					let ansCount = this.questionOverNum(); //已答题数
					this.lastCount = this.questionList.length - ansCount; //统计未答完的题数

					//所有题目答完
					if (this.lastCount == 0) {
						// this.testOver = true;
						this.cgType = 7;
						//未答完
					} else {
						this.cgType = 8;
						// this.isLastCount = true;
					}
					this.showpopups = true;
				} else if (this.bankType == 2) {
					let ansCount = this.questionOverNum(); //已答题数
					this.lastCount = this.questionList.length - ansCount; //统计未答完的题数

					//所有题目答完
					if (this.lastCount == 0) {
						this.testOver = true;
						//未答完
					} else {
						this.isLastCount = true;
					}
				}
			},
			/**
			 * 返回上一页
			 */
			backPages() {
				this.needBack = false;
				uni.navigateBack({
					delta: 1,
				});
			},
			/**
			 * 获取已经回答的题目数
			 * hasSpecail (是否包含简答和案例)
			 */
			questionOverNum(hasSpecail) {
				let count = 0;
				this.questionList.forEach((item) => {
					if (item.type == 1 || item.type == 2 || item.type == 3) {
						if (item.ques) {
							count++;
						}
					} else if (item.type == 4) {
						//案例题
						if (hasSpecail) {
							let isOver = item.jsonStr.every((jsonItem, indexs) => {
								if (
									jsonItem.type == 1 ||
									jsonItem.type == 2 ||
									jsonItem.type == 3
								) {
									if (item.ques[indexs]) {
										return true;
									} else {
										return false;
									}
								} else if (jsonItem.type == 5) {
									console.log(jsonItem, 111);
									if (
										item.ques[indexs] &&
										(item.ques[indexs].text.length ||
											item.ques[indexs].imageList.length)
									) {
										return true;
									} else {
										return false;
									}
								}
							});

							if (isOver) {
								count++;
								console.log(item, 444);
							}
						}
					} else if (item.type == 5) {
						//简答题
						if (hasSpecail) {
							if (
								item.ques &&
								(item.ques.text.length || item.ques.imageList.length)
							) {
								count++;
							}
						}
					}
				});

				return count;
			},
			/**
			 * 是否做完所有题目
			 */
			isDoOver() {
				let questionOverNum = this.questionOverNum(true); //获取已经回答的题目数(包括简答和案例)
				if (this.questionList.length == questionOverNum) {
					//全部做完弹窗
					this.cgType = 9;
					this.showpopups = true;
				}
			},
			/**
			 * 暂不交卷
			 */
			noSubmit() {
				//设为允许退出页面
				this.needBack = false;
				uni.navigateBack({
					delta: 1,
				});
			},
			/**
			 * 不离开
			 */
			noLeave() {
				this.isLastCount = false;
			},
			/**
			 * 立即离开并交卷
			 */
			leaveNow() {
				this.isSubmit = true;
				uni.navigateBack({
					delta: 1,
				});

				//需要拍照没有拍，返回不扣次数
				if (this.needPhoto && !this.isTakePhoto) {
					return;
				}
				this.submit("leaveNow");
			},
			/**
			 * 立即交卷
			 */
			submitNow() {
				this.showpopups = false;
				this.needBack = false;
				this.submit();
			},
			/**
			 * 离开页面统计回答正确题数
			 */
			examRecordEdit() {
				if (!this.isSubmit) {
					this.submit("leave");
				}
			},

			/**
			 * @param {Object} second倒计时过滤器
			 */
			countdown(second) {
				if (second) {
					let h = parseInt((second / 60 / 60) % 24); //   计算小时
					let m = parseInt((second / 60) % 60); //   计算分数
					let s = parseInt(second % 60); //   计算当前秒数

					if (h < 10) h = "0" + h;
					if (m < 10) m = "0" + m;
					if (s < 10) s = "0" + s;

					return h + ":" + m + ":" + s;
				} else {
					return "";
				}
			},
			noListTip(content = "该试卷暂无题目") {
				this.hideDialog();
				uni.showModal({
					showCancel: false,
					content,
					success: (k) => {
						if (k.confirm) {
							this.isSubmit = true;
							uni.navigateBack();
						}
					},
				});
			},
			/**
			 * 请求题目列表
			 */
			goodsQuestionList() {
				this.$api[
					this.doMode == 3 ? "goodsRandomQuestionList" : "goodsQuestionList"
				]({
					examId: this.id,
					goodsId: this.goodsId,
					orderGoodsId: this.orderGoodsId,
					from: 2,
				}).then(async (res) => {
					if (res.data.code == 500) {
						return this.noListTip("你已完成所有题目");
					}
					let data = res.data.data;
					if (this.doMode == 3) {
						this.simulateExamId = data.simulateExamId;
						data = data.questionList;
					}
					if (!data.length) {
						return this.noListTip();
					}
					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;
								item.analysisContent &&
									(item.analysisContent = item.analysisContent.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									));
								item.content &&
									(item.content = item.content.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									));
								return;
							} else if (item.type == 5) {
								//简答题
								item.ansText = {
									text: "",
									imageList: [],
								};

								item.ques = {
									text: "",
									imageList: [],
								};
								item.analysisContent &&
									(item.analysisContent = item.analysisContent.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									));
								item.content &&
									(item.content = item.content.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									));
							} 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;
										json.content &&
											(json.content = json.content.replace(
												/<img/gi,
												'<img style="max-width:100%;"'
											));
									} 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;
										json.content &&
											(json.content = json.content.replace(
												/<img/gi,
												'<img style="max-width:100%;"'
											));
									} else if (json.type == 3) {
										ansArr[index] = json.answerQuestion;
										json.content &&
											(json.content = json.content.replace(
												/<img/gi,
												'<img style="max-width:100%;"'
											));
									} else if (json.type == 5) {
										ansArr[index] = {
											text: "",
											imageList: [],
										};
										json.ansText = {
											text: "",
											imageList: [],
										};
										json.content &&
											(json.content = json.content.replace(
												/<img/gi,
												'<img style="max-width:100%;"'
											));
									}
								});
								item.analysisContent &&
									(item.analysisContent = item.analysisContent.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									));
								item.content &&
									(item.content = item.content.replace(
										/<img/gi,
										'<img style="max-width:100%;"'
									));
								item.ans = ansArr;
								return;
							}

							item.content &&
								(item.content = item.content.replace(
									/<img/gi,
									'<img style="max-width:100%;"'
								));
							item.ans = item.answerQuestion;
						}
					});

					this.questionList = data;
					this.lastCount = this.questionList.length;
					this.getCollectInfo(this.current);
					await this.examRecord();
				});
			},
			/**
			 * 记录总题数,获取recordId
			 * hasSpecial (是否包含简答和案例) true 包含  false 不包含
			 */
			examRecord(hasSpecial) {
				return new Promise((resolve) => {
					let questionList = 0;
					// if(!hasSpecial) {
					this.questionList.forEach((item, index) => {
						if (item.type == 1 || item.type == 2 || item.type == 3) {
							questionList++;
						}
					});
					// } else {
					// 	questionList = this.questionList.length;
					// }
					// #ifdef MP-WEIXIN
					let fromPlat = 1
					// #endif
					// #ifdef H5
					let fromPlat = 3
					// #endif
					this.$api
						.bankRecord({
							fromPlat: fromPlat, //"来源平台 1小程序 2PC网站 3h5"
							courseId: this.courseId,
							// chapterExamId: this.chapterId || 0,
							// moduleExamId: this.moduleId || 0,
							chapterId: this.chapterId || 0,
							moduleId: this.moduleId || 0,
							sectionId: this.sectionId || 0,
							examId: this.id,
							goodsId: this.goodsId,
							orderGoodsId: this.orderGoodsId,
							gradeId: this.gradeId,
							totalQuestionNum: questionList,
							allQuestionNum: this.questionList.length,
							type: this.examType,
							simulateExamId: this.simulateExamId,
							doMode: this.doMode,
						})
						.then((res) => {
							this.recordId = res.data.data;

							if (this.needPhoto) {
								if (!this.learning && this.examType != 2) {
									if (uni.getStorageSync("tabkePhotoShow")) {
										// #ifdef MP-WEIXIN
										this.photoPopup = true; //拍照
										this.isTaking = true;
										// #endif
										// #ifdef H5
										this.isHadCamera();
										// #endif
									} else {
										this.popupPhotoShow = true;
										uni.setStorageSync("tabkePhotoShow", 1); // 本地缓存用来判断是否已经弹出过弹窗
									}
								}
							} else {
								if (this.lastTime) {
									this.timer = setInterval(() => {
										if (this.lastTime <= 0) {
											clearInterval(this.timer);
											uni.showToast({
												icon: "none",
												mask: true,
												title: "考试时间已到，系统将自动交卷",
												duration: 10000,
											});

											this.submit();
											return;
										}
										this.lastTime--;
									}, 1000);
								}

								resolve();
							}
						});
				});
			},
			/**
			 * @param {Object} e单选点击
			 */
			radioSelect(optionsId, bindex) {
				// if (this.questionList[bindex].ques) return;
				if (this.questionList[bindex].ques && this.bankType == 1) {
					return;
				}
				this.$set(this.questionList[bindex], "ques", optionsId);
				// if ((bindex + 1) < this.questionList.length) {
				//   this.current = bindex + 1
				// }
				this.isDoOver();
			},

			/**
			 * @param {Object} e案例单选点击
			 */
			radioSelectChild(optionsId, ansIndex, bindex) {
				// if (this.questionList[bindex].ques[ansIndex]) return;
				if (this.questionList[bindex].ques[ansIndex] && this.bankType == 1) {
					return;
				}
				this.$set(this.questionList[bindex].ques, ansIndex, optionsId);
				this.isDoOver();
			},

			/**
			 * @param {Object} 多选点击
			 */
			checkboxSelect(optionsId, bindex, index) {
				if (this.questionList[bindex].ques && this.bankType == 1) {
					return;
				}
				this.$set(
					this.questionList[bindex].jsonStr[index],
					"checked",
					!this.questionList[bindex].jsonStr[index].checked
				);
			},

			/**
			 * @param {Object} 案例多选点击
			 */
			checkboxSelectChild(bindex, ansIndex, childIndex) {
				if (this.questionList[bindex].ques[ansIndex] && this.bankType == 1) {
					return;
				}
				this.$set(
					this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex],
					"checked",
					!this.questionList[bindex].jsonStr[ansIndex].optionsList[childIndex]
					.checked
				);
			},

			isCheckboxChecked(arr) {
				return arr.some((item) => {
					if (item.checked) {
						return true;
					}
				});
			},

			/**
			 * @param {Object} 多选确认
			 */
			checkboxSubmit(bindex) {
				// if (this.questionList[bindex].ques) return;
				if (this.questionList[bindex].ques && this.bankType == 1) {
					return;
				}
				let arr = [];
				this.questionList[bindex].jsonStr.forEach((item) => {
					if (item.checked) {
						arr.push(item.optionsId);
					}
				});

				if (!arr.length) {
					delete this.questionList[bindex].ques;
					uni.showToast({
						title: "请选择答案",
						icon: "none",
					});
					return;
				}

				this.$set(this.questionList[bindex], "ques", arr);
				this.$u.toast("已确认答案");
				this.isDoOver();

				// 切换下一题
				if (
					this.bankType != 1 &&
					this.cgType != 9 &&
					bindex != this.questionList.length - 1
				) {
					this.current = bindex + 1;
					this.getCollectInfo(this.current);
				}
			},

			/**
			 * @param {Object} 案例多选确认
			 */
			checkboxSubmitChild(bindex, ansIndex) {
				// if (this.questionList[bindex].ques[ansIndex]) return;
				if (this.questionList[bindex].ques[ansIndex] && this.bankType == 1) {
					return;
				}
				let arr = [];
				this.questionList[bindex].jsonStr[ansIndex].optionsList.forEach(
					(item) => {
						if (item.checked) {
							arr.push(item.optionsId);
						}
					}
				);

				if (!arr.length) {
					delete this.questionList[bindex].ques[ansIndex];
					uni.showToast({
						title: "请选择答案",
						icon: "none",
					});
					return;
				}

				this.$set(this.questionList[bindex].ques, ansIndex, arr);
				this.$u.toast("已确认答案");
				this.isDoOver();
				// 切换下一题
				if (
					this.bankType != 1 &&
					this.cgType != 9 &&
					ansIndex != this.questionList[bindex].ques.length - 1
				) {
					this.questionList[bindex].current += 1;
				}
			},

			/**
			 * @param {Object} index
			 * @param {Object} bindex
			 * 判断题
			 */
			judgeSelect(index, bindex) {
				// if (this.questionList[bindex].ques) return;
				if (this.questionList[bindex].ques && this.bankType == 1) {
					return;
				}
				this.$set(this.questionList[bindex], "ques", index == 0 ? "1" : "0");
				this.isDoOver();
			},

			/**
			 * @param {Object} ansindex
			 * @param {Object} childindex
			 * @param {Object} bindex
			 * 案例判断题
			 */
			judgeSelectChild(ansindex, childindex, bindex) {
				// if (this.questionList[bindex].ques[ansindex]) return;
				if (this.questionList[bindex].ques[ansindex] && this.bankType == 1) {
					return;
				}
				this.$set(
					this.questionList[bindex].ques,
					ansindex,
					childindex == 0 ? "1" : "0"
				);
				this.isDoOver();
			},

			openFooterTab() {
				this.show = true;
			},
			hideDialog() {
				this.showDialog = false;
			},
			changeIndex(index) {
				this.current = index;
			},

			swiperChange(e) {
				this.current = e.detail.current;
				this.getCollectInfo(this.current);
			},
			/**
			 * @param {Object} current
			 * 获取收藏信息
			 */
			getCollectInfo(current) {
				this.$api
					.getCollectInfo({
						examId: this.id,
						questionId: this.questionList[current].questionId,
						goodsId: this.goodsId,
						orderGoodsId: this.orderGoodsId,
					})
					.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} state
			 * @param {Object} index
			 * 收藏
			 */
			collect(state, index) {
				if (!state) {
					this.$api
						.collectQuestion({
							examId: this.id,
							questionId: this.questionList[index].questionId,
							goodsId: this.goodsId || "",
							orderGoodsId: this.orderGoodsId,
							doMode: this.doMode,
						})
						.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;
			},
			pdsubmit() {
				let ansCount = this.questionOverNum(true); //已答题数
				this.lastCount = this.questionList.length - ansCount; //统计未答完的题数
				//没有答完
				if (this.lastCount !== 0) {
					this.cgType = 6;
					this.showpopups = true;
					return;
				}

				if (this.bankType == 2) {
					if (this.lastTime > 0) {
						let lastTime = this.countdown(this.lastTime);
						uni.showModal({
							title: "提示",
							content: `时间还剩余${lastTime},确定交卷吗?`,
							confirmText: "交卷",
							cancelText: "继续答题",
							success: (res) => {
								if (res.confirm) {
									//确定
									this.submit();
								} else {
									//取消
								}
							},
						});
						return;
					}
				}

				this.submit();
			},
			/**
			 * 交卷
			 */
			submit(typesubmit) {
				let form = this.$method.calculateScore(this.questionList);
				clearInterval(this.timer);
				//交卷
				this.$api
					.bankRecordEdit({
						moduleId: this.moduleId || 0,
						chapterId: this.chapterId || 0,
						sectionId: this.sectionId || 0,
						gradeId: this.gradeId,
						examId: this.id,
						goodsId: this.goodsId,
						orderGoodsId: this.orderGoodsId,
						recordId: this.recordId,
						courseId: this.courseId,
						status: 1,
						type: this.examType,
						examTime: parseInt(this.allTimes),
						doTime: parseInt(this.allTimes) - parseInt(this.lastTime),
						...form,
					})
					.then((res) => {
						this.isSubmit = true;
						this.isReach = false;
						if (res.data.code == 200) {
							uni.showToast({
								title: "交卷成功",
								duration: 1000,
								mask: true,
								icon: "none",
							});
							if (!typesubmit) {
								console.log("跳转----");
								setTimeout(() => {
									uni.redirectTo({
										url: "/pages2/class/question_report?recordId=" +
											this.recordId +
											"&type=" +
											this.examType +
											"&orderGoodsId=" +
											this.orderGoodsId +
											"&isBackVideo=" +
											this.isBackVideo +
											"&bankType=" +
											this.bankType,
									});
								}, 1000);
							}
						} else if (res.data.code == 559) {
							this.isReach = true;
							this.uploadLock = false;
							this.openPhoto();
						}
					});

				//错题集id提交（客观题）
				this.$api
					.examWrongRecord({
						moduleId: this.moduleId || 0,
						chapterId: this.chapterId || 0,
						sectionId: this.sectionId || 0,
						gradeId: this.gradeId,
						courseId: this.courseId,
						examId: this.id,
						goodsId: this.goodsId,
						orderGoodsId: this.orderGoodsId,
						questionIds: form.questionIds,
						recordId: this.recordId,
						type: 2, // 视频课程的传2
						doMode: this.doMode,
					})
					.then((res) => {})
					.catch((err) => {});
			},

			/**
			 * @param {Object} imgIndex
			 * @param {Object} bankIndex
			 * 删除简答图片
			 */
			deleteImg(imgIndex, bankIndex) {
				this.questionList[bankIndex].ansText.imageList.splice(imgIndex, 1);
			},

			/**
			 * @param {Object} imgIndex
			 * @param {Object} bankIndex
			 * @param {Object} ansIndex
			 * 删除案例题简答图片
			 */
			deleteImgChild(imgIndex, bankIndex, ansIndex) {
				this.questionList[bankIndex].jsonStr[ansIndex].ansText.imageList.splice(
					imgIndex,
					1
				);
			},

			/**
			 * @param {Object} bankindex
			 * 选择上传图片
			 */
			chooseImg(bankindex) {
				if (
					this.questionList[bankindex] &&
					this.questionList[bankindex].ansText &&
					this.questionList[bankindex].ansText.imageList.length >= 4
				) {
					uni.showToast({
						icon: "none",
						title: "最多选择4张",
					});
					return;
				}
				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);
								}
							},
						});
					},
				});
			},

			/**
			 * @param {Object} bankindex
			 * @param {Object} ansindex
			 * 案例题选择上传图片
			 */
			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);
								}
							},
						});
					},
				});
			},
			/**
			 * @param {Object} type
			 * @param {Object} bankindex
			 * 简答题答案确认
			 */
			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,
				});
				this.$u.toast("已确认答案");
				this.isDoOver();
			},

			/**
			 * @param {Object} bankindex
			 * @param {Object} ansindex
			 * 案例题简答答案确认
			 */
			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,
				});
				this.$u.toast("已确认答案");
				this.isDoOver();
			},
			isCheck(item, index) {
				// 案例题处理
				let {
					ques,
					type,
					ans
				} = item;
				if (type == 4) {
					return ans.length == ques.length;
				}
				if (ques) {
					return true;
				}
			},
			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].ans.every((item, i) => {
							return item == this.questionList[index].ques[i];
						});
						//判断
					} else if (item.type == 3) {
						return this.questionList[index].ques == this.questionList[index].ans;
						// } else if (item.type == 5) {
						// 	if(this.questionList[index].ques.text){
						// 		return true
						// 	}else{
						// 		return false
						// 	}
					} 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 this.questionList[index].ans.indexOf(item) == -1;
						});
						//判断
					} else if (item.type == 3) {
						return this.questionList[index].ques != this.questionList[index].ans;
					} else {
						return false;
					}
				} else {
					return false;
				}
			},
			isPart(item, index) {
				if (this.questionList[index].ques) {
					if (item.type == 2) {
						let isWrong = this.questionList[index].ques.some((item, i) => {
							return this.questionList[index].ans.indexOf(item) == -1;
						});

						let isRight = this.questionList[index].ans.every((item, i) => {
							return item == this.questionList[index].ques[i];
						});

						if (!isRight && !isWrong) {
							return true;
						}
					}
				} else {
					return false;
				}
			},

			isOver(item, index) {
				if (this.questionList[index].ques) {
					if (item.type == 4) {
						//案例题
						let isOver = item.jsonStr.every((jsonItem, indexs) => {
							if (
								jsonItem.type == 1 ||
								jsonItem.type == 2 ||
								jsonItem.type == 3
							) {
								if (item.ques[indexs]) {
									return true;
								} else {
									return false;
								}
							} else if (jsonItem.type == 5) {
								if (
									item.ques[indexs] &&
									(item.ques[indexs].text || item.ques[indexs].imageList.length)
								) {
									console.log("chil");
									return true;
								} else {
									return false;
								}
							}
						});

						if (isOver) {
							return true;
						} else {
							return false;
						}
					} else if (item.type == 5) {
						//简答题
						//每一项都相等
						if (item.ques && (item.ques.imageList.length || item.ques.text)) {
							return true;
						}
						//判断
					} else {
						return false;
					}
				} else {
					return false;
				}
			},

			tabSelect(index, bankindex) {
				this.$set(this.questionList[bankindex], "current", index);
			},

			/**
			 * 退出全屏
			 */
			exitFullscreen() {
				try {
					var de = document;
					// console.log(de);
					if (de.exitFullscreen) {
						de.exitFullscreen();
					} else if (de.mozCancelFullScreen) {
						de.mozCancelFullScreen();
					} else if (de.webkitCancelFullScreen) {
						de.webkitCancelFullScreen();
					}
				} catch (err) {}
			},

			fullele() {
				return (
					document.fullscreenElement ||
					document.webkitFullscreenElement ||
					document.msFullscreenElement ||
					document.mozFullScreenElement ||
					null
				);
			},
			//判断是否全屏
			isFullScreen() {
				return !!(document.webkitIsFullScreen || this.fullele());
			},
			getUserMedia(constraints, success, error) {
				console.log("getUserMedia===", constraints, "success:", success);
				if (window.navigator.mediaDevices.getUserMedia) {
					// 最新的标准API
					window.navigator.mediaDevices
						.getUserMedia(constraints)
						.then(success)
						.catch(error);
				} else if (window.navigator.webkitGetUserMedia) {
					// webkit核心浏览器
					window.navigator.webkitGetUserMedia(constraints, success, error);
				} else if (window.navigator.mozGetUserMedia) {
					// firfox浏览器
					window.navigator.mozGetUserMedia(constraints, success, error);
				} else if (window.navigator.getUserMedia) {
					// 旧版API
					window.navigator.getUserMedia(constraints, success, error);
				}
			},
			photographSuccess(stream) {
				console.log("有摄像头---", stream);
				this.photoPopup = true;
				this.isTaking = true;
				this.$nextTick(() => {
					const video = document.querySelector("video");
					console.log("video:", video);
					video.srcObject = stream;
					video.play();
				});
			},
			photographError(err) {
				console.log("没有摄像头：", err);
				uni.showModal({
					title: "提示",
					content: "课程学习需要开启摄像头进行拍照，经检测您的设备无摄像头可使用，请检测环境是否支持。",
					cancelText: "取消",
					showCancel: false,
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack();
						} else if (res.cancel) {}
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.photoBox {
		width: 100%;

		// background-color: #ffffff;
		// border-radius: 24px 24px 0px 0px;
		.photoTop {
			width: 100%;
			height: 74rpx;
			border-radius: 20px 20px 0px 0px;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0rpx 38rpx;

			.sqzz {
				width: 28rpx;
				height: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.centersq {
				color: #333;
				font-size: 30rpx;
				font-weight: 500;
			}
		}

		.photoCenter {
			width: 750rpx;
			height: 75vh;
			position: relative;

			.center_camera {
				width: 100%;
				height: 75vh;
				position: fixed;

				.head_take {
					width: 100%;
					height: 75vh;
					display: flex;
					flex-direction: column;
				}

				.headTake_up {
					width: 100%;
					height: 100rpx;
				}

				.headTake_minddle {
					display: flex;

					.min_img {
						width: 500rpx;
						height: 550rpx;
					}

					.min_left,
					.min_right {
						flex: 1;
						height: 550rpx;
					}
				}

				.headTake_down {
					width: 100%;
					flex: 1;
				}

				.color {
					background-color: #333;
					opacity: 0.5;
				}

				.photo_v {
					width: 100%;
					height: 100%;
				}

				.mask {
					width: 500rpx;
					height: 550rpx;
					position: absolute;
					top: 100rpx;
					left: 0;
					right: 0;
					bottom: 0;
					margin: 0 auto;
					box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.4);
				}
			}

			.custom {
				width: 750rpx;
				height: 75vh;
				position: absolute;
				z-index: 1000;
				top: 0;
				left: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.photoBoxbtns {
			display: flex;

			.takePhoto_btn {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #a9a7a9;
				padding: 40rpx 26rpx;

				.middle_btn {
					width: 120rpx;
					height: 120rpx;
					border-radius: 40rpx;
					border: 4rpx solid #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.square {
					width: 96rpx;
					height: 96rpx;
					background: #ffffff;
					border-radius: 28rpx;
				}

				.rights {
					font-size: 32rpx;
					font-weight: 500;
					color: #ffffff;
				}
			}

			.btnResult {
				height: 100rpx;
				width: 100%;
				background-color: #07c160;
				text-align: center;
				line-height: 100rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.navbar {
		position: relative;
		z-index: 20000;
	}

	.questionBank {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.swiper {
		width: 100%;
		flex: 1;
	}

	.lisSty {
		margin-bottom: 16rpx;
		display: flex;

		.flex_auto {
			flex: 1;
			word-break: break-all;
		}
	}

	.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: #36c75a;
		}

		&.wrong {
			color: #fff;
			background: #ff3b30;
		}

		&.checked,
		&.user_choose {
			color: #fff;
			background: #007aff;
		}
	}

	.submit_checkbox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 120rpx;
		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;

		&.disabled {
			opacity: 0.6;
		}
	}

	.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: #ff3b30;
						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%;
					}
				}
			}
		}
	}

	.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;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			padding-right: 8rpx;
		}
	}

	.firstLetter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.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%;
		padding-top: 8rpx;
		padding-bottom: 100rpx;
		overflow-y: scroll;
	}

	.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;
				}
			}
		}
	}

	.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: #36c75a;
		}

		&.isWrong {
			border: 1rpx solid #eeeeee;
			color: #fff;
			background: #ff3b30;
		}

		&.isPart {
			border: 1rpx solid #eeeeee;
			color: #fff;
			background: #ffc53d;
		}

		&.isOver {
			border: 1rpx solid #eeeeee;
			color: #fff;
			background: blue;
		}

		&.check_ans {
			border: 1rpx solid #eeeeee;
			color: #fff;
			background: #007aff;
		}
	}

	.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;

		.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;
		}
	}

	.dialog-arrow {
		padding-top: 124rpx;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 20000;

		.pointer {
			margin-left: 87rpx;
			display: block;
			width: 95rpx;
			height: 98rpx;
		}

		.text {
			padding-left: 177rpx;
			font-size: 32rpx;
			color: #ffffff;
		}

		.btn {
			width: 242rpx;
			height: 82rpx;
			border: 2rpx solid #ffffff;
			border-radius: 16rpx;
			text-align: center;
			line-height: 82rpx;
			margin: 500rpx auto 0;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.dialog_wrap {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999999999;

		.bg {
			background: rgba(0, 0, 0, 0.3);
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.dialog {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate3D(-50%, -50%, 0);
			width: 640rpx;
			height: 439rpx;
			background: #ffffff;
			border-radius: 24rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				line-height: 48rpx;
				text-align: center;
				margin-top: 40rpx;
			}

			.content {
				margin: 35rpx 35rpx 0;
				font-size: 30rpx;
				color: #666666;
				line-height: 48rpx;
			}

			.btns {
				margin-top: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.btn {
					width: 200rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #f5f5f5;
					border-radius: 40rpx;
					font-size: 30rpx;
					color: rgba(0, 122, 255, 1);
					background: #f5f5f5;
					margin: 0 20rpx;

					&.active {
						color: #f5f5f5;
						background: rgba(0, 122, 255, 1);
					}
				}
			}
		}
	}

	.popboxs {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.classTops {
		flex-shrink: 0;
		padding: 39rpx 0rpx 4rpx;
		font-weight: bold;
		color: #333;
		font-size: 30rpx;
	}

	.textStys {
		width: 100%;
		flex: 1;
		padding: 36rpx;
	}

	.classFootsty {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0rpx 40rpx;

		.btnsty {
			width: 200rpx;
			height: 80rpx;
			border-radius: 40rpx;
			font-weight: bold;
			font-size: 30rpx;
			text-align: center;
			line-height: 80rpx;
		}

		.btns1 {
			background-color: #f5f5f5;
			color: #007aff;
		}

		.btns2 {
			margin-left: 40rpx;
			background-color: #007aff;
			color: #ffffff;
		}
	}
</style>