<template>
	<div class="pb_content">
		<!-- <div class="pb_head">
			<span>我的资料</span>
		</div> -->
		<div class="pb_content_body" style="position: relative">
			<!-- <div class="write_togother" v-if="this.steps == 3">
				<div class="write_people">陈伟涛、琳珠正在协同本课程..</div>
				<div class="end_write">结束协同</div>
			</div> -->
			<div class="left">
				<div class="tips">请跟随下面的步骤,逐步上传你的课程或房间內容:</div>
				<div class="info_steps">
					<span class="" :class="steps > 0 ? 'steps_active' : ''"
						>{{ this.steps > 1 ? "√" : "1" }} </span
					><span>填写项目基本信息</span>
				</div>
				<div class="info_solid"></div>
				<div class="info_steps">
					<span class="" :class="steps > 1 ? 'steps_active' : ''"
						>{{ this.steps > 2 ? "√" : "2" }} </span
					><span>填写项目阶段性</span>
				</div>
				<div class="info_solid"></div>
				<div class="info_steps">
					<span class="" :class="steps > 2 ? 'steps_active' : ''"
						>{{ this.steps > 2 ? "√" : "3" }} </span
					><span>上传课程内容</span>
				</div>
				<div class="info_solid"></div>
				<div class="info_steps">
					<span class="" :class="steps > 3 ? 'steps_active' : ''"
						>{{ this.steps > 3 ? "√" : "4" }} </span
					><span>上传成功</span>
				</div>
			</div>
			<div class="right">
				<div v-if="this.steps == 1">
					<div class="basic_box">
						<h3 class="info_title">项目内容填写</h3>
						<div class="big_box">
							<div class="left_first">
								<div>
									<div class="bInfo_title">
										<span style="color: red">*</span>项目名称
									</div>
									<div>
										<input
											type="text"
											placeholder="项目名称"
											class="binfo_input"
											v-model="courseName"
										/>
									</div>
								</div>
								<div style="margin-top: 30px">
									<div class="bInfo_title">
										<span style="color: red">*</span>简要描述
									</div>
									<div>
										<textarea
											rows="4"
											placeholder="简要描述"
											class="binfo_input"
											cols=""
											v-model="courseText"
										></textarea>
									</div>
								</div>
								<el-switch
									v-model="isTeacherSee"
									active-text="允许给其他老师查看"
									style="margin: 40px 0 0 25px"
								>
								</el-switch>
							</div>
							<div class="right_first">
								<div>
									<div style="flex: 0.5 1 0%; margin: 0 20px 0 0">
										<div class="bInfo_title">
											课程封面
											<div class="chapter_beizhu">PNG,GIF,JPEG</div>
										</div>
										<div class="chapter_uploadBox1">
											<div
												class="chapter_add"
												v-if="cover.length == 0"
												@click="addImg($event)"
											>
												<div class="chapter_add_l">+</div>
												<div class="chapter_add_r">添加文件</div>
												<input
													type="file"
													accept="image/png,image/gif,image/jpeg"
													style="display: none"
													@change="beforeUpload1($event, 1)"
												/>
											</div>
											<div
												v-else
												class="chapter_upload_move"
												style="height: 100%"
											>
												<div class="chapter_upload_t" style="width: 100%"></div>
												<div class="chapter_upload_o" style="top: 7px">
													<div class="chapter_upload_l">
														<div class="chapter_upload_l_i"></div>
													</div>
													<div class="chapter_upload_ic">
														<div
															class="chapter_upload_ic_r"
															style="cursor: pointer"
															@click="handle_remove1(cover[0], null, 1)"
														>
															<div></div>
														</div>
													</div>
													<div
														class="chapter_upload_n"
														style="top: 25%; left: 10%; width: 75%"
													>
														{{ cover[0].name }}
													</div>
												</div>
											</div>
										</div>
									</div>
									<div style="flex: 0.5 1 0%; margin-top: 30px">
										<div class="bInfo_title">
											<span style="color: red">*</span>选择项目成员
										</div>
										<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>
									</div>
								</div>
							</div>
						</div>
						<div class="line"></div>
					</div>
				</div>
				<div v-if="this.steps == 2">
					<div class="basic_box">
						<h3 class="info_title">上传课程阶段性内容：项目阶段填写</h3>
						<div class="cru_selectBox">
							<div
								v-for="(item, index) in unitJson"
								:key="item.id"
								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="chapter_box">
							<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 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>
								<el-switch
									v-model="unitJson[unitIndex].isTalk"
									active-text="是否开启评价"
									style="margin: 40px 0 0 25px"
								>
								</el-switch> -->
							</div>
						</div>
					</div>
					<div class="chapter_btnbox" @click="addunit">
						<div class="icon_add">
							<i></i>
							<i></i>
						</div>
						<div class="chapter_btn_w">新增阶段</div>
					</div>
				</div>
				<div v-if="this.steps == 3">
					<div class="basic_box">
						<h3 class="info_title">项目内容填写</h3>
						<div class="big_box">
							<div class="left_first">
								<div>
									<div class="bInfo_title">
										<span style="color: red">*</span>项目名称
									</div>
									<div>
										<input
											type="text"
											placeholder="项目名称"
											class="binfo_input"
											v-model="courseName"
										/>
									</div>
								</div>
								<div style="margin-top: 30px">
									<div class="bInfo_title">
										<span style="color: red">*</span>简要描述
									</div>
									<div>
										<textarea
											rows="4"
											placeholder="简要描述"
											class="binfo_input"
											cols=""
											v-model="courseText"
										></textarea>
									</div>
								</div>
								<el-switch
									v-model="isTeacherSee"
									active-text="允许给其他老师查看"
									style="margin: 40px 0 0 25px"
								>
								</el-switch>
							</div>
							<div class="right_first">
								<div>
									<div style="flex: 0.5 1 0%; margin: 0 20px 0 0">
										<div class="bInfo_title">
											课程封面
											<div class="chapter_beizhu">PNG,GIF,JPEG</div>
										</div>
										<div class="chapter_uploadBox1">
											<div
												class="chapter_add"
												v-if="cover.length == 0"
												@click="addImg($event)"
											>
												<div class="chapter_add_l">+</div>
												<div class="chapter_add_r">添加文件</div>
												<input
													type="file"
													accept="image/png,image/gif,image/jpeg"
													style="display: none"
													@change="beforeUpload1($event, 1)"
												/>
											</div>
											<div
												v-else
												class="chapter_upload_move"
												style="height: 100%"
											>
												<div class="chapter_upload_t" style="width: 100%"></div>
												<div class="chapter_upload_o" style="top: 7px">
													<div class="chapter_upload_l">
														<div class="chapter_upload_l_i"></div>
													</div>
													<div class="chapter_upload_ic">
														<div
															class="chapter_upload_ic_r"
															style="cursor: pointer"
															@click="handle_remove1(cover[0], null, 1)"
														>
															<div></div>
														</div>
													</div>
													<div
														class="chapter_upload_n"
														style="top: 25%; left: 10%; width: 75%"
													>
														{{ cover[0].name }}
													</div>
												</div>
											</div>
										</div>
									</div>
									<div style="flex: 0.5 1 0%; margin-top: 30px">
										<div class="bInfo_title">
											<span style="color: red">*</span>选择项目成员
										</div>
										<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>
									</div>
								</div>
							</div>
						</div>
						<div class="line"></div>
						<div class="cru_selectBox">
							<div
								v-for="(item, index) in unitJson"
								:key="item.id"
								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="chapter_box"
							v-for="(item, index) in unitJson[unitIndex].chapterInfo"
							:key="item.id"
						>
							<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 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>
									<el-switch
										v-model="unitJson[unitIndex].isTalk"
										active-text="是否开启评价"
										style="margin: 10px 0px 0px 30px"
									>
									</el-switch>
								</div> -->
							</div>
							<div class="line"></div>
							<!-- <div
								class="basic_box"
								style="margin: 45px 0 0 15px; min-height: 0"
							>
								<div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
									<h3 class="info_title">添加教学文档</h3>
									<div class="teacherWord" @click="insertWord">
										<span><i class="el-icon-plus"></i>添加文档</span>
									</div>
								</div>
								<div v-if="item.fileList1.length == 0" class="addWordStyle" style="height:110px">

								</div>
								<div v-if="item.fileList1.length > 0" class="addWordStyle">
									<div
										class="wordTeacher"
										v-for="(aa, indexF) in item.fileList1"
										:key="indexF + '-' + index"
									>
										<div
											class="wordPic"
											@click="selectWord(aa.uid, index, indexF)"
										>
											<img src="../../assets/icon/wordMub.png" alt="" />
										</div>

										<div style="margin-top: 10px; line-height: 19px">
											{{ item.fileList1[indexF].name }}
										</div>
										<div class="deleteWord" @click="clean(index, indexF)">
											<img src="../../assets/icon/delete.png" alt="" />
										</div>
									</div>
								</div>
								 <el-upload
									action="#"
									list-type="picture-card"
									v-loading="uploadLoading1"
									:class="{ disUoloadSty: noneBtnImg1 }"
									:http-request="beforeUpload"
									ref="upload1"
									:on-preview="handlePictureCardPreview"
									:on-remove="handle_remove"
									:show-file-list="true"
									:file-list="item.fileList1"
									accept="application/msword"
									:limit="1"
									class="imgLeft"
								>
									<i class="el-icon-plus"></i>
								</el-upload> -->
							<!-- </div>
							<div class="line" style="margin-top: 20px"></div> -->
							<div
								class="basic_box"
								style="margin: 45px 0 0 15px; min-height: 0"
							>
								<h3 class="info_title">附件添加</h3>
								<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="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
												className="chapter_upload_o"
												style="position: relative"
											>
												<div
													className="chapter_upload_l"
													style="padding: 1px 0 0 10px"
												>
													<div
														v-if="item1.type == 2"
														class="chapter_upload_l_i1"
														style="margin: 10px auto 0 0"
													></div>
													<div
														v-if="item1.type == 3"
														class="chapter_upload_l_i5"
														style="margin: 10px auto 0 0"
													></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"
													style="
														display: flex;
														alignitems: center;
														paddingleft: 10px;
													"
												>
													<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;
														"
													/>
													<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>
							<div class="line"></div>
							<div
								class="basic_box"
								style="margin: 45px 0 0 15px; min-height: 0"
							>
								<h3 class="info_title">作业设置</h3>
								<div class="homework_box">
									<div
										class="course_homework"
										v-for="(item2, index) in item.itemCount"
										:key="index"
									>
										<el-image
											style="width: 35px; height: 50px"
											:src="require('../../assets/homework.png')"
											fit="contain"
										></el-image>
										<el-input
											placeholder="请输入作业名称"
											v-model="item.homeworkList[index].name"
										></el-input>
									</div>
									<div>
										<el-button
											size="small"
											type="primary"
											@click="addHomeworkBox(unitIndex, index)"
											>点击添加</el-button
										>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div 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 class="info_btnBox">
					<button class="info_btn" v-if="steps == 1" @click="goTo('/course')">
						返回课程
					</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_diy"
		>
			<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"
		>
			<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>
	</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 {
				steps: 1,
				courseName: "",
				isTeacherSee: false,
				courseText: "",
				formLabelWidth: "100px",
				uploadLoading1: false,
				noneBtnImg: false,
				noneBtnImg1: false,
				updateBoolean2: false,
				unitIndex: 0,
				dialogVisible: false,
				dialogVisible1: false,
				searchPeople: "",
				cover: [], //课程封面
				unitJson: [
					{
						dyName: "", //单元标题
						startTime: "", //开始时间
						endTime: "", //结束时间
						isTalk: false, //是否开启评价
						chapterInfo: [
							{
								isread: false,
								chapterid: this.guid(),
								title: "",
								courseName: "",
								chapterData: [],
								itemCount: 1,
								fileList1: [],
								homeworkList: [{ name: "" }],
								video: [],
								testData: [],
								pData: [],
							},
						],
					},
				],
				studentJuri: [],
				checkboxList: [],
				number: "",
				tTitle: "",
				tdetail: "",
			};
		},
		computed: {
			offsetLetfPx: function () {
				//addnum可以直接在模板语法里面用，相当于data内的值
				return (
					$(".cru_select")[this.unitIndex] &&
					$(".cru_select")[this.unitIndex].offsetLeft
				);
			},
		},
		methods: {
			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[0].chapterInfo[0].chapterData;
				} else {
					var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].fileList1;
				}
				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";
				} else {
					this.steps--;
				}
			},
			nextSteps() {
				if (this.steps == 1) {
					// if (this.studentJuri.length > 0) {
					if (
						this.courseName != "" &&
						this.courseText != "" &&
						this.checkboxList.length != 0
					) {
						this.steps++;
					} else {
						this.$message.error("请将信息填写完整");
					}
					// } else {
					// 	if (this.courseName != "" && this.courseText != "") {
					// 		this.steps++;
					// 	} else {
					// 		this.$message.error("请将信息填写完整");
					// 	}
					// }
				} else if (this.steps == 2) {
					if (
						this.unitJson[this.unitIndex].dyName != ""
						// this.unitJson[this.unitIndex].startTime != "" &&
						// this.unitJson[this.unitIndex].endTime != ""
					) {
						this.steps++;
					} else {
						this.$message.error("请将信息填写完整");
					}
				} else if (this.steps == 3) {
					this.addWork();
					this.steps++;
				}
				// 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.$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;
				}
				// else if (type == 4) {
				// 	var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].fileList1;
				// 	for (var i = 0, len = _tmp.length; i < len; i++) {
				// 		if (_tmp[i].uid == file.uid) {
				// 			_tmp.splice(i, 1);
				// 			break;
				// 		}
				// 		this.unitJson[this.unitIndex].chapterInfo[0].fileList1 = _tmp;
				// 	}
				// }
				// else if (type == 2) {
				// 	var _tmp = this.fileList1;
				// 	for (var i = 0, len = _tmp.length; i < len; i++) {
				// 		if (_tmp[i].uid == file.uid) {
				// 			_tmp.splice(i, 1);
				// 			break;
				// 		}
				// 		this.fileList1 = _tmp;
				// 	}
				// }
				this.noneBtnImg = _tmp.length >= 1;
			},
			// handle_remove(file, fileList) {
			// 	var _tmp = this.fileList1;
			// 	for (var i = 0, len = _tmp.length; i < len; i++) {
			// 		if (_tmp[i].uid == file.uid) {
			// 			_tmp.splice(i, 1);
			// 			break;
			// 		}
			// 		this.fileList1 = _tmp;
			// 	}
			// },
			addImg(e) {
				var el = e.currentTarget;
				el.getElementsByTagName("input")[0].click();
			},
			beforeUpload1(event, type) {
				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) {
							if (err) {
								var a = _this.$refs.upload1.uploadFiles;
								a.splice(a.length - 1, a.length);
								_this.$message.error("上传失败");
							} else {
								if (type == 1) {
									_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);
							}
						});
				}
			},
			beforeUpload2(event, unitIndex, type) {
				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) {
							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);
								}
								console.log(data.Location);
							}
						});
				}
			},
			addunit() {
				this.unitJson.push({
					dyName: "", //单元标题
					startTime: "", //开始时间
					endTime: "", //结束时间
					isTalk: false, //是否开启评价
					chapterInfo: [
						{
							isread: false,
							chapterid: this.guid(),
							title: "",
							courseName: "",
							chapterData: [],
							itemCount: 1,
							fileList1: [],
							homeworkList: [{ name: "" }],
							video: [],
							testData: [],
							pData: [],
						},
					],
				});
			},
			add(e, i) {
				var el = e.currentTarget;
				el.getElementsByTagName("input")[0].click();
			},

			addHomeworkBox(unitIndex, i) {
				this.unitJson[unitIndex].chapterInfo[i].homeworkList.push({ name: "" });
				this.unitJson[unitIndex].chapterInfo[i].itemCount++;
			},
			getStudent() {
				let params = {
					cn: this.searchPeople,
					oid: this.$store.state.userInfo.organizeid,
					uid: this.$store.state.userInfo.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") {
					// window.open(this.unitJson[i].chapterInfo[j].chapterData[ic].src);
					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() {
				// for (var i = 0; i < this.unitJson[0].chapterInfo.length; i++) {
				// 	for (
				// 		var j = 0;
				// 		j < this.unitJson[0].chapterInfo[i].fileList1.length;
				// 		j++
				// 	) {
				// 		var a = this.unitJson[0].chapterInfo[i].fileList1[j].content.replace(
				// 			/%/g,
				// 			"%25"
				// 		);
				// 		this.unitJson[0].chapterInfo[i].fileList1[j].content = a;
				// 	}
				// }
				let params = [
					{
						uid: this.$store.state.userInfo.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),
					},
				];
				this.ajax
					.post(this.$store.state.api + "addWork", params)
					.then((res) => {
						this.$message({
							message: "新增成功",
							type: "success",
						});
						this.number = res.data[0][0].ordernumber;
						this.islogin = true;
					})
					.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;
				}
			},
		},
		created() {
			this.getStudent();
		},
	};
