<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<link rel="stylesheet" href="../../css/mui.css" />
	<!-- <link rel="stylesheet" type="text/css" href="../../css/mui.extend.css" /> -->
	<!-- <link rel="stylesheet" type="text/css" href="../../css/mui.picker.css" /> -->
	<link rel="stylesheet" type="text/css" href="../../css/overhang.min.css">
	<link rel="stylesheet" href="../../css/bootstrap.css" />
	<!-- <link rel="stylesheet" type="text/css" href="../../css/common.css" /> -->
	<link rel="stylesheet" type="text/css" href="../../css/common1.css" />
	<link rel="stylesheet" type="text/css" href="../../js/v-viewer/viewer.css" />
	<link rel="stylesheet" href="../../css/oneSub/common/imageviewer.css" />
	<link rel="stylesheet" type="text/css" href="../../css/zaixianceping/CePingJieMian.css" />
	<link rel="stylesheet" href="../../css/xuekewang/preview.css" />
	<link href="../../css/zaixianceping/cropper.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../../css/iconfont.css" />

	<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/mui.extend.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/htmlFont.js" type="text/javascript" charset="utf-8"></script>

	<title>测评界面</title>
	<style>
		/* 刻度尺容器样式 */
		.mui-container {
		  width: 100%;
		  height: 100px;
		  padding: 10px 0;
		  background-color: #fff;
		  border: none; /* 移除你测试用的红色边框 */
		}
		
		/* 刻度尺整体容器 */
		.container {
		  width: 100%;
		  height:100px; /* 调整高度以适应刻度尺 */
		  position: relative;
		  overflow: hidden;
		}
		
		/* 刻度尺主容器 */
		.ruler-container {
		  position: relative;
		  width: 100%;
		  background-color: #f5f5f5;
		  border-radius: 4px;
		  margin: 0 auto;
		  overflow: hidden;
		  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		}
		
		/* 指示器样式 */
		.indicator {
		  position: absolute;
		  top: 0;
		  left: 50%;
		  width: 2px;
		  height: 50%;
		  background-color: #48C6FF;
		  transform: translateX(-50%);
		  z-index: 2;
		}
		
		/* 刻度尺包装器 */
		.ruler-wrapper {
		  display: flex;
		  position: absolute;
		  top: 0;
		  height: 100%;
		  transition: transform 0.2s ease;
		  left: 50%;
		  transform: translateX(calc(-50% + var(--translateX, 0px)));
		}
		
		/* 单个刻度样式 */
		.ruler-scale {
		  position: relative;
		  height: 100%;
		  display: flex;
		  flex-direction: column;
		  justify-content: flex-end;
		  align-items: center;
		  margin: 0 5px;
		}
		
		/* 刻度线基础样式 */
		.scale-line {
		    width: 2px;
		    background-color: #ccc;
		    margin-bottom: 15px;
		}
		
		.scale-line.long {
		    height: 15px;
		}
		
		.scale-line.medium {
		    height: 10px;
		}
		
		.scale-line.short {
		    height: 5px;
		}
		
		/* 刻度值标签 */
		.scale-value {
		    font-size: 10px;
		    color: #666;
		    position: absolute;
		    bottom: -4px;
		}
		
		/* 当前值显示 */
		.value-display {
		  text-align: center;
		  margin-top: 8px;
		  font-size: 12px;
		  color: #48C6FF;
		}
		
		/* 响应式调整 */
		@media (max-width: 480px) {
		  .ruler-container {
		    height: 40px;
		  }
		}
		
		.iconfont {
		  font-size: 25px; /* 基础大小 */
		  margin-right: 30px;
		  color: #48C6FF;
		}
	</style>
	<script type="text/javascript">
		var examNum ;
		var subjectNum  ;
		var gradeNum  ;
		var examPaperNum  ;
		var startTime  ;
		var overTime ;
		var zyName ;
		var tijiaoCount;
		mui.plusReady(function() {
			self = plus.webview.currentWebview();
			examNum = self.examNum;
			subjectNum = self.subjectNum;
			gradeNum = self.gradeNum;
			examPaperNum = self.examPaperNum;
			stageId = self.stageId;
			startTime = self.startTime;
			overTime = self.overTime;
			zyName=self.zyName;
			tijiaoCount=self.tijiaoCount;
			tijiaoStatus=self.tijiaoStatus;
			Config();
			// plus.screen.lockOrientation("landscape-primary");//横屏
			plus.screen.lockOrientation("portrait-primary");//竖屏
			
		})
		
		// 子页面js
		mui.init({
		  beforeback: function() {
		    // 获取父页面webview对象
		    var parentView = plus.webview.currentWebview().opener();
		    // 触发父页面的自定义事件
		    mui.fire(parentView, 'refreshParent', {msg: "数据已更新"});
		    return true; // 必须返回true才会执行关闭
		  }
		});
		
	</script>
