supermarkpp/src/views/anscard/Index.vue

<style>
.content {
  background-color: #f5eedb !important;
}

.content_div {
  display: flex;
  overflow: auto;
  min-width: 1200px;
  height: calc(100vh - 170px);
  overflow: auto;
}
.content_div .left_div {
  width: 820px;
  background-color: gray;
  overflow: auto;
  height: 100%;
  position: relative;
}
.content_div .left_div .page_div {
  height: 1140px;
}
.page_cell {
  left: 2.5mm;
  width: 210mm;
  height: 297mm;
  position: absolute;
  background-color: #fff;
  border: 1px solid #000;
}
.content_div .left_div .page_cell * {
  box-sizing: content-box;
  font-family: 宋体, SimSun, "STSong";
}
/* .content_div .left_div .page_cell .obj { */
.page_cell_obj {
  position: relative;
  border: solid 1px black;
  width: 100%;
  height: 100%;
}
.content_div .left_div .page_cell .item {
  position: absolute;
}
/* .content_div .left_div .page_cell .tm_id { */
.page_cell_tm_id {
  width: 8mm;
  text-align: center;
  font-size: 3mm;
  height: 2.5mm;
  position: absolute;
}
/* .content_div .left_div .page_cell .opLabel { */
.page_cell_opLabel {
  padding: 0mm 2mm;
  font-weight: bold;
  font-size: 3mm;
  line-height: 5mm;
  width: 178mm;
}
/* .content_div .left_div .page_cell .del { */
.page_cell_del {
  position: absolute;
  width: 20px;
  right: 5px;
  display: none;
  cursor: pointer;
  z-index: 999;
}
.page_cell_sub:hover .page_cell_del {
  display: block !important;
}
.content_div .left_div .act {
  background-color: #000;
}
/* .content_div .left_div .tk div { */
.page_cell_tk_div {
  background-color: #666;
  position: absolute;
  background: #666;
}

/* .content_div .left_div .words { */
/* .left_div_words {
  display: flex;
  flex-wrap: wrap;
  margin: 8mm auto;
  width: 170mm;
  border: 1px solid #333;
  border-right-width: 2px;
  border-bottom-width: 2px;
} */
/* .content_div .left_div .words li { */
/* .left_div_words li {
  box-sizing: border-box;
  list-style: none;
  width: 8.5mm;
  height: 8mm;
  border: 1px solid #333;
  margin-bottom: 1.5mm;
  border-right: none;
  position: relative;
} */
/* .content_div .left_div .words li span { */
.left_div_words_li_span {
  position: absolute;
  font-size: 2mm;
  top: 100%;
  left: 40%;
}

.content_div .left_div .english {
  padding: 0 5mm;
}
.content_div .left_div .english li {
  list-style: none;
  height: 10mm;
  border-bottom: 1px solid #333;
}

