pbl-teacher-table/src/components/pages/addCourse.vue

<template>
	<div class="pb_content">
		<div class="pb_content_body" style="position: relative">
			<div class="right">
				<div
					style="
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						width: 100%;
						background: #fff;
						border-radius: 10px;
					"
				>
					<div
						style="
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
							border-radius: 80px;
							box-shadow: 0px 1px 2px 3px #f2f2f2;
							margin: 30px 20px 20px 45px;
							min-width: 420px;
						"
					>
						<h3 class="info_title" v-if="steps == 1">项目内容填写</h3>
						<h3 class="info_title" v-if="steps == 2">请选择文档模板</h3>
						<h3 class="info_title" v-if="steps == 3">项目内容填写</h3>
						<h3 class="info_title" v-if="steps == 4">上传项目</h3>
						<el-breadcrumb
							separator-class="el-icon-arrow-right"
							style="margin-top: 15px"
						>
							<el-breadcrumb-item
								:to="{ path: '/course?userid=' + userid + '&oid=' + oid }"
								>项目管理</el-breadcrumb-item
							>
							<el-breadcrumb-item>添加项目</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<div
						v-if="steps == 1 || steps == 2 || steps == 3"
						style="
							font-size: 25px;
							color: #dedede;
							font-weight: bold;
							margin-left: auto;
							margin-right: 2%;
						"
					>
						{{
							steps == 1
								? "第一步"
								: steps == 2
								? "第二步"
								: steps == 3
								? "第三步"
								: ""
						}}
					</div>
				</div>
				<div style="display: flex; margin-top: 20px">
					<div class="stepBg" :class="steps == 3 ? 'isHeight' : ''">
						<div v-if="steps == 1" class="first" @click="navSteps(1)">
							<div><img src="../../assets/icon/first.png" alt="" /></div>
							<div>填写基本信息</div>
						</div>
						<div v-else class="firstNo" @click="navSteps(1)">
							<div><img src="../../assets/icon/firstNo.png" alt="" /></div>
							<div>填写基本信息</div>
						</div>
						<div v-if="steps == 2" class="second" @click="navSteps(2)">
							<div><img src="../../assets/icon/second.png" alt="" /></div>
							<div>选择文档模板</div>
						</div>
						<div v-else class="secondNo" @click="navSteps(2)">
							<div><img src="../../assets/icon/secondNo.png" alt="" /></div>
							<div>选择文档模板</div>
						</div>
						<div v-if="steps == 3" class="third" @click="navSteps(3)">
							<div><img src="../../assets/icon/third.png" alt="" /></div>
							<div>上传项目内容</div>
						</div>
						<div v-else class="thirdNo" @click="navSteps(3)">
							<div><img src="../../assets/icon/thirdNo.png" alt="" /></div>
							<div>上传项目内容</div>
						</div>
						<div v-if="steps == 4" class="four">
							<div><img src="../../assets/icon/four.png" alt="" /></div>
							<div>上传完成</div>
						</div>
						<div v-else class="fourNo">
							<div><img src="../../assets/icon/fourNo.png" alt="" /></div>
							<div>上传完成</div>
						</div>
					</div>

					<div
						style="
							width: calc(100% - 17% - 25px);
							background: #fff;
							border-radius: 10px;
							min-height: 550px;
							min-width: 800px;
						"
						v-if="this.steps == 1"
					>
						<div class="basic_box">
							<div class="big_box">
								<div class="left_first">
									<div>
										<div class="bInfo_title">
											<span style="color: red">*</span>项目名称
										</div>
										<div style="display: flex">
											<img
												src="../../assets/icon/projectName.png"
												alt=""
												style="margin-right: 8px"
											/>
											<input
												type="text"
												placeholder="请输入项目名称"
												class="binfo_input"
												v-model="courseName"
											/>
										</div>
									</div>
									<div class="both">
										<div class="choose">
											<div
												class="all_choose"
												v-for="(item, index) in CourseType[0]"
												:key="index"
											>
												<span>{{ item.name }}</span>
												<el-select
													v-model="courseTypeId[item.id]"
													placeholder="请选择"
													@change="getTypeName"
												>
													<el-option
														v-for="item1 in CourseTypeJson[item.id]"
														:key="item1.id"
														:label="item1.name"
														:value="item1.id"
													>
													</el-option>
												</el-select>
											</div>
										</div>
										<div class="right_first">
											<div>
												<div style="flex: 0.5 1 0%; margin: 0 20px 0 0">
													<div
														class="bInfo_title"
														style="margin-top: 0 !important"
													>
														<span style="color: red">*</span>课程封面
													</div>

													<el-upload
														:class="{ disUoloadSty: noneBtnImg }"
														class="upCss"
														action="#"
														list-type="picture"
														v-loading="uploadLoading1"
														:http-request="beforeUpload1"
														ref="upload1"
														:on-preview="handlePictureCardPreview"
														:on-remove="handle_remove1"
														:show-file-list="true"
														:file-list="cover"
														accept="image/*"
														:limit="1"
														:on-exceed="onExceed"
													>
														<i class="el-icon-plus"></i>
													</el-upload>
												</div>
												<div
													style="
														display: flex;
														flex-direction: row;
														flex-wrap: nowrap;
													"
												>
													<div style="flex: 0.5 1 0%; margin-top: 30px">
														<div class="bInfo_title">
															<span style="color: red">*</span>选择项目成员
														</div>
														<div
															class="addPeople"
															@click="addPP"
															v-if="this.checkboxList.length == 0"
														>
															添加成员
														</div>
														<div class="addPeople" @click="addPP" v-else>
															已添加，点击查看
														</div>
													</div>
													<div style="flex: 0.5 1 0%; margin-top: 30px">
														<div class="bInfo_title">协同编辑</div>
														<div class="addPeople" style="background: #6b92c9">
															添加协同成员
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div>
										<div class="bInfo_title">
											<span style="color: red">*</span>简要描述
										</div>
										<div>
											<textarea
												rows="8"
												class="binfo_input"
												cols=""
												v-model="courseText"
											></textarea>
										</div>
									</div>
									<el-switch
										v-model="isTeacherSee"
										active-text="允许给其他老师查看"
										style="margin: 40px 0 0 25px; padding-bottom: 30px"
									>
									</el-switch>
								</div>
							</div>
						</div>
					</div>
					<div
						style="
							width: calc(100% - 17% - 25px);
							background: #fff;
							border-radius: 10px;
							min-height: 550px;
							min-width: 800px;
						"
						v-if="this.steps == 2"
					>
						<div class="basic_box" style="margin: 20px 30px 0 !important">
							<div
								style="
									color: #b8b8b8;
									background: #fff;
									width: 26%;
									height: 40px;
									border-radius: 15px;
									padding-left: 20px;
									line-height: 40px;
									font-size: 17px;
									box-shadow: 0px 1px 2px 2px #e0e0e0;
								"
							>
								请选择合适的项目模板
							</div>
							<div class="wordbox">
								<div
									class="wordTeacher"
									v-for="(aa, indexF) in templateArray"
									:key="indexF"
									@click="checkTemplate(aa)"
								>
									<div class="wordPic">
										<img src="../../assets/icon/wordMub.png" alt="" />
									</div>

									<div
										style="
											margin-top: 10px;
											line-height: 19px;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
											padding: 0 20px;
										"
									>
										{{ aa.title }}
									</div>
									<div class="checkword">
										<img
											src="../../assets/icon/checked.png"
											alt=""
											v-if="templateC.id == aa.id"
										/>
										<img src="../../assets/icon/check.png" alt="" v-else />
									</div>
								</div>
								<div
									class="wordTeacher"
									@click="checkTemplate1(myWord)"
									v-if="cid != '' && cid != undefined"
								>
									<div class="wordPic">
										<img src="../../assets/icon/wordMub.png" alt="" />
									</div>

									<div
										style="
											margin-top: 10px;
											line-height: 19px;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
											padding: 0 20px;
										"
									>
										我的文档
									</div>
									<div class="checkword">
										<img
											src="../../assets/icon/checked.png"
											alt=""
											v-if="cid != '' && cid != undefined"
										/>
										<img src="../../assets/icon/check.png" alt="" v-else />
									</div>
								</div>
							</div>
						</div>
					</div>
					<div
						style="
							width: calc(100% - 17% - 25px);
							background: #fff;
							border-radius: 10px;
							min-height: 550px;
							min-width: 800px;
						"
						v-if="this.steps == 3"
					>
						<div class="basic_box" style="margin: 0px 0 0 30px">
							<div
								style="display: flex; flex-direction: row; align-items: center"
							>
								<div class="cru_selectBox">
									<div
										v-for="(item, index) in unitJson"
										:key="index"
										class="cru_select"
										:class="unitIndex == index ? 'cru_selected' : 'cru_select'"
										@click="unitSet(index)"
									>
										第{{ index + 1 }}阶段
									</div>
									<img
										src="../../assets/line.png"
										class="cru_line"
										:style="{
											left: offsetLetfPx + 'px',
										}"
									/>
								</div>
								<div class="addStageImg" @click="addunit">
									<img src="../../assets/icon/add.png" alt="" />
								</div>
							</div>

							<div
								class="chapter_box"
								v-for="(item, index) in unitJson[unitIndex].chapterInfo"
								:key="index"
							>
								<div>
									<div class="chapter_contentbox">
										<div>第{{ unitIndex + 1 }}阶段</div>
										<div>
											<input
												type="text"
												placeholder="单元标题"
												class="binfo_input"
												v-model="unitJson[unitIndex].dyName"
											/>
										</div>
										<div
											v-if="unitJson.length > 1"
											@click="deleteUnit(unitIndex)"
										></div>
									</div>
									<div style="margin: 30px 0 10px; font-size: 18px">
										阶段描述
									</div>
									<div>
										<textarea
											rows="6"
											class="binfo_input"
											cols=""
											style="width: 80% !important; height: 90px"
											v-model="unitJson[unitIndex].dyText"
										></textarea>
									</div>
									<el-switch
										v-model="unitJson[unitIndex].isTalk"
										active-text="是否开启评价"
										style="margin: 25px 0px 0px 0"
									>
									</el-switch>
								</div>
								<div
									style="
										display: flex;
										margin: 23px 0;
										flex-direction: row;
										justify-content: flex-start;
										align-items: center;
									"
								>
									<div
										style="
											font-size: 1.5em;
											font-weight: bold;
											margin-top: 15px;
										"
									>
										添加工具
									</div>
									<div class="line"></div>
								</div>
								<div class="toolChoose">
									<div class="tool">
										<div class="whiteBIcon" @click="addTools(1)">
											<img src="../../assets/icon/whiteBordIcon.png" alt="" />
										</div>
										<div class="check">
											<img
												src="../../assets/icon/checkNo.png"
												alt=""
												v-if="item.toolChoose.indexOf(1) == -1"
											/>
											<img
												src="../../assets/icon/checkedIs.png"
												alt=""
												v-else
											/>
										</div>
									</div>
									<div class="tool">
										<div class="whiteBIcon" @click="addTools(2)">
											<img src="../../assets/icon/noteIcon.png" alt="" />
										</div>
										<div class="check">
											<img
												src="../../assets/icon/checkNo.png"
												alt=""
												v-if="item.toolChoose.indexOf(2) == -1"
											/>
											<img
												src="../../assets/icon/checkedIs.png"
												alt=""
												v-else
											/>
										</div>
									</div>
									<div class="tool">
										<div class="whiteBIcon" @click="addTools(3)">
											<img src="../../assets/icon/mindIcon.png" alt="" />
										</div>
										<div class="check">
											<img
												src="../../assets/icon/checkNo.png"
												alt=""
												v-if="item.toolChoose.indexOf(3) == -1"
											/>
											<img
												src="../../assets/icon/checkedIs.png"
												alt=""
												v-else
											/>
										</div>
									</div>
									<div class="tool">
										<div class="whiteBIcon" @click="addTools(4)">
											<img src="../../assets/icon/askIcon.png" alt="" />
										</div>
										<div class="check">
											<img
												src="../../assets/icon/checkNo.png"
												alt=""
												v-if="item.toolChoose.indexOf(4) == -1"
											/>
											<img
												src="../../assets/icon/checkedIs.png"
												alt=""
												v-else
											/>
										</div>
									</div>
									<div class="tool">
										<div class="whiteBIcon" @click="addTools(5)">
											<img src="../../assets/icon/scoreIcon.png" alt="" />
										</div>
										<div class="check">
											<img
												src="../../assets/icon/checkNo.png"
												alt=""
												v-if="item.toolChoose.indexOf(5) == -1"
											/>
											<img
												src="../../assets/icon/checkedIs.png"
												alt=""
												v-else
											/>
										</div>
									</div>
									<div class="tool">
										<div class="whiteBIcon" @click="addTools(6)">
											<img src="../../assets/icon/wordIcon.png" alt="" />
										</div>
										<div class="check">
											<img
												src="../../assets/icon/checkNo.png"
												alt=""
												v-if="item.toolChoose.indexOf(6) == -1"
											/>
											<img
												src="../../assets/icon/checkedIs.png"
												alt=""
												v-else
											/>
										</div>
									</div>
								</div>
								<div
									class="basic_box"
									style="margin: 45px 0 0 15px; min-height: 0"
								>
									<div
										style="
											display: flex;
											margin: 15px 0;
											flex-direction: row;
											justify-content: flex-start;
											align-items: center;
										"
									>
										<div
											style="
												font-size: 1.5em;
												font-weight: bold;
												margin-top: 15px;
											"
										>
											附件添加
										</div>
										<div class="line"></div>
									</div>
									<!-- <h3 class="info_title" style="margin: 0"></h3> -->

									<div>
										<div
											class="add_chapters_box"
											v-if="item.chapterData.length == 0"
											style="height: 185px"
										></div>
										<div
											v-else
											class="add_chapters_box"
											style="display: flex; flex-direction: column"
										>
											<div
												class="chapter_upload"
												v-for="(item1, index1) in item.chapterData"
												:key="item1.id"
												@click="
													getChapterData(
														$event,
														unitIndex,
														index,
														index1,
														item1.type
													)
												"
											>
												<div class="chapter_upload_t" style="width: 100%"></div>
												<div
													class="chapter_upload_o"
													style="
														position: relative;
														display: flex;
														align-items: center;
													"
												>
													<div
														class="chapter_upload_l"
														style="padding: 1px 0 0 10px"
													>
														<div
															v-if="item1.type == 2"
															class="chapter_upload_l_i1"
														></div>
														<div
															v-if="item1.type == 3"
															class="chapter_upload_l_i5"
															style="margin-right: 4px"
														></div>
													</div>
													<div
														class="chapter_upload_ic"
														style="
															cursor: pointer;
															position: absolute;
															width: 45px;
															right: 0;
															top: 0;
														"
													>
														<div class="chapter_upload_ic_l"></div>
														<div
															class="chapter_upload_ic_r"
															style="position: absolute"
															@click.stop="
																deleteChapterData(
																	$event,
																	unitIndex,
																	index,
																	index1
																)
															"
														>
															<div></div>
														</div>
													</div>
													<div class="chapter_upload_n">
														<input
															v-if="item1.type == 2 || item1.type == 3"
															:placeholder="item1.name"
															@change="
																updataVideoT(
																	$event,
																	unitIndex,
																	chapterIndex,
																	index1
																)
															"
															style="
																border: none;
																outline: none;
																width: 55%;
																minwidth: 215px;
																z-index: 99;
																font-size: 14px;
															"
														/>
														<input
															:placeholder="item1.name"
															v-else
															style="
																border: none;
																outline: none;
																width: 55%;
																minwidth: 215px;
															"
															readonly="true"
														/>

														<div class="chapter_upload_ud" style="z-index: 99">
															<div
																class="chapter_upload_up"
																@click="upCd($event, unitIndex, index, index1)"
															></div>
															<div
																class="chapter_upload_down"
																@click="
																	downCd($event, unitIndex, index, index1)
																"
															></div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="add_info_box">
										<button class="info_btn" @click="addImg($event)">
											添加视频
											<input
												type="file"
												accept="video/mp4,video/quicktime,video/x-msvideo"
												style="display: none"
												@change="beforeUpload2($event, unitIndex, 2)"
											/>
										</button>
										<button class="info_btn" @click="addImg($event)">
											添加附件
											<input
												type="file"
												accept="application/pdf,.ppt,.pptx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
												style="display: none"
												@change="beforeUpload2($event, unitIndex, 3)"
											/>
										</button>
									</div>
								</div>
								<div
									class="basic_box"
									style="margin: 45px 0 0 15px; min-height: 0"
								>
									<div
										style="
											display: flex;
											margin: 15px 0;
											flex-direction: row;
											justify-content: flex-start;
											align-items: center;
										"
									>
										<div
											style="
												font-size: 1.5em;
												font-weight: bold;
												margin-top: 15px;
											"
										>
											作业设置
										</div>
										<div class="line"></div>
									</div>
									<div class="homework_box">
										<div style="display: flex; justify-content: flex-start">
											<div class="addHW" @click="addHw($event)">
												<img src="../../assets/icon/addHW.png" alt="" />
												<input
													type="file"
													style="display: none"
													@change="beforeUpload2($event, unitIndex, 5)"
												/>
											</div>
											<div
												class="zyBox"
												v-for="(item2, index2) in item.homeworkList"
												:key="index2"
											>
												<div
													class="deleteZy"
													@click="deleteHomeworkBox(unitIndex, index, index2)"
												>
													<img src="../../assets/icon/delete.png" alt="" />
												</div>
												<div class="zyImg">
													<img src="../../assets/zy.png" alt="" />
												</div>
												<div
													style="
														width: 110px;
														font-size: 15px;
														overflow: hidden;
														white-space: nowrap;
													"
												>
													{{ item2.name }}
												</div>
											</div>
										</div>
									</div>
									<div class="time">
										<div class="small_title">
											开始时间<span style="color: red">*</span>
										</div>
										<el-date-picker
											v-model="unitJson[unitIndex].startTime"
											type="date"
											placeholder="选择日期"
											style="margin-left: 5px"
										>
										</el-date-picker>
										<div class="small_title" style="margin-left: 40px">
											结束时间<span style="color: red">*</span>
										</div>
										<el-date-picker
											v-model="unitJson[unitIndex].endTime"
											type="date"
											placeholder="选择日期"
											style="margin-left: 5px"
										>
										</el-date-picker>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div
						style="
							width: calc(100% - 17% - 25px);
							background: #fff;
							border-radius: 10px;
							min-height: 550px;
							min-width: 800px;
						"
						v-if="this.steps == 4"
					>
						<div class="basic_box_success">
							<div class="right_img">
								<img src="../../assets/icon/right.png" alt="" />
							</div>
							<div style="font-weight: bold">成功</div>
							<div>您的课程编号</div>
							<div class="number">{{ number }}</div>
							<div class="success_button">
								<div class="look_course">邀请老师协同编辑</div>
								<div class="attend_others" @click="dialogVisible = true">
									预览课程
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- <div class="line"></div> -->

				<div class="info_btnBox">
					<button
						class="info_btn"
						v-if="steps == 1"
						@click="goTo('/course?userid=' + userid + '&oid=' + oid)"
					>
						返回课程
					</button>
					<button
						class="info_btn"
						v-if="steps > 1 && steps != 5"
						@click="lastSteps"
					>
						{{ steps == 4 ? "返回首页" : "上一步" }}
					</button>
					<button class="info_btn" v-if="steps < 5" @click="nextSteps">
						{{ steps == 3 ? "确认上传" : "下一步" }}
					</button>
				</div>
			</div>
		</div>
		<el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			:append-to-body="true"
			width="25%"
			:before-close="handleClose"
			class="dialog_diy2 customWidth"
		>
			<div>请复制该链接邀请协同编辑</div>
			<div>http://www.boomyon.com/index-zhang.com</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary">复制链接分享</el-button>
				<el-button @click="dialogVisible = false">取消</el-button>
			</span>
		</el-dialog>
		<el-dialog
			:title="updateBoolean2 ? '查看文档' : '添加文档'"
			:visible.sync="dialogVisible1"
			:append-to-body="true"
			width="25%"
			:before-close="handleClose"
			class="dialog_diy2 customWidth"
		>
			<el-form>
				<el-form-item label="文档标题">
					<el-input
						v-model="tTitle"
						auto-complete="off"
						placeholder="请输入文档标题名..."
					></el-input>
				</el-form-item>
				<div>文档简介</div>
				<editor-bar v-model="tdetail" @change="change"></editor-bar>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="addWord" v-if="!updateBoolean2"
					>添加</el-button
				>
				<el-button type="primary" @click="upWord" v-else>修 改</el-button>
			</span>
		</el-dialog>
		<el-dialog
			title="添加文档"
			:visible.sync="dialogVisible2"
			:append-to-body="true"
			width="500px"
			:before-close="handleClose"
			class="dialog_diy"
		>
			<el-form>
				<el-form-item label="文档标题">
					<el-input
						v-model="templateC.title"
						auto-complete="off"
						placeholder="请输入文档标题名..."
					></el-input>
				</el-form-item>
				<div>文档内容</div>
				<editor-bar v-model="cTemplate" @change="change"></editor-bar>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="wordNext()">确定</el-button>
			</span>
		</el-dialog>
		<el-dialog
			title="添加项目成员"
			:visible.sync="dialogVisible3"
			:append-to-body="true"
			width="25%"
			height="80%"
			:before-close="handleClose"
			class="addNewPP customWidth"
		>
			<div class="people">
				<div class="people_top">
					<div class="people_nav">选择成员</div>
					<div class="people_top_right">
						<div class="people_search">
							<el-input
								placeholder="搜索成员"
								v-model="searchPeople"
							></el-input>
							<div class="search_img" @click="searchStudent">
								<img src="../../assets/icon/search.png" alt="" />
							</div>
						</div>
					</div>
				</div>
				<el-checkbox-group v-model="checkboxList" class="people_name">
					<el-checkbox
						v-for="item in studentJuri"
						:key="item.userid"
						:label="item.userid"
						>{{ item.name ? item.name : "暂无学生可选" }}</el-checkbox
					>
				</el-checkbox-group>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible3 = false">取 消</el-button>
				<el-button type="primary" @click="isAddPP">确定</el-button>
			</span>
		</el-dialog>
		<el-dialog
			title="创建问卷调查"
			:visible.sync="dialogVisible4"
			:append-to-body="true"
			width="800px"
			:before-close="handleClose"
			class="dialog_diy"
		>
			<div
				v-for="(item, index) in unitJson[unitIndex].chapterInfo"
				:key="index"
			>
				<div
					class="a_add_title"
					style="
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
					"
				>
					<div style="margin-right: 20px; font-size: 20px">问卷标题:</div>
					<el-input
						v-model="item.askTitle"
						placeholder="请输入问卷标题"
						style="width: 400px"
					></el-input>
				</div>
				<div class="a_addBox">
					<div style="font-size: 16px; color: #c7c7c7">请输入问卷内容</div>
					<div
						class="a_add_box"
						v-for="(item1, index1) in item.askCount"
						:key="index1"
					>
						<div class="a_add_head">
							<div>
								{{ index1 + 1 + "、" }}
								<el-input
									class="a_add_head_input"
									v-model="item.askJson[index1].askstitle"
									placeholder="请输入问卷题目..."
								></el-input>
							</div>
							<div class="a_add_head_div">
								<el-button type="primary" size="small" @click="addAskList()"
									>添加</el-button
								>
								<el-button
									type="primary"
									size="small"
									@click="deleteAskList()"
									v-if="index1 != 0"
									>删除</el-button
								>
							</div>
						</div>
						<div class="a_add_body">
							<div class="a_add_input">
								<el-input
									v-for="(item2, checkIndex) in item.askJson[index1].askItem"
									:key="checkIndex"
									v-model="item.askJson[index1].checkList[checkIndex]"
									placeholder="请输入选项..."
									style="width: 150px; margin: 10px 10px 0 0"
								></el-input>
							</div>
							<div class="a_add_body_div">
								<el-button
									style="margin: 10px 0px 0 0"
									type="primary"
									size="small"
									@click="addcheckList(item.askJson[index1])"
									>添加</el-button
								>
								<el-button
									type="primary"
									size="small"
									style="margin: 10px 0 0 0"
									@click="deletecheckList(item.askJson[index1])"
									v-if="item.askJson[index1].askItem != 1"
									>删除</el-button
								>
							</div>
						</div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cleanAsk(publicTool)">取 消</el-button>
				<el-button type="primary" @click="addAsk">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import "../../common/aws-sdk-2.235.1.min.js";
	import $ from "jquery";
	import EditorBar from "../../components/tools/wangEnduit";
	export default {
		components: { EditorBar },
		data() {
			return {
				checkAll: false,
				checkedCities: [],
				isIndeterminate: true,
				steps: 1,
				nbOrder: 0,
				courseName: "",
				isTeacherSee: false,
				courseText: "",
				formLabelWidth: "100px",
				uploadLoading1: false,
				noneBtnImg: false,
				updateBoolean2: false,
				unitIndex: 0,
				dialogVisible: false,
				dialogVisible1: false,
				dialogVisible2: false,
				dialogVisible3: false,
				dialogVisible4: false,
				publicTool: 0,
				searchPeople: "",
				userid: this.$route.query.userid,
				oid: this.$route.query.oid,
				cid: this.$route.query.cid != "" ? this.$route.query.cid : "",
				cover: [], //课程封面
				myWord: [],
				unitJson: [
					{
						dyName: "", //单元标题
						dyText: "",
						startTime: "", //开始时间
						endTime: "", //结束时间
						isTalk: false, //是否开启评价
						chapterInfo: [
							{
								isread: false,
								chapterid: this.guid(),
								title: "",
								courseName: "",
								chapterData: [],
								toolChoose: [],
								askCount: 1,
								askTitle: "",
								askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
								checkJson: [{ checkCount: [], checkPerent: [] }],
								itemCount: 1,
								fileList1: [],
								homeworkList: [],
								video: [],
								testData: [],
								pData: [],
								templateArray: [],
							},
						],
					},
				],
				studentJuri: [],
				checkboxList: [],
				number: "",
				tTitle: "",
				tdetail: "",
				templateC: {},
				cTemplate: "",
				CourseType: [],
				CourseTypeJson: {},
				courseTypeId: {},
				courseTypeSon: [],
			};
		},
		computed: {
			offsetLetfPx: function () {
				//addnum可以直接在模板语法里面用，相当于data内的值
				return (
					$(".cru_select")[this.unitIndex] &&
					$(".cru_select")[this.unitIndex].offsetLeft
				);
			},
		},
		methods: {
			handleCheckAllChange(val) {
				this.checkedCities = val ? cityOptions : [];
				this.isIndeterminate = false;
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isIndeterminate =
					checkedCount > 0 && checkedCount < this.cities.length;
			},
			addHw(e) {
				var el = e.currentTarget;
				el.getElementsByTagName("input")[0].click();
			},
			change(val) {
				console.log(val);
			},
			handleClose(done) {
				done();
			},
			imgChange1(file, fileList, type) {
				if (type == 1) {
					var _tmp = this.cover;
				} else if (type == 2 || type == 3) {
					var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].chapterData;
				} else if (type == 4) {
					var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].fileList1;
				} else {
					var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].homeworkList;
				}
				this.noneBtnImg = _tmp.length >= 1;
			},
			goTo(path) {
				this.$router.push(path);
			},
			guid() {
				var _num,
					i,
					_guid = "";
				for (i = 0; i < 32; i++) {
					_guid += Math.floor(Math.random() * 16).toString(16); //随机0  - 16 的数字 转变为16进制的字符串
					_num = Math.floor((i - 7) / 4); //计算 (i-7)除4
					if (_num > -1 && _num < 4 && i == 7 + 4 * _num) {
						//会使guid中间加 "-"   形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
						_guid += "-";
					}
				}
				return _guid;
			},
			lastSteps() {
				if (this.steps == 4) {
					// window.location.href =
					//   "./course.vue?userid=" + this.userid + "&oid=" + this.oid;
					this.goTo("/course?userid=" + this.userid + "&oid=" + this.oid);
				} else {
					this.steps--;
				}
			},
			navSteps(s) {
				if (s == 1) {
					this.steps = 1;
				}
				if (s == 2) {
					if (
						this.courseName != "" &&
						this.courseText != "" &&
						this.cover.length != 0 &&
						this.checkboxList.length != 0
					) {
						for (var i = 0; i < this.CourseType[0].length; i++) {
							if (this.courseTypeId[this.CourseType[0][i].id] != "") {
								this.courseTypeSon.push(
									this.courseTypeId[this.CourseType[0][i].id]
								);
							} else {
								this.$message.error("请选择分类");
								return;
							}
						}
						this.steps = 2;
					} else {
						this.$message.error("请将信息填写完整");
					}
				}
				if (s == 3) {
					if (this.templateC.id != undefined) {
						this.cTemplate = this.templateC.content;
						this.dialogVisible2 = false;
						this.steps = 3;
					} else {
						this.$message.error("请选择文档");
						return;
					}
				}
			},
			nextSteps() {
				if (this.steps == 1) {
					if (
						this.courseName != "" &&
						this.courseText != "" &&
						this.cover.length != 0 &&
						this.checkboxList.length != 0
					) {
						for (var i = 0; i < this.CourseType[0].length; i++) {
							if (this.courseTypeId[this.CourseType[0][i].id] != "") {
								this.courseTypeSon.push(
									this.courseTypeId[this.CourseType[0][i].id]
								);
							} else {
								this.$message.error("请选择分类");
								return;
							}
						}
						this.steps++;
					} else {
						this.$message.error("请将信息填写完整");
					}
				} else if (this.steps == 2) {
					if (this.templateC.id == "" || this.templateC.id == undefined) {
						this.$message.error("请选择文档");
						return;
					}
					this.cTemplate = this.templateC.content;
					this.dialogVisible2 = false;
					this.steps++;
				} else if (this.steps == 3) {
					if (this.cid == "" || this.cid == undefined) {
						this.addWork();
						this.steps++;
					} else {
						this.updateWork();
						this.steps++;
					}
				}
			},
			unitSet(i) {
				this.unitIndex = i;
			},
			time() {
				if (!this.now) {
					this.now = new Date().getTime();
					return true;
				} else {
					let time = new Date().getTime();
					if (time - this.now > 3000) {
						this.now = time;
						return true;
					} else {
						return false;
					}
				}
			},
			deleteUnit(i) {
				var _this = this;
				if (_this.time()) {
					_this
						.$confirm("确定删除此单元吗?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						})
						.then(() => {
							_this.unitJson.splice(i, 1);
							// var a = 0;
							// if (_this.unitIndex > 0) {
							//   a = _this.unitIndex - 1;
							// }
							this.unitIndex = this.unitIndex - 1;
							_this.$message.success("删除成功");
						})
						.catch(() => {
							return;
						});
				}
			},

			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
			},
			clean(i, c) {
				this.unitJson[this.unitIndex].chapterInfo[i].fileList1.splice(c, 1);
			},
			handle_remove1(file, fileList, type) {
				var _tmp = this.cover;
				for (var i = 0, len = _tmp.length; i < len; i++) {
					if (_tmp[i].uid == file.uid) {
						_tmp.splice(i, 1);
						break;
					}
					this.cover = _tmp;
				}
				this.noneBtnImg = _tmp.length >= 1;
			},
			addImg(e) {
				var el = e.currentTarget;
				el.getElementsByTagName("input")[0].click();
			},
			beforeUpload1(event, type) {
				const loading = this.openLoading();
				var file = event.file;
				var credentials = {
					accessKeyId: "AKIATLPEDU37QV5CHLMH",
					secretAccessKey: "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",
				}; //秘钥形式的登录上传
				window.AWS.config.update(credentials);
				window.AWS.config.region = "cn-northwest-1"; //设置区域

				var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
				var _this = this;

				if (file) {
					var params = {
						Key:
							file.name.split(".")[0] +
							new Date().getTime() +
							"." +
							file.name.split(".")[1],
						ContentType: file.type,
						Body: file,
						"Access-Control-Allow-Credentials": "*",
						ACL: "public-read",
					}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
					var options = {
						partSize: 2048 * 1024 * 1024,
						queueSize: 2,
						leavePartsOnError: true,
					};
					bucket
						.upload(params, options)
						.on("httpUploadProgress", function (evt) {
							//这里可以写进度条
							// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
						})
						.send(function (err, data) {
							loading.close();
							if (err) {
								var a = _this.$refs.upload1.uploadFiles;
								a.splice(a.length - 1, a.length);
								_this.$message.error("上传失败");
							} else {
								_this.cover.push({
									name: file.name,
									url: data.Location,
									uid: file.uid,
								});
								_this.imgChange1(null, null, 1);
								console.log(data.Location);
							}
						});
				}
			},
			beforeUpload(data) {
				this.$refs.upload1.uploadFiles;
				this.uploadLoading1 = true;
				var file = data.file;
				var credentials = {
					accessKeyId: "AKIATLPEDU37QV5CHLMH",
					secretAccessKey: "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",
				}; //秘钥形式的登录上传
				window.AWS.config.update(credentials);
				window.AWS.config.region = "cn-northwest-1"; //设置区域

				var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
				var _this = this;

				if (file) {
					var params = {
						Key:
							file.name.split(".")[0] +
							new Date().getTime() +
							"." +
							file.name.split(".")[1],
						ContentType: file.type,
						Body: file,
						"Access-Control-Allow-Credentials": "*",
						ACL: "public-read",
					}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
					var options = {
						partSize: 2048 * 1024 * 1024,
						queueSize: 2,
						leavePartsOnError: true,
					};
					bucket
						.upload(params, options)
						.on("httpUploadProgress", function (evt) {
							//这里可以写进度条
							// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
						})
						.send(function (err, data) {
							_this.uploadLoading1 = false;
							if (err) {
								var a = _this.$refs.upload1.uploadFiles;
								a.splice(a.length - 1, a.length);
								_this.$message.error("上传失败");
							} else {
								//上传成功处理
								_this.unitJson[_this.unitIndex].chapterInfo[0].fileList1.push({
									name: file.name,
									url: data.Location,
									uid: file.uid,
								});
								_this.imgChange();
								console.log(data.Location);
							}
						});
				}
			},
			onExceed() {
				this.$message.error("课程封面仅支持上传一张，请删除后再进行上传");
			},
			beforeUpload2(event, unitIndex, type) {
				const loading = this.openLoading();
				var file = event.target.files[0];
				var credentials = {
					accessKeyId: "AKIATLPEDU37QV5CHLMH",
					secretAccessKey: "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",
				}; //秘钥形式的登录上传
				window.AWS.config.update(credentials);
				window.AWS.config.region = "cn-northwest-1"; //设置区域

				var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
				var _this = this;

				if (file) {
					var params = {
						Key:
							file.name.split(".")[0] +
							new Date().getTime() +
							"." +
							file.name.split(".")[1],
						ContentType: file.type,
						Body: file,
						"Access-Control-Allow-Credentials": "*",
						ACL: "public-read",
					}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
					var options = {
						partSize: 2048 * 1024 * 1024,
						queueSize: 2,
						leavePartsOnError: true,
					};
					bucket
						.upload(params, options)
						.on("httpUploadProgress", function (evt) {
							//这里可以写进度条
							// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
						})
						.send(function (err, data) {
							loading.close();
							if (err) {
								var a = _this.$refs.upload1.uploadFiles;
								a.splice(a.length - 1, a.length);
								_this.$message.error("上传失败");
							} else {
								if (type == 2 || type == 3) {
									_this.unitJson[unitIndex].chapterInfo[0].chapterData.push({
										name: file.name,
										url: data.Location,
										uid: file.uid,
										type: type,
									});
									_this.imgChange1(null, null, type);
								} else if (type == 4) {
									_this.unitJson[_this.unitIndex].chapterInfo[0].fileList1.push({
										name: file.name,
										url: data.Location,
										uid: file.uid,
									});
									_this.imgChange1(null, null, type);
								} else if (type == 5) {
									_this.unitJson[
										_this.unitIndex
									].chapterInfo[0].homeworkList.push({
										name: file.name,
										url: data.Location,
										uid: file.uid,
									});
									_this.imgChange1(null, null, type);
								}
								console.log(data.Location);
							}
						});
				}
			},
			addunit() {
				this.unitJson.push({
					dyName: "", //单元标题
					dyText: "",
					startTime: "", //开始时间
					endTime: "", //结束时间
					isTalk: false, //是否开启评价
					chapterInfo: [
						{
							isread: false,
							chapterid: this.guid(),
							title: "",
							courseName: "",
							chapterData: [],
							toolChoose: [],
							askCount: 1,
							askTitle: "",
							askJson: [{ askstitle: "", askItem: 1, checkList: [] }],
							checkJson: [{ checkCount: [], checkPerent: [] }],
							itemCount: 1,
							fileList1: [],
							homeworkList: [],
							video: [],
							testData: [],
							pData: [],
							templateArray: [],
						},
					],
				});
			},
			add(e, i) {
				var el = e.currentTarget;
				el.getElementsByTagName("input")[0].click();
			},

			deleteHomeworkBox(unitIndex, index, i) {
				this.unitJson[unitIndex].chapterInfo[index].homeworkList.splice(i, 1);
			},
			getStudent() {
				let params = {
					cn: this.searchPeople,
					oid: this.oid,
					uid: this.userid,
				};
				this.ajax
					.get(this.$store.state.api + "selectProjectStudent", params)
					.then((res) => {
						this.studentJuri = res.data[0];
					})
					.catch((err) => {});
			},
			searchStudent() {
				this.getStudent();
			},

			getChapterData(e, i, j, ic, type) {
				e.stopPropagation();
				this.updataC = true;
				this.icc = ic;
				if ((type == 2 || type == 3) && e.target.tagName !== "INPUT") {
					console.log("还不能下载图片喔");
				}
			},
			deleteChapterData(e, i, j, ic) {
				// window.U.UF.EV.stopBubble();
				e.stopPropagation();
				this.unitJson[i].chapterInfo[j].chapterData.splice(ic, 1);
			},
			updataVideoT(e, i, j, ic) {
				e.stopPropagation();
				this.unitJson[i].chapterInfo[j].chapterData[ic].name = e.target.value;
			},
			upCd(e, i, j, ic) {
				e.stopPropagation();
				if (ic == 0) {
					return;
				}
				var a = this.unitJson[i].chapterInfo[j].chapterData[ic - 1];
				this.unitJson[i].chapterInfo[j].chapterData[ic - 1] =
					this.unitJson[i].chapterInfo[j].chapterData[ic];
				this.unitJson[i].chapterInfo[j].chapterData[ic] = a;
			},
			downCd(e, i, j, ic) {
				e.stopPropagation();
				if (ic == this.unitJson[i].chapterInfo[j].chapterData.length - 1) {
					return;
				}
				var a = this.unitJson[i].chapterInfo[j].chapterData[ic + 1];
				this.unitJson[i].chapterInfo[j].chapterData[ic + 1] =
					this.unitJson[i].chapterInfo[j].chapterData[ic];
				this.unitJson[i].chapterInfo[j].chapterData[ic] = a;
			},
			addWork() {
				let params = [
					{
						uid: this.userid,
						title: this.courseName,
						brief: this.courseText.replace(/%/g, "%25"),
						cover: this.cover.length > 0 ? JSON.stringify(this.cover) : "",
						astudent:
							this.checkboxList.length > 0
								? JSON.stringify(this.checkboxList)
								: "",
						see: this.isTeacherSee == true ? 0 : 1,
						chapters: JSON.stringify(this.unitJson),
						template: this.cTemplate,
						courseType: JSON.stringify(this.courseTypeSon),
					},
				];
				this.ajax
					// .post(this.$store.state.api + "addWork", params)
					.post(this.$store.state.api + "addWorkNew", params)
					.then((res) => {
						this.$message({
							message: "新增成功",
							type: "success",
						});
						this.number = res.data.ordernumber;
						this.islogin = true;
					})
					.catch((err) => {
						this.$message.error("新增失败");
						console.error(err);
					});
			},
			updateWork() {
				let params = [
					{
						cid: this.cid,
						title: this.courseName,
						brief: this.courseText.replace(/%/g, "%25"),
						cover: this.cover.length > 0 ? JSON.stringify(this.cover) : "",
						astudent:
							this.checkboxList.length > 0
								? JSON.stringify(this.checkboxList)
								: "",
						see: this.isTeacherSee == true ? 0 : 1,
						chapters: JSON.stringify(this.unitJson),
						template: this.myWord,
						uid: this.userid,
						courseType: JSON.stringify(this.courseTypeSon),
					},
				];
				this.ajax
					.post(this.$store.state.api + "updateWorkNew", params)
					.then((res) => {
						this.$message({
							message: "修改成功",
							type: "success",
						});
						this.number = this.nbOrder;
					})
					.catch((err) => {
						this.$message.error("修改失败");
						console.error(err);
					});
			},
			guid() {
				var _num,
					i,
					_guid = "";
				for (i = 0; i < 32; i++) {
					_guid += Math.floor(Math.random() * 16).toString(16); //随机0  - 16 的数字 转变为16进制的字符串
					_num = Math.floor((i - 7) / 4); //计算 (i-7)除4
					if (_num > -1 && _num < 4 && i == 7 + 4 * _num) {
						//会使guid中间加 "-"   形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
						_guid += "-";
					}
				}
				return _guid;
			},
			insertWord() {
				this.dialogVisible1 = true;
				this.updateBoolean2 = false;
				this.tTitle = "";
				this.tdetail = "";
			},
			addWord() {
				this.unitJson[this.unitIndex].chapterInfo[0].fileList1.push({
					name: this.tTitle,
					content: this.tdetail,
					uid: this.guid(),
				});
				this.dialogVisible1 = false;
			},
			upWord() {},
			selectWord(uid, i, c) {
				this.dialogVisible1 = true;
				this.updateBoolean2 = true;
				if (
					uid == this.unitJson[this.unitIndex].chapterInfo[i].fileList1[c].uid
				) {
					this.tTitle =
						this.unitJson[this.unitIndex].chapterInfo[i].fileList1[c].name;
					this.tdetail =
						this.unitJson[this.unitIndex].chapterInfo[i].fileList1[c].content;
				}
			},
			isAddPP() {
				if (this.checkboxList.length > 0) {
					this.$message({
						message: "添加成功",
						type: "success",
					});
					this.dialogVisible3 = false;
				} else {
					this.$message({
						message: "请添加项目成员",
						type: "error",
					});
				}
			},
			getTemplate() {
				this.ajax
					.get(this.$store.state.api + "getTemplateT", "")
					.then((res) => {
						this.templateArray = res.data[0];
					})
					.catch((err) => {});
			},
			checkTemplate(res) {
				this.templateC = res;
				this.cTemplate = res.content;
				this.dialogVisible2 = true;
			},
			checkTemplate1(w) {
				this.templateC.title = "我的文档";
				this.cTemplate = w;
				this.dialogVisible2 = true;
			},
			wordNext() {
				//   this.cTemplate = this.templateC.content;
				//   this.steps++;
				this.dialogVisible2 = false;
			},
			addPP() {
				this.dialogVisible3 = true;
			},
			addTools(i) {
				if (this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.length == 0) {
					this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.push(i);
					if (
						i == 4 &&
						this.unitJson[this.unitIndex].chapterInfo[0].askJson.length == 1
					) {
						this.dialogVisible4 = true;
					} else {
						this.dialogVisible4 = true;
					}
				} else {
					if (i == 4) {
						this.dialogVisible4 = true;
					} else {
						if (
							this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.indexOf(
								i
							) != -1
						) {
							this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.splice(
								this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.indexOf(
									i
								),
								1
							);
							// if (i == 4) {
							//   this.unitJson[this.unitIndex].chapterInfo[0].askTitle = "";
							//   this.unitJson[this.unitIndex].chapterInfo[0].askJson = [];
							//   this.unitJson[this.unitIndex].chapterInfo[0].askJson.push({
							//     askstitle: "",
							//     askItem: 1,
							//     checkList: [],
							//   });
							// }
						} else {
							this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.push(i);
						}
					}
				}
				this.$forceUpdate();
			},
			cleanAsk(p) {
				this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.splice(
					this.unitJson[this.unitIndex].chapterInfo[0].toolChoose.indexOf(p),
					1
				);
				this.unitJson[this.unitIndex].chapterInfo[0].askTitle = "";
				this.unitJson[this.unitIndex].chapterInfo[0].askJson = [];
				this.unitJson[this.unitIndex].chapterInfo[0].askJson.push({
					askstitle: "",
					askItem: 1,
					checkList: [],
				});
				this.dialogVisible4 = false;
			},
			addAskList() {
				this.unitJson[this.unitIndex].chapterInfo[0].checkJson.push({
					checkCount: [],
					checkPerent: [],
				});
				this.unitJson[this.unitIndex].chapterInfo[0].askJson.push({
					askstitle: "",
					askItem: 1,
					checkList: [],
				});
				this.unitJson[this.unitIndex].chapterInfo[0].askCount++;
			},
			deleteAskList() {
				this.unitJson[this.unitIndex].chapterInfo[0].askJson.splice(-1);
				this.unitJson[this.unitIndex].chapterInfo[0].askCount--;
			},
			addcheckList(json) {
				json.checkList.length++;
				json.askItem++;
			},
			deletecheckList(json) {
				json.checkList.length--;
				json.askItem--;
			},
			addAsk() {
				if (this.unitJson[this.unitIndex].chapterInfo[0].askTitle === "") {
					this.$message.error("问卷调查标题不能为空！");
					return;
				}
				var aj = this.unitJson[this.unitIndex].chapterInfo[0].askJson;
				var b = 1;
				for (var i = 0; i < aj.length; i++) {
					if (aj[i].askstitle === "") {
						var a = 1;
						for (let index = 0; index < aj[i].askItem; index++) {
							const element = aj[i].checkList[index]
								? aj[i].checkList[index]
								: "";
							if (element != "") {
								b++;
								this.$message.error("填写了问卷调查选项，问卷调查题目不能为空！");
								return;
							} else {
								a++;
							}
						}
						if (b == 1) {
							this.$message.error("至少填写一个问题");
							return;
						}
						// if (a > 1) {
						//   aj.splice(i, 1);
						// }
					} else if (aj[i].askstitle != "") {
						for (let index = 0; index < aj[i].askItem; index++) {
							const element = aj[i].checkList[index]
								? aj[i].checkList[index]
								: "";
							var index = 0;
							for (var z = 0; z < aj[i].checkList.length; z++) {
								var checkC = aj[i].checkList[z] ? aj[i].checkList[z] : "";
								if (checkC != "") {
									index++;
								} else {
									this.$message.error("问卷调查选项不能为空！");
									return;
								}
							}
							b++;
							if (index < 2) {
								this.$message.error(
									"填写了问卷调查的题目，问卷调查选项至少要有两项！"
								);
								return;
							}
							// if (element == "") {
							//   this.$message.error(
							//     "填写了问卷调查的题目，问卷调查选项不能为空！"
							//   );
							//   return;
							// }
						}
					}
				}
				this.unitJson[this.unitIndex].chapterInfo[0].askJson = this.unitJson[
					this.unitIndex
				].chapterInfo[0].askJson.filter((el) => {
					var elc = el.checkList.filter((element) => {
						return element != "";
					});
					return el.askstitle != "" && elc.length != 0;
				});
				this.dialogVisible4 = false;
			},
			selectCourseDetail() {
				if (this.cid == "" || this.cid == undefined) {
					console.log("这是新增课程");
				} else {
					let params = {
						cid: this.cid,
					};
					this.ajax
						.get(this.$store.state.api + "select_course_detail", params)
						.then((res) => {
							this.unitJson = JSON.parse(res.data[0][0].chapters);
							// this.unitJson[0].chapterInfo = JSON.parse(res.data[0][0].chapters);
							for (var j in this.unitJson) {
								for (var i in this.unitJson[j].chapterInfo) {
									this.unitJson[j].chapterInfo[i].toolChoose = this.unitJson[j]
										.chapterInfo[i].toolChoose
										? this.unitJson[j].chapterInfo[i].toolChoose
										: [];
								}
							}
							// this.unitJson[0].dyText = "";
							this.courseName = res.data[0][0].title;
							this.courseText = res.data[0][0].brief;
							this.checkboxList = JSON.parse(res.data[0][0].course_student);
							this.cover = JSON.parse(res.data[0][0].cover);
							this.noneBtnImg = this.cover.length >= 1;
							this.isTeacherSee =
								res.data[0][0].is_teacher_look == 0 ? true : false;
							this.myWord = res.data[0][0].template;
							this.templateC.id = "123";
							this.nbOrder = res.data[0][0].ordernumber;
							this.CourseType[0] = res.data[1];
							// this.selectType();
							for (var i = 0; i < this.CourseType[0].length; i++) {
								this.courseTypeId[this.CourseType[0][i].typePid] =
									this.CourseType[0][i].typeid;
							}
							console.log(this.courseTypeId);
							this.$forceUpdate();
						})
						.catch((err) => {
							console.error(err);
						});
				}
			},
			getTypeName() {
				console.log(this.courseTypeId);
				this.$forceUpdate();
			},
			selectType() {
				this.ajax
					.get(this.$store.state.api + "selectType")
					.then((res) => {
						this.CourseType = res.data;
						for (var i = 0; i < res.data[0].length; i++) {
							if (!this.cid) {
								this.courseTypeId[res.data[0][i].id] = "";
							}
							for (var j = 0; j < res.data[1].length; j++) {
								if (res.data[0][i].id == res.data[1][j].pid) {
									if (!this.CourseTypeJson[res.data[0][i].id]) {
										this.CourseTypeJson[res.data[0][i].id] = [];
									}
									this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
								}
							}
						}
					})
					.catch((err) => {
						console.error(err);
					});
			},
		},
		created() {
			this.selectCourseDetail();
			this.getStudent();
			this.getTemplate();
			this.selectType();
		},
	};