</head>

<body>
	<div id="cepingjiemian">
		<header class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">
				<div class="cepingName">
					{{cepingName}}
				</div>
				<!-- <div class="shezhi" data-toggle="modal" data-target="#myModal9">
					<i class="mui-icon mui-icon-upload"></i>
				</div> -->
			</h1>
		</header>
		<div class="mui-content">
			<!-- 题列表 -->
			<div class="ti">
				<ul class="ti-ul">
					<li v-for="(item,i) in tiList" class="ti-li" @click="changeTi(i)" :ref="'tiItem_' + i">
						<div class="tiItem" :style="{ backgroundColor:i==defQuestionIndex?'#48C6FF':''}">
							<p ><span style="font-size: 0.13rem;font-weight: bold;">{{"T"+item.questionName}}</span><span style="font-size: 0.07rem;">{{(item.submitStatus=='1'?'(已交)':'')}}</span></p>
						</div>
					</li>
				</ul>
			</div>
			<!-- 题干-->
			<div class="tigan">
				<!-- {{defQuestion.questionType=='0'?defQuestion.multiple=='1'?'(多)':'(单)':''}} -->
				<div class="questionType">{{"T"+defQuestion.questionName+"、"}}{{defQuestion.qtypeName}}{{defQuestion.questionType=='0'?defQuestion.multiple=='1'?'(多选)':'(单选)':''}} {{"("+defQuestion.fullScore+"分)"}}</div>
				<!-- 原题 -->
				<div class="stem" v-show="expanded">
					<div v-html="defQuestion.stem" ></div>
					<div v-html="defQuestion.stem_ziti" ></div>
				</div>
				<div @click="zhankaiOrShouQi()" style="text-align: center;line-height:5vh;height: 5vh;margin-top: 20px;">
						<!-- <span style="display: inline-block;text-align: center;line-height:30px;width:120px;height: 30px;border:1px dashed gainsboro;">{{expanded? '收起全部题干内容' : '展开全部题干内容'}}</span> -->
						<span style="display: inline-block;text-align: center;line-height:5vh;width:20vh;height: 5vh;border:1px dashed gainsboro;">{{expanded? '收起全部题干内容' : '展开全部题干内容'}}</span>
				</div>
				<!-- 知识点kpoints+答案answer+解析explanation -->
				<div class="kae" v-show="disabled">
					<!-- <div class="knowledge" v-show="expanded2">
						<span class="qml-explanation">【知识点】</span>
						<div>
							<span v-for="kpoints in defQuestion.kpoints">{{kpoints.name}}</span>
						</div>
						
					</div> -->
					<!-- 答案 -->
					<div class="answer" v-show="expanded2">
						<span class="qml-explanation">【答案】</span>
						<div  v-html="defQuestion.answer"></div>
					</div>
					
					<!-- 解析 -->
					<div class="explanation" v-html="defQuestion.explanation" v-show="expanded2"></div>
					<div @click="zhankaiOrShouQi2()" style="text-align: center;line-height:5vh;height: 5vh;margin-top: 20px;">
						<span style="display: inline-block;text-align: center;line-height:5vh;width:20vh;height: 5vh;border:1px dashed gainsboro;">{{expanded2? '收起全部答案解析内容' : '展开全部答案解析内容'}}</span>
					</div>
				</div>
				
				<div class="zuoda">
					<!-- 客观题展示选项 -->
					<div v-if="defQuestion.questionType=='0'" class="keguan">
						
						<!-- 单选-->
						<div v-if="defQuestion.multiple=='0'" class="keguanXuanXiang" > 

						  <Button
							v-for="item in defQuestion.optionArr"
							:key="item"
							class="btn btn-xuanze"
							:class="{ active: defQuestion.myanswer.includes(item) }"
							@click="xuanze(item)"
							:disabled="disabled"
						  >
							{{ item }}
						  </Button>

						</div>
						
						<!-- 多选-->	
						<div v-else class="keguanXuanXiang"> 						
							<button
							  v-for="item in defQuestion.optionArr"
							  :key="item"
							  class="btn btn-xuanze"
							  :class="{ active: defQuestion.myanswer.includes(item) }"
							  @click="xuanze(item)"
							  :disabled="disabled"
							>
							  {{ item }}
							</button>
						</div>
						
						<!-- 不会做-->
						<div class="buhui" style="margin-top: 5px;">
							<div class="mui-radio mui-left">
								<input
								type="radio" 
								name="checkbox"
								v-model="myanswer" 
								value="1"  @change="buhui(1)" :disabled="disabled" style="margin-top: 5px;">
								<label>
									<a href="javaScript:void(0)">不会做</a>
								</label>
							</div>
						</div>
						
						
					</div>
					
					<!-- 主观题展示，上传 -->
					<div v-else-if="defQuestion.questionType=='1'">
						
						<div class="upload">
							<div class="mui-textfield">
							  <input 
								type="file" 
								ref="fileInput"
								accept="image/*"
								multiple
								@change="handleFileChange"
								style="display: none">
							  <button 
								class="mui-btn mui-btn--primary" 
								@click="triggerFileInput"
								:disabled="defQuestion.fileList.length >= maxFiles||disabled">
								<i class="mui-icon"></i> 添加图片
								<span class="file-count">{{ defQuestion.fileList.length }}/{{maxFiles}}</span>
							  </button>
							
							  <!-- 上传按钮 -->
							  <button 
							    class="mui-btn mui-btn--raised mui-btn--primary upload-btn" 
							    @click="uploadScoreImg"
							    :disabled="defQuestion.fileList.length === 0 || uploading||disabled">
							    <span v-if="!uploading">
							  	<i class="mui-icon mui-icon-upload"></i>上传
							    </span>
							    <span v-else>
							  	<i class="mui-icon mui-icon-spinner mui-spin"></i> 上传中...
							    </span>
							  </button>
							  
							  <!-- 不会做 -->
							  <div style="text-align: center;display: inline-block;margin-top: 5px;">
							  	<div class="mui-radio mui-left" @change="buhui(1)">
							  		<label>
							  			<a href="javaScript:void(0)">不会做</a>
							  		</label>
							  		<input 
							  		type="radio" 
							  		name="checkbox"
							  		v-model="myanswer" 
							  		value="1" :disabled="disabled">
							  	</div>
							  </div>
							
							</div>
							
							<div class="uploadImg">
								<!-- 图片展示 -->
								<div class="image-list" >
									<div>
										<span class="title">当前选择图片展示:</span>
									</div>
									<div v-for="(img, index) in defQuestion.fileList" :key="img.url" class="image-item">
										<!-- 图片预览 -->
										<div class="image-preview xuanze" style="vertical-align: middle;">
											<img :src="img.url" class="preview-img" :data-preview-src="img.url" data-preview-group='0' :style="{display: 'inline-block',width: '50px',height: '50px',transform: `rotate(${rotations[img.url] || 0}deg)`,transition: 'transform 0.3s ease'}">
											<!-- <span class="file-size">{{ formatFileSize(img.mergedImageSize) }}</span> -->
											<i class="mui-icon mui-icon-refreshempty" @click.stop="rotateImage(img,index)" style="text-align: right; cursor: pointer; margin-left: 5px;"></i>
											<i class="mui-icon mui-icon-arrowthinup" @click="move('up',img,index)"></i>
											<i class="mui-icon mui-icon-arrowthindown" @click="move('down',img,index)"></i>
											<i class="mui-icon mui-icon-trash" @click="removeImage(img,index)" style="text-align: right;"></i>
										</div>
									</div>
								</div>	
								<div class="image-list" style="border-left: none;">
									<div>
										<span class="title">已上传图片展示:</span>
									</div>
									<div class="image-preview" style="vertical-align: middle;">
										<img :src="defQuestion.mergedImage"  class="preview-img" :data-preview-src="defQuestion.mergedImage" data-preview-group='1' style="display: inline-block;width: 100px;height: 100px;" v-if="defQuestion.mergedImage">
										<div v-else></div>
									</div>
								</div>
							</div>
						</div>
						
					</div>
					
				</div>
						
			</div>
			<!-- 切换上一题下一题 -->
			<div class="qiehuan">
				<div class="anniu">
					<div class="tijiaoAll" @click="tijiaoAll" v-if="defQuestionIndex=='0'" >
						<span v-if="tijiaoStatus=='0'&&!disabled">提交全卷</span><span v-else>已交卷</span>
					</div>	
					<div class="pre" @click="pre" v-else>
						<—&nbsp;上一题
					</div>	
				</div>
				
				<div class="anniu">
					<div class="tijiaoAll" @click="tijiaoAll" v-if="defQuestionIndex==(tiList.length-1)">
						<span v-if="tijiaoStatus=='0'&&!disabled">提交全卷</span><span v-else>已交卷</span>
					</div>	
					<div class="next" @click="next" v-else>
						下一题&nbsp;—>
					</div>	
				</div>
				
			</div>
		</div>

		<!-- 裁剪模态框 -->
		<div class="modal" v-show="showModal">
		  <div class="mui-modal__container">
			<div class="mui-modal__header"  style="display: flex;">
				<div style="flex: 1;"  >
					<a class="mui-icon mui-icon-left-nav mui-pull-left" @click="closeModal"></a>
					<h5 style="color: #48C6FF;" >图片裁切</h5>
				</div>
				<div  style="flex: 1;text-align: right;margin-right: 10px;">
					<h5 style="color: #48C6FF;">{{currentFileIndex+1}}/{{fileList.length}}</h5>
				</div>
			    <!-- <button class="mui-btn mui-btn--flat" @click="closeModal">关闭</button> -->
			</div>
			<div class="mui-modal__content">
			  <img id="image-to-crop"  ref="cropperImage" :src="currentImage" alt="裁剪图片">
			</div>
			<div class="mui-modal__footer" >
				<!-- <div class="slider-container">
					<div class="slider-wrapper">  
						  <div class="ticks">
							<div 
							  v-for="(tick, index) in ticks" 
							  :key="index"
							  class="tick"
							  :class="{ 'major': tick.major }"
							  :style="{ left: tick.position }"
							>
							  <span v-if="tick.major" class="tick-label">{{ tick.value }}</span>
							</div>
						  </div>
						  <div class="slider-row">
								<input 
								  type="range" 
								  :min="min" 
								  :max="max" 
								  :step="step" 
								  v-model="modelValue"
								  @input="handleInput"
								  class="custom-slider"
								  :style="sliderStyle"
								>
						  </div>
					  
					</div>
				</div> -->
				<!-- 刻度尺式 -->
				<div>
					<div class="mui-container">
						<div class="container">
							<div class="ruler-container" id="ruler" >
								<div class="indicator"></div>
								<div class="ruler-wrapper" :style="{ '--translateX': wrapperTranslateX + 'px' }" id="rulerWrapper">
									<div class="ruler-scale" v-for="(scale, index) in scales" :key="index">
										<div :class="['scale-line', getScaleLineClass(scale)]"></div>
										<div class="scale-value" v-if="scale % 10 === 0">{{ scale }}</div>
									</div>
								</div>
							</div>
							<div class="value-display">当前旋转: {{ currentValue }}°</div>
						</div>
					</div>
				</div>
					
				<div style="display: flex;" >
					<div style="flex:2;">
						<span class="mui-icon icon iconfont icon-shangyizhang" @click="preImage()"></span>
						<span class="mui-icon icon iconfont icon-icon_nishizhenxuanzhuan" @click="rotate(-90)"></span>
						<span class="mui-icon icon iconfont icon-icon_shunshizhenxuanzhuan" @click="rotate(90)"></span>
						<span class="mui-icon icon iconfont icon-xiayizhang" @click="nextImage()"></span>
						<!-- <button class="mui-btn mui-btn--primary " @click="preImage()" :disabled="isFirst" style="text-align: center;"><span class="icon iconfont icon-shangyizhang"></span></button>
						<button class="mui-btn mui-btn--primary" @click="rotate(-90)"><span class="mui-icon icon iconfont icon-icon_nishizhenxuanzhuan"></span></button>
						<button class="mui-btn mui-btn--primary" @click="rotate(90)"><span class="mui-icon icon iconfont icon-icon_shunshizhenxuanzhuan"></span></button>
						<button class="mui-btn mui-btn--primary" @click="nextImage()" :disabled="isEnd"><span class="icon iconfont icon-xiayizhang"></span></button> -->
						<!-- <i class='mui-icon mui-icon-arrowthinleft' @click="preImage()" :disabled="isFirst"></i> -->
						<!-- <button class="mui-btn mui-btn--primary" @click="preImage()" :disabled="isFirst">上一张</button> -->
						<!-- <button class="mui-btn mui-btn--primary" @click="nextImage()" :disabled="isEnd">下一张</button> -->
						
					</div>
					<div style="flex:1;text-align: right;">
						<button class="mui-btn mui-btn--raised" @click="cropImage" v-show='!isEnd'>裁剪并继续</button>
						<button class="mui-btn mui-btn--raised" @click="cropImage" v-show='isEnd'>完成裁剪</button>
					</div>
				</div>
				
			</div>
		  </div>
		</div>
		
		
		<!-- 模态框（Modal）设置 ,暂时没用-->