.content_div .right_div {
  margin-left: 10px;
  width: 300px;
  height: 100%;
  overflow: auto;
  background-color: #fff;
  border-left: 1px solid #dadada;
  border-right: 1px solid #dadada;
}
.content_div .right_div h3 {
  background-color: #f3f3f3;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  font-size: 16px;
  font-weight: normal;
  padding: 10px;
}
.content_div .right_div .dtk_bs_list {
  padding: 10px;
}
.content_div .right_div .dtk_bs_list li {
  display: inline-block;
  width: 37px;
  height: 37px;
  margin: 0 7px;
  position: relative;
  cursor: pointer;
}
.content_div .right_div .dtk_bs_list li img {
  width: 100%;
  height: 100%;
}
.content_div .right_div .dtk_bs_list li b {
  position: absolute;
  width: 100%;
  font-size: 12px;
  top: 100%;
  text-align: center;
  left: 0;
  padding: 5px 0;
}
.content_div .right_div .dtk_bs_list li:hover {
  border: 2px solid #18a368;
}
.content_div .right_div .dtk_bs_list li:hover::after {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url(../../assets/correct_on.png);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.content_div .right_div .dtk_bs_list .te_active {
  border: 2px solid #18a368;
}
.content_div .right_div .dtk_bs_list .te_active::after {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url(../../assets/correct_on.png);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.content_div .right_div .tips {
  font-size: 12px;
  color: #999;
  padding: 10px;
}
.content_div .right_div .btns button {
  margin: 5px 5px 5px 0;
  width: 84px;
  text-align: center;
}

.tm_list {
  height: 200px;
  overflow: auto;
  border: 1px solid #d9d9d9;
  margin-bottom: 10px;
}
.tm_list li {
  list-style: none;
  border-bottom: 1px solid #d9d9d9;
  padding: 5px 10px;
  min-height: 40px;
}
.tm_list li span {
  display: inline-block;
  line-height: 30px;
  font-size: 18px;
}
.tm_list li div {
  float: right;
  font-weight: 600;
}
.tm_list li div input {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  text-align: center;
  outline: none;
  font-size: 18px;
}

.page_cell_options {
  position: absolute;
  font-size: 2.5mm;
  border: 1px solid rgb(0, 0, 0);
  text-align: center;
  line-height: 1;
}

.stdPoints {
  position: absolute;
  background-color: black;
  z-index: 99;
}

.content_box {
  width: 180mm;
  height: 257mm;
  position: absolute;
}

.w-e-text {
  min-height: auto !important;
}

#paperNameTextAreaTem {
  resize: none;
  width: 177mm;
  color: #000;
  font-size: 20px;
  font-weight: 600;
  height: 15mm;
  max-height: 21mm;
  text-align: center;
  word-wrap: normal;
  line-height: 15mm;
  overflow: hidden;
  margin-left: 9mm;
  margin-top: 9mm;
}

.breadcrumb {
  position: relative;
}

.exportPdf {
  position: absolute;
  right: 20px;
  top: 10px;
}
</style>
<template>
  <section class="content">
    <div class="breadcrumb">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><a href="/">试卷管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>答题卡制作</el-breadcrumb-item>
        </el-breadcrumb>
				<el-button class="exportPdf" type="primary" size="mini" @click="handleExportPdf">导出pdf</el-button>
    </div>
	<div class="content_div" v-loading="loading">
		<div class="left_div" ref="contenterPdf" id="contenterPdf">
			<div class="page_div">
				<div class="page_cell" v-for='(page,idx) in paper_page' :style="{
					top: 300*idx+'mm'
				}">
					<div v-if="idx%2==0" v-for='item in paper.stdPointsNew' class="stdPoints" :style="{
						width: item.w+'mm',
						height: item.h+'mm',
						left: item.x+'mm',
						top: item.y+'mm'
					}">
					</div>
					<div v-if="idx%2==1" v-for='item in paper.stdPointsNew' class="stdPoints" :style="{
						width: item.w+'mm',
						height: item.h+'mm',
						right: item.x+'mm',
						top: item.y+'mm'
					}">
					</div>
					<!-- //试卷内容 -->
					
					<div class="content_box" :style="{
						left: paper.stdPoints[0].x+'mm',
						top: paper.stdPoints[0].y+'mm'
					}">
						<template v-if='page.pno == 1'>
							<textarea id="paperNameTextAreaTem" rows="3" cols="78" style="" placeholder="请输入试卷名称"></textarea>
							<div style="top:27mm;left:11mm;width:95mm;height:60mm;position:absolute;"> 
								<div style="line-height:6.6mm"> 
									<span style="font-weight: bold;font-size: 4mm;">姓名：</span>
									<span style="width:30mm;border-bottom: solid 1px black;display:inline-block">&nbsp;</span>
									<span style="font-weight: bold;font-size: 4mm;">班级：</span>
									<span style="width:30mm;border-bottom: solid 1px black;  display: inline-block">&nbsp;</span>
									<br> 
									<span style="font-weight: bold;font-size: 4mm;">考场号：</span>
									<span style="width:25mm;border-bottom: solid 1px black;  display: inline-block">&nbsp;</span> 
									<span style="font-weight: bold;font-size: 4mm;">座位号：</span>
									<span style="width:30mm;border-bottom: solid 1px black;  display: inline-block">&nbsp;</span> 
								</div> 
								<div style="border:solid 1px black;margin-top: 2mm;padding:1mm;font-size: 3mm;line-height:4.5mm;">
									<p style="text-align: center;font-weight: bold;font-size: 4mm;line-height: 4mm;">注意事项</p>
									<p> 1.答题前，考生先将自己的姓名、班级、准考证号填写清楚。
										<br> 2.客观题答题，必须使用2B铅笔填涂，修改时，要用橡皮擦干净。  
										<br> 3.主观题答题，必须使用0.5毫米的黑色墨水签字笔书写，要求字体工整、笔迹清晰。作图时，必须用2B铅笔，并描浓。
										<br> 4.必须在题号所对应的答题区域内作答，超出答题区域书写无效。 
										<br>5.保持答卷清洁、完整。严禁折叠，严禁在答题卷上做任何标记，严禁使用涂改液、胶带纸和修正带。<br>  
									</p>
									</div> <div style="border:solid 1px black;margin-top:2mm;line-height: 7mm">  <table style="width:100%;height:100%;"><tbody><tr> <td width="30%"> <span style="font-size: 3mm;font-weight: bold;">正确填涂</span></td><td width="25%"> <div style="border: solid 1px black;width:4mm;height: 2mm;background-color: black;">&nbsp;</div> </td> <td width="30%"> <span style="font-size: 3mm;font-weight: bold;">缺考标记</span>  </td> <td width="25%">   
								<div style="border:1px solid #000000;width:4mm;height: 2mm;"></div> </td> </tr></tbody></table></div>
							</div>
								
							<div style="top:32mm;left:116mm;width:65mm;height:60mm;position:absolute;font-size:3mm;">
								<table v-if='data.khType == 2' cellpadding="0" cellspacing="0" style="border-collapse:collapse;text-align: center;width:100%;height:100%;line-height: 5mm">
									<tr height='6mm'>
										<td :colspan="data.khLength" style="width:30mm;border:solid 1px black;border-collapse:collapse;text-align:center;">准考证号</td>
									</tr>
									<tr height='6mm'>
										<th v-for='i in data.khLength' style="border:solid 1px #000000;border-collapse:collapse;">&nbsp;</th>
									</tr>
									<tr>
										<td v-for='i in data.khLength' align="center" style="border:solid 1px #000000;border-collapse:collapse;padding-top: 1mm;border-left-color: #000000;border-bottom-color: #000000">
											<div v-for='j in 10' style="border:1px solid #000000;width:4mm;height: 3.5mm;line-height: 1.2;text-align: center;margin: 6px 0">
												<span style="margin-top: -1.5px;display:block ">{{j-1}}</span>
											</div>
										</td>
									</tr>
								</table>
							
								<div v-else>
									<table style="border-collapse:collapse;text-align: center;width:100%;height:100%;line-height: 5mm" cellpadding="0" cellspacing="0">
										<tbody>
											<tr height="6mm"><td colspan="8" style="width:30mm;border-collapse:collapse;text-align:left;">准考证号:</td></tr>
											<tr height="6mm">
												<th v-for='i in 8' style="border:solid 1px #000000;border-collapse:collapse;">&nbsp;</th>
											</tr>
										</tbody>
									</table>
									<div style="top:25mm;left:0mm;width:65mm;height:27mm;position:absolute;">
										<div style="top:0mm;left:0mm;width:65mm;height:27mm;position:absolute;line-height:15mm;position:absolute;border: dashed 1px #000000;text-align: center;font-size: 6mm;color:grey;">贴条形码区<p>
										<span style="font-size: 2mm;line-height: 3mm">（正面朝上，切勿贴出虚线方框）</span>
										</p></div>
									</div>
								</div>
							</div>
						</template>
						<!-- 选择题 -->
						<template v-if='paper.obj.list.length>0 && page.pno == 1'>	
							<div class="page_cell_sub">
								<div class="page_cell_opLabel" :style="{
										left: paper.objAnsPoints[0].x+'mm',
										top: (paper.objAnsPoints[0].y-5)+'mm',
										position:'absolute'
									}">
									{{paper.obj.title}}
									<img @click="delTm(0,1)" class="page_cell_del" src="../../assets/delete.png" alt="">
								</div>
								<div class="page_cell_obj" :style="{
										width: paper.objAnsPoints[0].w+'mm',
										height: paper.objAnsPoints[0].h+'mm',
										left: paper.objAnsPoints[0].x+'mm',
										top: (paper.objAnsPoints[0].y)+'mm',
										position:'absolute'
									}">
									<div  v-for='(item,index) in paper.obj.list'>
										<span class="page_cell_tm_id" :style="{
											left:(item.points[0].x-8)+'mm',
											top:(item.points[0].y)+'mm'
										}">{{item.id}}</span>
										<span v-for='(opt,i) in item.points' class="page_cell_options" :style="{
											width: opt.w+'mm',
											height: opt.h+'mm',
											left: opt.x+'mm',
											top: opt.y+'mm'
										}">
										<template v-if='item.type == 3'>
											{{pd[i]}}
										</template>
										<template v-else>
											{{options[i]}}
										</template>
										</span>
									</div>					
								</div>
							</div>

						</template>
						<!-- 填空题 -->
						<template v-if='paper.sub.length>0'>
							<div class="page_cell_sub" v-for='(item,i) in paper.stdSujQnoPoints' v-if='item.pno == page.pno'>
								<!-- 标题 -->
								<div class="page_cell_opLabel" :style="{
									left: item.x+'mm',
									top: (item.y-5)+'mm',
									position:'absolute'
								}">
									{{paper.sub[i].title}}
									
								</div>
								
								<div class="page_cell_obj" :style="{
									width: item.w+'mm',
									height: item.h+'mm',
									left: item.x+'mm',
									top: (item.y)+'mm',
									position:'absolute'
									}"
								>
									<img @click="delTm(i)" class="page_cell_del" src="../../assets/delete.png" alt="">
									<!-- 填空 -->
									<template v-if='paper.sub[i].type==2'>
										<div v-for='sub in paper.sub[i].list' class="page_cell_tk">
											<span class="page_cell_tm_id" :style="{
												left:(sub.x-6)+'mm',
												top:(sub.y-3)+'mm'
											}">{{sub.id}}.</span>
											<div class="page_cell_tk_div" :style="{
												width:sub.w+'mm',
												height:sub.h+'mm',
												left: sub.x+'mm',
												top: sub.y+'mm'
											}"></div>
										</div>
									</template>
									<!-- 解答题 -->
									<template v-else-if='paper.sub[i].type==3'>
										<Editor :value='paper.sub[i].option.id' :index="i"/>
									</template>
									<!-- 选做题 -->
									<template v-else-if='paper.sub[i].type==4'>
										<div style="padding: 1mm;font-size: 3mm;line-height: 5mm;">
											<span>请考生从<template v-for='(opt,i) in paper.sub[i].list'>{{opt.id}} </template>
											题任选一题作答，作答时用2B铅笔在答题卡上把所选题目对应的选考标记涂黑，
											不涂或多涂或填涂和作答不符，均不得分。</span><br>
											<span>我选择的题号为：</span>
											<span v-for='opt in paper.sub[i].list' class="options" :style="{
												width: opt.w+'mm',
												height: opt.h+'mm',
												left: opt.x+'mm',
												top: opt.y+'mm'
											}">{{opt.id}}</span>
										</div>
									</template>
									<!-- 语文作文 -->
									<template v-else-if='paper.sub[i].type==5'>
										<span class="page_cell_tm_id" v-if='paper.sub[i].title' style="top: 2.5mm;left:3mm">{{paper.sub[i].id}}.</span>
										<ul class="left_div_words words" style="display: flex;flex-wrap: wrap;margin: 8mm auto;width: 170mm;border: 1px solid #333;border-right-width: 2px;border-bottom-width: 2px;">
											<li style="box-sizing: border-box;list-style: none;width: 8.5mm;height: 8mm;border: 1px solid #333;margin-bottom: 1.5mm;border-right: none;position: relative;" class="left_div_words_li" v-for='num in paper.sub[i].end' v-if='num>=paper.sub[i].start'>
												<span style="position: absolute;font-size: 2mm;top: 100%;left: 40%;" class="left_div_words_li_span" v-if='num%100 == 0'>{{num}}</span>
											</li>
										</ul>
									</template>
									<!-- 英语作文 -->
									<template v-else-if='paper.sub[i].type==6'>
										<span class="page_cell_tm_id" v-if='paper.sub[i].title' style="top: 2.5mm;left:3mm">{{paper.sub[i].id}}.</span>
										<ul class="english" style="padding: 0 5mm;">
											<li v-for='num in paper.sub[i].rows' style="list-style: none;height: 10mm;border-bottom: 1px solid #333;">
												
											</li>
										</ul>
									</template>
								</div>
							</div>
						

						</template>
					</div>
					<!-- //试卷内容 -->
					
					
					<!-- 页码 -->
					<div style="top:281mm;left:15mm;position: absolute;">
						<div v-for='item in page.bin' :class="item==1?'act':''" style="border:1px solid #000000;width:4mm;height: 2.5mm;line-height: 1;text-align: center;margin: 6px 6px;display:inline-block">
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right_div">
			<h3>选择答题卡布局</h3>
			<ul class="dtk_bs_list">
				<li v-for='i in 3' :class='data.layout == i ?"te_active":""' @click="data.layout = i">
					<div v-if='i==1'>
						<img  src="../../assets/test01.png" alt=""> 
						<b>一栏</b>
					</div>
					<div v-if='i==2'>
						<img  src="../../assets/test02.png" alt=""> 
						<b>两栏</b>
					</div>
					<div v-if='i==3'>
						<img  src="../../assets/test03.png" alt=""> 
						<b>三栏</b>
					</div>
				</li>
			</ul>
			<div class="tips">
				<p v-if='data.layout==1'>一栏适用于A4、16K、B5纸张</p>
				<p v-if='data.layout==2'>两栏适用于A3、8K、B4纸张</p>
				<p v-if='data.layout==3'>三栏适用于A3、8K、B4纸张</p>
			</div>
			<h3>选择考号版式</h3>
			 <div style="padding: 10px;">
				<el-radio v-model="data.khType" :label="1">条形码</el-radio>
				<el-radio v-model="data.khType" :label="2">准考证号</el-radio>
				<select v-model="data.khLength" style="width: 70px;">
					<option v-for="i in 12" v-if='i>=4' :value="i">{{i}}位</option>
				</select>
			 </div>
			 <h3>设置禁止作答区</h3>
			 <div style="padding: 10px;">
				 <el-radio v-model="data.noAnsArea" :label="1">启用</el-radio>
				 <el-radio v-model="data.noAnsArea" :label="2">禁用</el-radio>
			 </div>
			 <h3>添加试题</h3>
			 <div class="btns" style="padding: 10px;">
				 <el-button @click="openAdd(1)" type="info" size="mini" plain icon="el-icon-plus">客观题</el-button>
				 <el-button @click="openAdd(2)" type="info" size="mini" plain icon="el-icon-plus">填空题</el-button>
				 <el-button @click="openAdd(3)" type="info" size="mini" plain icon="el-icon-plus">解答题</el-button>
				 <el-button @click="openAdd(4)" type="info" size="mini" plain icon="el-icon-plus">选做题</el-button>
				 <el-button @click="openAdd(5)" type="info" size="mini" plain icon="el-icon-plus">作文(语)</el-button>
				 <el-button @click="openAdd(6)" type="info" size="mini" plain icon="el-icon-plus">作文(英)</el-button>
			 </div>
		</div>
	</div>
	
	<el-dialog
	  title="添加题目"
	  :visible.sync="open"
	  width="30%">
	  <el-form size="small" :inline='true' label-width="80px" label-position="left">
		  <el-form-item label="题目名称:"  v-if='type <= 3'>
		      <el-radio-group fill='#FA0A2F' v-model="addForm.type" v-if='type == 1'>
		            <el-radio-button :label="1">单选题</el-radio-button>
		            <el-radio-button :label="2">多选题</el-radio-button>
		            <el-radio-button :label="3">判断题</el-radio-button>
		       </el-radio-group>
			   <el-input v-if='type == 2' value="填空题"></el-input>
			   <el-input v-if='type == 3' value="解答题"></el-input>
		    </el-form-item>
			<el-form-item label="题号:" v-if='type <= 3'>
				从第  <el-input @input="createList" style="width:100px;" v-model="addForm.start"></el-input>
				到第  <el-input @input="createList" style="width: 100px;" v-model="addForm.end"></el-input>
				题
			</el-form-item>
			<el-form-item label="选项个数:" v-if='addForm.type != 3 && type == 1'>
				<el-input @input="numChange" v-model="addForm.num"></el-input>
			</el-form-item>
			<el-form-item label="每行空数:"  v-if='type == 2'>
			  <el-radio-group fill='#FA0A2F' v-model="addForm.count" >
			        <el-radio-button v-for='i in 5' :label="i">{{i}}</el-radio-button>
			   </el-radio-group>
			</el-form-item>
			<el-form-item label="选做规则:" v-if='type == 4'>
				<el-input style="width:100px;" v-model="addForm.chooseNum"></el-input>
				选 <el-input style="width: 100px;" value="1" disabled></el-input>
			</el-form-item>
			<el-form-item label="作文格数:" v-if='type == 5'>
				<el-input  v-model="addForm.words"></el-input>
			</el-form-item>
			<el-form-item label="作文栏数:" v-if='type == 6'>
				<el-input  v-model="addForm.row"></el-input>
			</el-form-item>
			
			<ul class="tm_list" v-if='type == 1'>
				<li v-for="item in list">
					<span>{{item.id}}</span>
					<div v-if='addForm.type != 3'><input type="text" v-model="item.num">个选项</div>
				</li>
			</ul>
			<ul class="tm_list" v-if='type == 3'>
				<li v-for="item in list" v-if='list.length>0'>
					<span>{{item.id}}</span>
					<div @click="addLeaf(item,item.leaf)" style="cursor: pointer;">+</div>

					<div v-for="(item1,i1) in item.leaf" style="float: none;padding-left: 10px;">
						<span style="font-weight: 500;">{{item1.id}}</span>
						<div @click="item.leaf.splice(i1,1)" style="cursor: pointer;">-</div>
						<div @click="addLeaf(item1,item1.leaf)" style="cursor: pointer;">+</div>
						<div v-for="(item2,i2) in item1.leaf" style="float: none;padding-left: 10px;">
							<span style="font-weight: 500;">{{item2.id}}</span>
							<div @click="item1.leaf.splice(i2,1)" style="cursor: pointer;">-</div>
							<div @click="addLeaf(item2,item2.leaf)" style="cursor: pointer;">+</div>
							
							<div v-for="(item3,i3) in item2.leaf" style="float: none;padding-left: 10px;">
								<span style="font-weight: 500;">{{item3.id}}</span>
								<div @click="item2.leaf.splice(i3,1)" style="cursor: pointer;">-</div>
							</div>
						</div>
					</div>
					
				</li>
			</ul>
	  </el-form>
		
	 <!-- <p align='center' v-if="type == 1">
		<el-checkbox v-model="addForm.auto" >添加题目自动排版至顶端客观题区域</el-checkbox>
	  </p> -->
	  
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="open = false">取 消</el-button>
	    <el-button type="primary" @click="addPaper">添 加</el-button>
	  </span>
	</el-dialog>
	
  </section>