</script>

<style scoped>
	.dialog_diy >>> .el-dialog__header {
		background: #3d67bc !important;
		padding: 15px 20px;
	}
	.dialog_diy >>> .el-dialog__title {
		color: #fff;
	}
	.dialog_diy >>> .el-dialog__headerbtn {
		top: 19px;
	}
	.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
		color: #fff;
	}
	.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
		color: #fff;
	}
	.dialog_diy >>> .el-dialog__body,
	.dialog_diy >>> .el-dialog__footer {
		background: #fafafa;
	}
	.left {
		border-right: 1px solid rgb(60, 94, 143);
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 600px;
		width: 385px;
		height: 80%;
	}

	.tips {
		color: rgb(128, 128, 128);
		font-size: 12px;
		width: 270px;
		margin: 40px;
	}

	.pb_content {
		/* background: #fff; */
		height: 100%;
		margin: 20px 20px 20px 20px;
	}

	.pb_content_body {
		width: 100% !important;
		height: 100%;
	}

	.info_solid {
		width: 270px;
		height: 30px;
		border-left: 1px solid #bdbdbd;
		margin: 10px 0px 10px 30px;
	}

	.info_steps {
		width: 270px;
		font-size: 0.875rem;
		display: flex;
		align-items: center;
	}

	.info_steps span:nth-child(1) {
		width: 30px;
		height: 30px;
		background: rgba(0, 0, 0, 0.38);
		display: block;
		color: #fff;
		border-radius: 40px;
		text-align: center;
		line-height: 30px;
	}

	.steps_active {
		background: #3d67bc !important;
	}

	.info_steps span:nth-child(2) {
		margin-left: 5px;
	}

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

	.basic_box {
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	.basic_box_success {
		width: 80%;
		min-height: 455px;
		margin: 50px auto;
		position: relative;
		text-align: center;
		border-bottom: 1px solid #bfbfbf;
	}
	.info_title {
		font-size: 1.5em;
		margin: 20px 30px 20px 30px;
	}

	.bInfo_title {
		font-size: 16px;
		text-align: left;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.small_title {
		font-size: 14px;
		line-height: 40px;
	}

	.binfo_input {
		font: inherit;
		color: currentColor;
		width: 100%;
		margin: 0;
		padding: 15px 14px;
		display: block;
		min-width: 0;
		outline: none;
		box-sizing: content-box;
		background: none;
		-webkit-tap-highlight-color: transparent;
		border: 1px solid rgba(0, 0, 0, 0.23);
		border-radius: 4px;
		box-sizing: border-box;
		resize: none;
	}

	.binfo_input:focus-visible {
		border: 1px solid rgba(61, 103, 188);
	}

	.chapter_beizhu {
		font-size: 12px;
		font-weight: bold;
		float: right;
		color: rgb(128, 128, 128);
		margin-top: 5px;
	}

	.chapter_uploadBox1 {
		text-align: left;
		background-color: rgb(242, 242, 242);
		width: 100%;
		height: 67px;
		padding: 0px 15px;
		border-radius: 8px;
		overflow: hidden;
		font-size: 16px;
		box-sizing: border-box;
		position: relative;
	}

	.chapter_add {
		width: 100%;
		height: 32px;
		margin-top: 15px;
		cursor: pointer;
	}

	.chapter_add_l {
		margin-left: 5px;
		width: 30px;
		height: 30px;
		float: left;
		border: 1px solid #aaa;
		color: #aaa;
		border-radius: 50%;
		font-size: 25px;
		text-align: center;
	}

	.chapter_add_r {
		font-size: 18px;
		height: 40px;
		line-height: 30px;
		text-indent: 10px;
		color: #aaa;
	}

	.chapter_add_r span {
		font-size: 12px;
		color: rgb(204, 204, 204);
	}

	.chapter_add_input {
		display: none;
	}

	.line {
		width: 85%;
		margin: 0 auto;
		border-top: 1px solid #e5e5e5;
		margin-top: 20px;
	}

	.info_btnBox {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		margin: 20px 0 25px 0;
	}

	.info_btn,
	.teacherWord {
		color: #fff;
		background-color: #6a8ed5;
		padding: 8px 24px;
		font-size: 0.9375rem;
		box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),
			0px 3px 1px -2px rgb(0 0 0 / 12%);
		min-width: 64px;
		font-weight: 500;
		border-radius: 4px;
		box-sizing: border-box;
		border: none;
		cursor: pointer;
	}
	.teacherWord {
		width: 105px !important;
		text-align: center !important;
		line-height: 36px !important;
		padding: 0 !important;
		font-size: 14px !important;
		margin: 10px 0 !important;
	}
	.wordTeacher {
		display: flex;
		flex-direction: column;
		width: 20%;
		text-align: center;
		font-size: 14px;
		margin: 30px 30px 0 10px;
		background: #fff;
		position: relative;
		border-radius: 5px;
		padding: 25px 0px;
	}
	.wordPic {
		margin: 0 auto;
		width: 60px;
		height: 60px;
		cursor: pointer;
	}
	.deleteWord {
		width: 22px;
		height: 22px;
		position: absolute;
		right: 20px;
		top: -10px;
		cursor: pointer;
	}
	.wordPic > img,
	.deleteWord > img {
		width: 100%;
		height: 100%;
	}
	.info_btn:hover {
		background-color: #4f7cd5 !important;
	}

	.cru_selectBox {
		display: flex;
		margin: 24px 0 10px;
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow: auto;
		position: relative;
		height: 47px;
	}

	.cru_selectBox::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 6px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 6px;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	.cru_selectBox::-webkit-scrollbar-track {
		border-radius: 10px;
		background-color: #eee;
	}

	/*定义滑块 内阴影+圆角*/
	.cru_selectBox::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background-color: rgba(0, 0, 0, 0.1);
	}

	.cru_line {
		position: absolute;
		bottom: 0px;
		transition: all 0.5s;
		left: 0px;
		width: 125px;
		margin-left: -25px;
	}

	.cru_select {
		font-size: 21px;
		margin-right: 37px;
		margin-left: 5px;
		cursor: pointer;
		color: #a6a6a6;
	}

	.cru_selected {
		color: #0b7fc2 !important;
	}

	.chapter_contentbox {
		display: flex;
		align-items: center;
		margin-top: 15px;
	}

	.chapter_contentbox div:nth-child(1) {
		width: 150px;
		margin: 0px;
		font-size: 2em;
		color: black;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 600;
	}

	.chapter_contentbox div:nth-child(2) {
		width: 380px;
	}

	.chapter_contentbox div:nth-child(3) {
		background-image: url(../../assets/remove.png);
		cursor: pointer;
		opacity: 0.5;
		width: 40px;
		height: 50px;
		background-repeat: no-repeat;
		background-position: 5px 10px;
	}

	.binfo_input {
		font: inherit;
		color: currentColor;
		width: 100%;
		margin: 0;
		padding: 15px 14px;
		display: block;
		min-width: 0;
		outline: none;
		box-sizing: content-box;
		background: none;
		border: 1px solid rgba(0, 0, 0, 0.23);
		border-radius: 4px;
		box-sizing: border-box;
		background: #fff;
	}

	.binfo_input:focus-visible {
		border: 1px solid rgba(61, 103, 188);
	}

	.time {
		display: flex;
		margin: 35px 0 80px 0;
	}

	.chapter_btnbox {
		width: 160px;
		border-radius: 5px;
		border: 2px dashed gray;
		display: flex;
		padding: 8px 50px;
		align-items: center;
		justify-content: center;
		margin: 30px auto 0;
		cursor: pointer;
	}

	.icon_add {
		position: relative;
		width: 24px;
		padding-top: 20px;
		border-radius: 100%;
		border-width: 2px;
		border-style: solid;
		border-color: gray;
	}

	.icon_add i:nth-child(1) {
		position: absolute;
		left: 50%;
		top: 50%;
		height: 60%;
		transform: translate(-50%, -50%);
		border-width: 1px;
		border-style: solid;
		border-color: inherit;
	}

	.icon_add i:nth-child(2) {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 60%;
		transform: translate(-50%, -50%);
		border-width: 1px;
		border-style: solid;
		border-color: inherit;
	}

	.chapter_btn_w {
		font-size: 0.9375rem;
		font-weight: bold;
		color: gray;
		margin-left: 20px;
	}

	.disUoloadSty >>> .el-icon-plus {
		display: none !important; /* 上传按钮隐藏 */
	}

	.imgLeft {
		margin: 15px 0;
	}

	.add_info_box {
		margin: 20px 0;
	}

	.add_info_box button {
		margin: 0 10px 10px 0;
	}

	.add_chapters_box {
		text-align: left;
		background-color: rgb(242, 242, 242);
		width: 100%;
		padding: 0px 15px;
		border-radius: 15px;
		font-size: 16px;
		box-sizing: border-box;
		position: relative;
		padding: 0 10px 5px 10px;
		height: 185px;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.homework_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 15px 0 0 0;
	}

	.course_homework {
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
		margin: 0 10px 0 0;
	}
	.course_homework >>> .el-input__inner {
		width: 140px;
		margin-left: 15px;
	}

	.chapter_upload_move {
		position: relative;
		background-color: #fff;
		position: absolute;
		width: 100%;
		top: 0px;
		left: 0px;
		border: 1px solid #eee;
		border-radius: 5px;
		transition: width 2s;
		-moz-transition: width 2s;
		-webkit-transition: width 2s;
		-o-transition: width 2s;
	}

	.chapter_upload_l_i {
		background-image: url("../../assets/icon.png");
		background-position: 3px -165px;
		width: 30px;
		height: 30px;
		margin: 10px auto 0 auto;
	}

	.left_first {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 65%;
	}

	.right_first {
		margin-left: 15%;
		width: 50%;
	}
	.people {
		border: 1px solid rgb(229 229 229);
		height: 495px;
		border-radius: 5px;
		width: 100%;
		overflow: auto;
	}
	.people_top {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	.people_nav,
	.people_top_right {
		padding: 20px 0 0 20px;
	}
	.people_search {
		display: flex;
		position: relative;
	}
	.people_search >>> .el-input__inner {
		height: 25px;
		width: 95%;
	}
	.search_img {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 15px;
		top: 3px;
	}
	.search_img > img {
		width: 100%;
		height: 100%;
	}
	.people_name {
		display: flex;
		justify-content: flex-start;
		padding: 20px 0 0 25px;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.people_name >>> .el-checkbox {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	.people_name >>> .el-checkbox__label {
		text-overflow: ellipsis;
		overflow: hidden;
		width: 100%;
	}
	.right_img {
		width: 150px;
		height: 150px;
		margin: 0 auto;
	}
	.right_img > img {
		width: 100%;
		height: 100%;
	}
	.number {
		margin-top: 20px;
		color: #4aa6ff;
		text-decoration: underline;
	}
	.success_button {
		display: flex;
		text-align: center;
		margin: 5% 0 auto;
		flex-direction: row;
		justify-content: center;
	}
	.look_course {
		margin-right: 40px;
		background: #3d67bc;
		width: 200px;
		height: 35px;
		line-height: 35px;
		color: #fff;
		text-align: center;
		font-size: 14px;
		border-radius: 5px;
		cursor: pointer;
	}
	.attend_others {
		width: 250px;
		background: #4fb13c;
		height: 35px;
		line-height: 35px;
		color: #fff;
		text-align: center;
		font-size: 14px;
		border-radius: 5px;
		cursor: pointer;
	}
	.dialog_diy2 >>> .el-dialog__body {
		text-align: center;
	}
	.write_togother {
		position: absolute;
		right: 45px;
		display: flex;
		top: 5%;
	}
	.write_people {
		font-size: 14px;
		line-height: 50px;
		padding-right: 10px;
	}
	.end_write {
		background: #3d67bc;
		color: #fff;
		width: 100px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		font-size: 14px;
		border-radius: 5px;
		cursor: pointer;
	}
	.chapter_upload {
		height: 50px;
		margin-top: 12px;
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
	}
	.chapter_upload_t {
		background-color: #fff;
		position: absolute;
		height: 100%;
		top: 0px;
		left: 0px;
		border-radius: 40px;
		box-sizing: border-box;
		box-shadow: 0 0 3px 3px #dfdfdf;
	}
	.chapter_upload_o {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
	}
	.chapter_upload_l {
		/* width: 50px;
								  height: 50px;
								  border-right: 1px solid #eee;
								  float: left; */
	}
	.chapter_upload_ic {
		height: 30px;
		float: right;
	}
	.chapter_upload_ic_l {
		width: 50px;
		height: 50px;
		float: left;
	}
	.chapter_upload_ic_l div {
		width: 30px;
		height: 35px;
		background: url("../../assets/icon/icon.png");
	}
	.chapter_upload_ic_r {
		width: 50px;
		height: 50px;
		float: left;
		margin-left: 0px;
		display: flex;
		align-items: center;
	}
	.chapter_upload_ic_r div {
		width: 25px;
		height: 25px;
		background-image: url("../../assets/delete.png");
		background-size: 100% 100%;
	}
	.chapter_upload_n {
		display: flex;
		text-indent: 10px;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 55%;
		margin-left: 20px;
	}
	.chapter_upload_l_i1 {
		background-image: url("../../assets/icon/video.png");
		width: 28px;
		height: 28px;
		/* margin: 10px auto 0 auto; */
		background-size: 100% 100%;
	}
	.chapter_upload_l_i5 {
		background-image: url("../../assets/icon/word.png");
		width: 24px;
		height: 24px;
		/* margin: 10px auto 0 auto; */
		background-size: 100% 100%;
	}
	.chapter_upload_ud {
		display: flex;
		flex-direction: column;
		margin-left: 5px;
		justify-content: center;
	}
	.chapter_upload_up {
		background-image: url("../../assets/icon/up.png");
		width: 17px;
		height: 15px;
		background-size: 100% 100%;
		cursor: pointer;
	}

	.chapter_upload_down {
		background-image: url("../../assets/icon/down.png");
		width: 17px;
		height: 15px;
		margin: 2px auto 0 auto;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.addWordStyle {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		overflow-x: auto;
		white-space: nowrap;
		flex-wrap: wrap;
	}
	/* table 样式 */
	.cont >>> table {
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
	}
	.cont >>> table td,
	.cont >>> table th {
		border-bottom: 1px solid #ccc;
		border-right: 1px solid #ccc;
		padding: 3px 5px;
	}
	.cont >>> table th {
		border-bottom: 2px solid #ccc;
		text-align: center;
	}
	/* blockquote 样式 */
	.cont >>> blockquote {
		display: block;
		border-left: 8px solid #d0e5f2;
		padding: 5px 10px;
		margin: 10px 0;
		line-height: 1.4;
		font-size: 100%;
		background-color: #f1f1f1;
	}
	/* code 样式 */
	.cont >>> code {
		display: inline-block;
		*display: inline;
		*zoom: 1;
		background-color: #f1f1f1;
		border-radius: 3px;
		padding: 3px 5px;
		margin: 0 3px;
	}
	.cont >>> pre code {
		display: block;
	}
	/* ul ol 样式 */
	.cont >>> ul,
	ol {
		margin: 10px 0 10px 20px;
	}

	.wordbox {
		display: flex;
		flex-wrap: wrap;
		cursor: pointer;
		width: 100%;
	}

	.checkword {
		width: 22px;
		height: 22px;
		margin: 10px auto 0;
		cursor: pointer;
	}

	.checkword img {
		width: 100%;
	}

	.stepBg {
		margin: 0 25px 0 0;
		width: 17%;
		min-width: 230px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		background: #fff;
	}

	.stepBg > div {
		height: 80px;
		width: 85%;
		cursor: pointer;
		margin: 10px 0;
		border-radius: 10px;
	}

	.first,
	.second,
	.third,
	.four {
		background: #4a83d0;
		height: 90px;
		color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.first > div:nth-child(1),
	.second > div:nth-child(1),
	.third > div:nth-child(1),
	.four > div:nth-child(1) {
		margin: 5px 10px 0 0;
		width: 2rem;
	}

	.firstNo,
	.secondNo,
	.thirdNo,
	.fourNo {
		background: #e7e7e7;
		color: #adadad;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.firstNo > div:nth-child(1),
	.secondNo > div:nth-child(1),
	.thirdNo > div:nth-child(1),
	.fourNo > div:nth-child(1) {
		margin: 5px 10px 0 0;
		width: 2rem;
	}

	.uploadWidth >>> .el-upload {
		width: 60px;
		height: 60px;
		position: relative;
	}

	.addPeople {
		background: #fa6060;
		width: 135px;
		height: 40px;
		color: #fff;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
		font-size: 15px;
		cursor: pointer;
	}

	.kcImg {
		width: 60px;
		margin-left: 10px;
	}

	.zyImg {
		width: 55px;
		margin: 0 10px;
	}

	.deleteZy {
		width: 20px;
		position: absolute;
		top: 5px;
		right: 5px;
		cursor: pointer;
	}

	.kcImg > img,
	.zyImg > img,
	.deleteZy > img {
		width: 100%;
		height: 100%;
	}

	.zyBox {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #67d37d;
		color: #fff;
		width: 210px;
		margin-left: 20px;
		border-radius: 10px;
		height: 70px;
		position: relative;
	}

	.upCss {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	/* .upCss >>> .el-upload {
								  margin-right: 30px;
								} */

	.upCss >>> .el-icon-plus {
		position: none !important;
		width: 200px;
		height: 100px;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px dashed #ccc;
		min-width: 78px;
		min-height: 100px;
		z-index: 999;
	}

	.addStageImg {
		min-width: 25px;
		min-height: 25px;
		width: 25px;
		height: 25px;
		cursor: pointer;
	}

	.addHW {
		width: 70px;
		height: 70px;
		cursor: pointer;
	}

	.addStageImg > img,
	.addHW > img {
		width: 100%;
		height: 100%;
	}

	.addNewPP >>> .el-dialog__body {
		padding: 5px 20px;
	}

	.isHeight {
		height: 680px;
	}
	.toolChoose {
		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.tool {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 20%;
		margin: 0 20px;
		align-items: center;
	}
	.whiteBIcon {
		width: 150px;
		cursor: pointer;
	}
	.whiteBIcon > img,
	.check > img {
		width: 100%;
		height: 100%;
	}
	.check {
		width: 25px;
		height: 25px;
		cursor: pointer;
		margin: 10px 0;
	}
	.customWidth >>> .el-dialog {
		min-width: 500px !important;
	}
	.a_addBox {
		margin: 10px 0;
		background: #fff;
		padding: 15px;
		max-height: 400px;
		overflow: auto;
	}
	.a_add_box {
		border-bottom: 2px solid #eee;
		padding-bottom: 10px;
	}

	.a_add_head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px 0;
		font-size: 18px;
	}
	.a_add_head .a_add_head_input {
		width: 300px;
	}
	.a_add_head .a_add_head_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.a_add_body {
		display: flex;
		align-items: center;
	}
	.a_add_input {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		/* flex-direction: column; */
		/* width: 100%; */
	}
	.width100 {
		width: 100%;
	}
	.a_add_input .a_add_persent {
		/* display: flex; */
		/* flex-direction: column; */
		width: 100%;
	}
	.a_add_persent_div {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.a_add_persent_div span {
		margin: 5px 0;
	}
	.a_add_persent_div span:nth-child(1) {
		width: 30%;
	}
	.a_add_persent_div span:nth-child(2) {
		width: 7%;
	}
	.a_add_persent_div span:nth-child(3) {
		width: 40%;
	}
	.a_add_persent_title {
		/* margin-bottom: 10px; */
	}
	.a_add_body_div {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.all_choose {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.all_choose > span {
		width: 60px;
		display: block;
		letter-spacing: 14px;
	}
	.choose > div:nth-child(3) > span {
		letter-spacing: 0 !important;
	}

	.choose {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		height: 100%;
		justify-content: space-evenly;
		align-items: flex-start;
	}
	.both {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		height: 350px;
		align-items: center;
		justify-content: flex-start;
	}
</style>