<!-- 		<div class="modal fade" id="myModal9" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog shezhiModal">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel9">
							设置
						</h4>
					</div>
					<div class="modal-body">
						<table class='shezhitable'>
							<tr>
								<td>横竖屏切换</td>
								<td>
									<div class='switch hengshumodel'>
										<ul>
											<li :class="{'li-active':screenState=='H'}" value="H" @click="hengshuClick($event,'H')">横屏</li>
											<li :class="{'li-active':screenState=='S'}" value="S" @click="hengshuClick($event,'S')">竖屏</li>
										</ul>
									</div>
								</td>
							</tr>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
					</div>
				</div>
			</div>
		</div> -->
		
		<!-- <div v-for="item in defQuestion.optionArr" class="mui-radio mui-left" @change="xuanze">
			<input 
			type="radio" 
			name="options"
			v-model="defQuestion.myanswer" 
			:value="item"  :disabled="disabled" >
			<label>{{item}}</label>
		</div> -->
		
		<!-- <div v-for="item in defQuestion.optionArr" class="mui-checkbox mui-left" @change="xuanze">
			<input 
			type="checkbox" 
			name="checkbox"
			v-model="defQuestion.myanswer" 
			:value="item"   :disabled="disabled">
			<label>{{ item }}</label>
		</div> -->
	</div>
		
</body>
<script type="text/javascript" src="../../js/axios.min.js"></script>
<script type="text/javascript" src="../../js/vue-2.6.12.js"></script>
<script type="text/javascript" src="../../js/compressorJs/compressor.js"></script>
<script type="text/javascript" src="../../js/compressorJs/compressor.min.js"></script>
<script type="text/javascript" src="../../js/mui.zoom.js"></script>
<script type="text/javascript" src="../../js/mui.previewimage.js"></script>
<script src="../../js/zaixianceping/cropper.min.js"></script>
<script type="text/javascript" src="../../js/zaixianceping/mergeCompressImage.js"></script>
<script type="text/javascript" src="../../js/zaixianceping/merge-images.js"></script>
<script type="text/javascript" src="../../js/zaixianceping/cepingjiemian.js"></script>
<!-- <script type="text/javascript" src="../../js/zaixianceping/crop.js"></script> -->
</html>