</template>
<script>
import Page from "../../components/Page";
import Editor from "../../components/fuEditor/index1";
import { downloadPDF } from "@/utils/htmlToPdf.js"
import printHtml from "@/utils/print.js"
import printJS from "print-js";
import print from "print-js"
export default {
  components: {
    Page,Editor
  },
  data() {
    return {
      loading: false,
      queryParams: {
        page: 1,
      },
      form: {},
      form1: {},
      form2: {},
      list: [{}, {}],
      total: 0,
      title: "新增用户",
      open: false,
      doctorList: [],
      rules: {},
	  cur_page:1,
	  size:[180,118],
	  data:{
		  layout:1,
		  khType:1,
		  khLength:8,
		  noAnsArea:1
	  },
	  type:1,
	  options:['A','B','C','D','E','F'],
	  pd:['T','F'],
	  addForm:{
		  type:1,
		  start:1,
		  end:'',
		  num:4,
		  auto:true,
		  count:2,
		  chooseNum:3,
		  words:900,
		  row:10,
		  col:5    //客观题一列几行
	  },
	  list:[
		  
	  ],
	  paper_page:[
		  {pno:1,bin:'0001'}
	  ],
	  paper:{
		  obj:{
			  title:'客观题',
			  list:[]
		  },
		  sub:[],  //主观题
		  objAnsPoints:[
			
		  ],
		  stdSujQnoPoints:[
			 
		  ],
		  stdPoints:[
			  {x:6,y:11,w:5,h:5},
			  {x:6,y:281,w:5,h:5},
		  ],
		  stdPointsNew:[
		  		{x:6,y:11,w:5,h:5},
				{x:198,y:11,w:5,h:5},
		  		{x:6,y:281,w:5,h:5},
		  ]
	  },
	  dft:{
		  x:9,
		  y:109,
		  w:180,
		  h:28
	  }
	  
	};
  },
  watch:{
	  "paper.stdSujQnoPoints":{
		  handler(value){
			  if(this.paper_page.length <= 1)return
			  if(value.length>0){
				  // this.cur_page=value[value.length-1].pno
				  // this.paper_page=this.paper_page.filter(item=>item<=this.cur_page)
			  }
			
		  },
		  deep:true
	  },
	 paper:{
		 handler(newvalue){
			//  console.log(newvalue)
			// var list=[]
			// if(newvalue.obj.list.length>0){
			// 	list.push({
			// 		name:'客观题',
			// 		num:newvalue.obj.list.length
			// 	})
			// }
			// if(newvalue.sub.length>0){
			// 	let t2=newvalue.sub.filter(item=>item.type == 2),n2=0
			// 	t2.forEach(item=>{
			// 		n2+=item.list.length
			// 	})
			// 	list.push({
			// 		name:'填空题',
			// 		num:n2
			// 	})
			// 	let t3=newvalue.sub.filter(item=>item.type == 3),n3=t3.length
			// 	let t4=newvalue.sub.filter(item=>item.type == 4)
			// 	t4.forEach(item=>{
			// 		n3+=item.list.length
			// 	})
			// 	list.push({
			// 		name:'解答题',
			// 		num:n3
			// 	})
			// 	let t5=newvalue.sub.filter(item=>item.type == 5 && item.title)
			// 	list.push({
			// 		name:'语文作文题',
			// 		num:t5.length
			// 	})
			// 	let t6=newvalue.sub.filter(item=>item.type == 6)
			// 	list.push({
			// 		name:'英语作文题',
			// 		num:t6.length
			// 	})
			// }
			// console.log(list)
		 },
		 deep:true
	 },
	 "data.layout":{
		handler(value){
			if(value==1){
				this.paper.stdPointsNew = [
					{x:6,y:11,w:5,h:5},
					{x:198,y:11,w:5,h:5},
					{x:6,y:281,w:5,h:5}
				]
			}
			if(value==2){
				this.paper.stdPointsNew = [
					{x:6,y:11,w:5,h:5},
					{x:6,y:281,w:5,h:5}
				]
			}
		},
		deep:true
	 }
  },
  methods: {
	decToBin4(decimalNumber) {
	  return decimalNumber.toString(2).padStart(4, '0');
	},
	openAdd(type){
		this.type=type
		this.open=true
	},
	//选项个数变化
	numChange(){
		let list=this.list
		list.forEach(item=>{
			item.num=this.addForm.num
		})
		this.list=list
	},
	//添加小题
	addLeaf(item,leaf){
		var l=leaf.length
		leaf.push({
			id:item.id+'.'+(l+1),
			leaf:[]
		})
	},
	//删除主观题目
	delTm(i,flag){
	
		var sub=this.paper.stdSujQnoPoints,list=this.paper.sub
		var height=sub[i]?sub[i].h:0,cur={...list[i]}
		if(flag){  //客观题
			this.paper.objAnsPoints=[]
			this.paper.obj.list=[]
			if(sub.length == 0){
				this.addForm.start=1
			}
		}else{
			if(cur.type == 5){
				// sub=sub.filter(item=>item.id!=cur.id)
				for(let j=list.length-1;j>=0;j--){
					if(list[j].id==cur.id){
						sub.splice(j,1)
						list.splice(j,1)
					}
				}
			}else{
				sub.splice(i,1)
				list.splice(i,1)
			}
		}
		var obj=this.paper.objAnsPoints
		sub.forEach((item,index)=>{
			if(index >= i){
				if(index == 0){
					if(obj.length > 0){
						item.y=obj[0].y+obj[0].h+8
					}else{
						item.y=this.dft.y
					}
					item.pno=1
				}else{
					if(list[index].title){
						item.y=sub[index-1].y+sub[index-1].h+8
					}else{
						item.y=sub[index-1].y+sub[index-1].h+3
					}
					item.pno=sub[index-1].pno
				}
			}	
		})	
		if(i>=sub.length-1){
			if(cur.type == 2 || cur.type == 4){
				this.addForm.start-=cur.list.length
			}else{
				this.addForm.start--
			}
		}
		if(this.paper.objAnsPoints.length == 0 && this.paper.stdSujQnoPoints.length == 0){
			this.addForm.start=1
			this.cur_page=1
			this.paper_page=[{pno:1,bin:'0001'}]
		}
		if(sub.length>0){
			this.cur_page=sub[sub.length-1].pno
			this.paper_page=this.paper_page.filter(item=>item.pno<=this.cur_page)
			
		}else{
			this.cur_page=1
			this.paper_page=[{pno:1,bin:'0001'}]
		}
		this.changpage()
	},
	createList(){
		let s=this.addForm.start,e=this.addForm.end
		let list=[]
		if(this.addForm.end >= this.addForm.start){
			for(let i=s;i<=e;i++){
				if(this.type == 1){
					// 客观题
					if(this.addForm.type == 3){  //判断题
						list.push({
							id:i,
							num:2
						})
					}else{
						list.push({
							id:i,
							num:this.addForm.num
						})
					}
					
				}else if(this.type == 2 || this.type == 3){
					// 填空题 解答题
					list.push({
						id:i,
						leaf:[]
					})
				}
			}
		}
		this.list=list
		
	},
	//添加题目
	addPaper(){
		switch(this.type){
			case 1:   //客观题
				
				this.calcXY()
				
				break;
			case 2:  //填空题
				let list=this.list
				let count=this.addForm.count
				var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
				let h=Math.ceil(list.length/count)*11
				if(sub.length>0){
					let i=sub.length-1
					this.paper.stdSujQnoPoints.push({
						x:sub[i].x,
						y:sub[i].y+sub[i].h+8,
						w:sub[i].w,
						h:h,
						pno:this.cur_page
					})
				}
				else if(obj.length>0 ){
					let i=obj.length-1
					this.paper.stdSujQnoPoints.push({
						x:obj[i].x,
						y:obj[i].y+obj[i].h+8,
						w:obj[i].w,
						h:h,
						pno:this.cur_page
					})
				}else{
					let dft={...this.dft}
					dft.h=h
					dft.pno=this.cur_page
					this.paper.stdSujQnoPoints.push(dft)
				}
				
				list.forEach((item,index)=>{
					let row=parseInt(index/count),col=(index%count)
					item.w=parseInt(this.dft.w/count-10)
					item.h=0.1
					item.x=8+(8+item.w)*col
					item.y=9+row*10
				})
				this.paper.sub.push({
					title:'填空题',
					list:list,
					type:2
					
				})
				this.list=[]
				break;
			case 3: //解答题
				var _list=this.list,new_list=[]
				function searchLeaf(arr){
					arr.forEach(item=>{
						if(item.leaf.length == 0){
							new_list.push({
								id:item.id
							})
						}else{
							searchLeaf(item.leaf)
						}
					})
				}
				searchLeaf(_list)
				var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
				if(sub.length>0){
					let i=sub.length-1
					this.paper.stdSujQnoPoints.push({
						x:sub[i].x,
						y:sub[i].y+sub[i].h+8,
						w:sub[i].w,
						h:50,
						pno:this.cur_page
					})
				}
				else if(obj.length>0 ){
					let i=obj.length-1
					this.paper.stdSujQnoPoints.push({
						x:obj[i].x,
						y:obj[i].y+obj[i].h+8,
						w:obj[i].w,
						h:50,
						pno:this.cur_page
					})
				}else{
					let dft={...this.dft}
					dft.h=50
					dft.pno=this.cur_page
					this.paper.stdSujQnoPoints.push(dft)
				}
				
				new_list.forEach((item,index)=>{
					if(index > 0){
						let i=sub.length-1
						let x=index==1?6:1
						this.paper.stdSujQnoPoints.push({
							x:sub[i].x,
							y:sub[i].y+sub[i].h+3,
							w:sub[i].w,
							h:50,
							pno:this.cur_page
						})
					}
					this.paper.sub.push({
						title:index==0?'解答题':'',
						option:item,
						type:3
					})
				})
				this.list=[]
				break;
			case 4:
				let chooseNum=this.addForm.chooseNum
				var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
				if(sub.length>0){
					let i=sub.length-1
					this.paper.stdSujQnoPoints.push({
						x:sub[i].x,
						y:sub[i].y+sub[i].h+8,
						w:sub[i].w,
						h:50,
						pno:this.cur_page
					})
				}
				else if(obj.length>0 ){
					let i=obj.length-1
					this.paper.stdSujQnoPoints.push({
						x:obj[i].x,
						y:obj[i].y+obj[i].h+8,
						w:obj[i].w,
						h:50,
						pno:this.cur_page
					})
				}else{
					let dft={...this.dft}
					dft.h=50
					dft.pno=this.cur_page
					this.paper.stdSujQnoPoints.push(dft)
				}
				let start=this.addForm.start,end=Number(start)+Number(this.addForm.chooseNum)-1
				let tihao=[]
				for(let i=start;i<=end;i++){
					tihao.push({
						id:i,
						w:4,
						h:2.5,
						x:24+(i-start)*6,
						y:12
					})
				}
				this.paper.sub.push({
					title:'选做题',
					list:tihao,
					type:4
				})
				this.addForm.end=end
				break; 
			case 5://作文（语)
				let words=Number(this.addForm.words)
				var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
				var row=Math.ceil(words/20)+1,height=row*9.5+30
				var max_height,cur_obj={}
				
				if(sub.length>0){
					let i=sub.length-1
					cur_obj={
						x:sub[i].x,
						y:sub[i].y+sub[i].h+8,
						w:sub[i].w,
						h:height,
						pno:this.cur_page
					}
				}
				else if(obj.length>0 ){
					let i=obj.length-1
					cur_obj={
						x:obj[i].x,
						y:obj[i].y+obj[i].h+8,
						w:obj[i].w,
						h:height,
						pno:this.cur_page
					}
				}else{
					let dft={...this.dft}
					dft.h=height
					dft.pno=this.cur_page
					cur_obj=dft	
				}
				max_height=this.paper.stdPoints[1].y-cur_obj.y-20
				if(max_height < 20){
					max_height=250
					this.cur_page++
					cur_obj.pno=this.cur_page
					this.paper_page.push({
						pno:this.cur_page,
						bin:this.decToBin4(this.cur_page).split('')
					})
					cur_obj.y=10
				}
				let real_row=Math.floor((max_height-10)/9.5)
				cur_obj.h=max_height
				
				console.log(23333,max_height)
				this.paper.stdSujQnoPoints.push(cur_obj)
				this.paper.sub.push({
					title:'语文作文题',
					type:5,
					// words:row*20,
					start:1,
					end:real_row*20,
					id:this.addForm.start
				})
			
				if(row > real_row){
					let page_row=Math.floor((this.paper.stdPoints[1].y-36)/9.5)  //一页的行数
					let pages=Math.ceil((row-real_row)/page_row)
					let start_w=real_row*20+1,end_w,h
					for(let i=1;i<=pages;i++){
						this.cur_page++
						this.paper_page.push({
							pno:this.cur_page,
							bin:this.decToBin4(this.cur_page).split('')
						})
						if(i == pages){
							end_w=row*20
						}else{
							end_w=start_w+page_row*20-1
						}
						h=page_row*9.5
						this.paper.sub.push({
							title:'',
							type:5,
							// words:row*20,
							start:start_w,
							end:end_w,
							id:this.addForm.start
						})
						start_w=end_w+1
						
						let l=sub.length-1
						this.paper.stdSujQnoPoints.push({
							x:sub[l].x,
							y:5,
							w:sub[l].w,
							h:h+15,
							pno:this.cur_page
						})
					}
					
				}
				console.log(7777,this.paper)
				this.addForm.end=this.addForm.start
				break;
			case 6://作为（英）
				let rows=Number(this.addForm.row)
				var obj=this.paper.objAnsPoints,sub=this.paper.stdSujQnoPoints
				var height=rows*10+10
				if(sub.length>0){
					let i=sub.length-1
					this.paper.stdSujQnoPoints.push({
						x:sub[i].x,
						y:sub[i].y+sub[i].h+8,
						w:sub[i].w,
						h:height,
						pno:this.cur_page
					})
				}
				else if(obj.length>0 ){
					let i=obj.length-1
					this.paper.stdSujQnoPoints.push({
						x:obj[i].x,
						y:obj[i].y+obj[i].h+8,
						w:obj[i].w,
						h:height,
						pno:this.cur_page
					})
				}else{
					let dft={...this.dft}
					dft.h=height
					dft.pno=this.cur_page
					this.paper.stdSujQnoPoints.push(dft)
				}
				
				this.paper.sub.push({
					title:'英语作文题',
					rows:rows,
					id:this.addForm.start,
					type:6
				})
				
				this.addForm.end=this.addForm.start
				break;
		}
		this.addForm.start=Number(this.addForm.end)+1
		this.addForm.end=''
		this.open=false
		
		this.changpage()
		
	},
	changpage(){
		var value=this.paper.stdSujQnoPoints
		var i=value.length
		if(i>0){
						  let down_point=this.paper.stdPoints[1]
						  let s=-1
						  
						  for(let i=0;i<value.length;i++){
							  if((value[i].y+value[i].h) >= (down_point.y-10)){
							  		s=i
							  		this.cur_page++
							  		this.paper_page.push({
							  			pno:this.cur_page,
							  			bin:this.decToBin4(this.cur_page).split('')
							  		})
							  		break
							  }
						  }
						  if(s<0)return
						  value.forEach((item,index)=>{
							  if(index == s){
								  item.pno++
								  if(this.paper.sub[index].title){
									item.y=10  
								  }else{
									  item.y=5
								  }
								  
							  }else if(index > s){
								  item.pno++
								  if(this.paper.sub[index].title){
								  	item.y=value[index-1].y+value[index-1].h+8
								  }else{
								  	item.y=value[index-1].y+value[index-1].h+3								
								  }
								  
							  }
						  })
			this.changpage()
		}
	},
	calcXY(){
		function sum(arr,start,end) {
			arr=JSON.parse(JSON.stringify(arr))
			arr=arr.splice(start,end)
		  return arr.reduce((acc, curr) => Number(acc) + Number(curr), 0);
		}
		let col=this.addForm.col
		let list=this.paper.obj.list,list1=this.list
		let x,y=2.5,max=[0,0,0,0,0,0,0,0,0,0]
		 
		list1.forEach(item=>{
			item.type=this.addForm.type
			if(item.type == 3){
				item.num=2
			}
			list.push(item)
		})
		list.forEach((item,index)=>{
			let r=parseInt(index/25),i=parseInt(index/col)
			if(r>0){
				i=parseInt(index%(r*25)/col)
			}
			item.points=[]
			
			if(index>0)y=y+5
			if(index>0 && index%col == 0){
				y=2.5+27*r
			}
			
			x=8+35*i
		
			if(index>0 && (index%25 >= 0 && index%25 < 5)){
				x=8
			}
			for(let i=0;i<item.num;i++){
				if(i>0)x+=6
				
				item.points.push({
					x:x,
					y:y,
					w:4,
					h:2.5
				})
			}
		})
		
		var dft={...this.dft}
		dft.h=Math.ceil(list.length/25)*28
		if(this.paper.objAnsPoints.length>0){
			this.paper.objAnsPoints[0].h=dft.h
		}else{
			this.paper.objAnsPoints.push(dft)
		}
		
		this.list=[]
		
	},

		handleExportPdf(){
			this.loading = true
			// downloadPDF(this.$refs.contenterPdf)
			console.log(this.$refs.contenterPdf)
			printHtml(document.getElementById("contenterPdf").innerHTML)
			// printJS({
			// 	printable:"contenterPdf",
			// 	type:"html",
			// 	style:workOrderStyle(),
			// 	targetStyles:["*"]
			// })
			this.loading = false
		}
  },
  created() {

  },
};
</script>