</script>

<style scoped>
	.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%;
	}

	.pb_content_body {
		display: flex;
		margin: 0 auto !important;
		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: calc(100% - 385px);
		overflow: auto;
	}

	.basic_box {
		width: 80%;
		min-height: 455px;
		margin: 50px 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;
	}

	.bInfo_title {
		font-size: 16px;
		font-weight: bold;
		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;
	}

	.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: 100%;
		border-top: 1px solid #cecece;
		margin-top: 60px;
	}

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

	.info_btn,
	.teacherWord {
		color: #fff;
		background-color: #3d67bc;
		padding: 8px 24px;
		font-size: 0.9375rem;
		box-shadow: 0px 1px 5px 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: 210px;
		text-align: center;
		font-size: 14px;
		margin-top: 20px;
		position: relative;
	}
	.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: #1f4082 !important;
	}

	.cru_selectBox {
		display: flex;
		margin: 30px 0 10px;
		flex-wrap: nowrap;
		width: 100%;
		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: 100%;
	}

	.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;
		-webkit-tap-highlight-color: transparent;
		border: 1px solid rgba(0, 0, 0, 0.23);
		border-radius: 4px;
		box-sizing: border-box;
	}

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

	.time {
		display: flex;
		margin-top: 35px;
	}

	.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-upload--picture-card {
		display: none; /* 上传按钮隐藏 */
	}

	.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: 8px;
		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;
	}

	.big_box {
		display: flex;
	}

	.left_first,
	.right_first {
		display: flex;
		flex-direction: column;
		width: 50%;
	}

	.right_first {
		margin-left: 60px;
	}
	.people {
		border: 1px solid rgb(196, 196, 196);
		height: 150px;
		border-radius: 5px;
		width: 90%;
	}
	.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: 70%;
	}
	.search_img {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 62px;
		top: 3px;
	}
	.search_img > img {
		width: 100%;
		height: 100%;
	}
	.people_name {
		display: flex;
		justify-content: flex-start;
		padding: 20px 0 0 25px;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.people_name >>> .el-checkbox {
		width: 17%;
		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_diy >>> .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: 8px;
		position: relative;
	}
	.chapter_upload_t {
		background-color: #e3f3ff;
		position: absolute;
		width: 0%;
		height: 100%;
		top: 0px;
		left: 0px;
	}
	.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;
		border-right: 1px solid #eee;
	}
	.chapter_upload_ic_l div {
		width: 30px;
		height: 35px;
		background: url("../../assets/icon/icon.png");
		margin: 10px auto 0 auto;
	}
	.chapter_upload_ic_r {
		width: 40px;
		height: 40px;
		float: left;
		margin-left: 5px;
	}
	.chapter_upload_ic_r div {
		width: 30px;
		height: 30px;
		background-image: url("../../assets/icon/icon.png");
		background-position: -39px -163px;
		margin: 10px auto 0 auto;
	}
	.chapter_upload_n {
		height: 20px;
		line-height: 20px;
		text-indent: 10px;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		position: absolute;
		width: 100%;
		top: 40%;
		left: 5%;
	}
	.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;
	}
	.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;
	}
</style>
