<template>
	<div class="pb_content">
		<div class="pb_content_body">
			<div class="body_student">
				<div class="student_head">
					<div class="box_course">
						<div class="wheel">
							<div class="workd_media">
								<!-- <el-image
                style="width: 100%; height: 300px"
                :src="require('../../assets/tu4.png')"
              ></el-image> -->
								<video-player
									class="video-player vjs-custom-skin"
									ref="videoPlayer"
									:playsinline="true"
									:options="playerO"
									@play="onPlayerPlay($event)"
									style="width: 100%; height: 100%"
								></video-player>
							</div>
							<!-- <div class="cd_content_steps">
								<div
									class="cd_steps_box"
									v-for="(media, index) in vedio"
									:key="media"
									@click="switchVideo(media, index)"
								>
									 <i :class="{ active: index < 1 }"></i> -->
							<!-- <i
										:class="{
											active: playerOptions.sources[0].src == media,
										}"
									></i>
									<span>视频{{ index + 1 }}</span> -->
							<!-- </div>
							</div> -->
							<!-- <img src="../assets/sp2.png" alt="" /> -->
						</div>
						<div style="font-size: 18px; margin: 15px">
							{{ chapInfo.dyName }}
						</div>
					</div>
				</div>
				<div class="student_body">
					<div class="study_top">
						<div class="checkbox">
							<div
								class="check"
								:class="{ checked: type == 1 }"
								@click="type = 1"
							>
								文档资料
							</div>
							<div
								class="check"
								:class="{ checked: type == 2 }"
								@click="type = 2"
							>
								视频
							</div>
							<div
								class="check"
								:class="{ checked: type == 3 }"
								@click="type = 3"
							>
								附件
							</div>
						</div>
						<div @click="openAddWork" class="btn">提交实践作业</div>
					</div>
					<div class="project_box" v-if="type == 1">
						<div class="detail_content_top">
							<div class="detail_title">{{ chapInfo.dyName }}</div>
							<div class="detail_time">{{ courseDetail.time }}</div>
						</div>
						<div class="detail_content" v-html="courseDetail.template"></div>
					</div>
					<div class="project_box" v-if="type == 2">
						<div class="filebox">
							<div class="media" v-for="(media, index) in vedio" :key="index">
								<img
									:src="
										media.cover != null && media.cover != ''
											? JSON.parse(media.cover).length > 0
												? JSON.parse(media.cover)[0].url
												: mr
											: mr
									"
									alt=""
								/>
								<div class="title">{{ media.name }}</div>
								<div class="btn" @click="lookVedio(media.url)">点击播放</div>
							</div>
						</div>
					</div>
					<div class="project_box" v-if="type == 3">
						<div class="filebox">
							<div
								class="file"
								v-for="(f, index) in file"
								:key="index"
								@click="downFile(index)"
							>
								<img :src="require('../assets/file.png')" alt="" />
								<div>{{ f.name }}</div>
							</div>
						</div>
					</div>
				</div>
				<el-dialog
					title="提交实践作业"
					:visible.sync="dialogVisible"
					:append-to-body="true"
					width="500px"
					:before-close="handleClose"
					class="dialog_change"
				>
					<div class="first">
						<div>作业名称:</div>
						<div>{{ chapInfo.dyName }}</div>
					</div>
					<div style="font-size: 20px; margin-bottom: 10px">上传作业</div>
					<el-input
						type="textarea"
						resize="none"
						rows="7"
						placeholder="输入文字描述..."
						v-model="studyJuri[0].content"
					>
					</el-input>
					<div class="marginT">
						<div>上传图片</div>
						<div
							class="chapter_add"
							v-if="studyJuri[0].cover.length == 0"
							@click="addImg($event)"
						>
							<div class="up_photo">
								<img src="../assets/photo.png" alt="" />
							</div>
							<input
								type="file"
								accept="image/png,image/gif,image/jpeg"
								style="display: none"
								@change="beforeUpload1($event, 1)"
							/>
						</div>
						<div class="chapter_add" v-else>
							<img
								:src="
									studyJuri[0].cover[0].url != null &&
									studyJuri[0].cover[0].url != ''
										? studyJuri[0].cover[0].url
										: mr
								"
								alt=""
							/>
							<span>{{ studyJuri[0].cover[0].name }}</span>
							<div class="deleteWord" @click="clean(1)">
								<img src="../assets/icon/delete.png" alt="" />
							</div>
						</div>
					</div>
					<div class="marginT">
						<div>上传视频</div>
						<div
							class="chapter_add"
							v-if="studyJuri[0].upVedio.length == 0"
							@click="addImg($event)"
						>
							<div class="up_photo">
								<img src="../assets/vidio.png" alt="" />
							</div>
							<input
								type="file"
								accept="video/mp4,video/quicktime,video/x-msvideo"
								style="display: none"
								@change="beforeUpload2($event, 2)"
							/>
						</div>
						<div class="chapter_add" v-else>
							<img :src="mr" alt="" />
							<span>{{ studyJuri[0].upVedio[0].name }}</span>
							<div class="deleteWord" @click="clean(2)">
								<img src="../assets/icon/delete.png" alt="" />
							</div>
						</div>
					</div>
					<!-- <div class="marginT">
						<div>附件上传</div>
						<div
							class="chapter_add"
							v-if="studyJuri[0].upFile.length == 0"
							@click="addImg($event)"
						>
							<div class="up_photo">
								<el-button
									type="small"
									style="background: rgb(60, 102, 189); color: #fff"
									>点击上传</el-button
								>
							</div>
							<input
								type="file"
								accept="application/pdf,.ppt,.pptx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
								style="display: none"
								@change="beforeUpload2($event, 3)"
							/>
						</div>
						<div class="chapter_add" v-else>
							<img :src="require('../assets/file.png')" alt="" />
							<span>{{ studyJuri[0].upFile[0].name }}</span>
							<div class="deleteWord" @click="clean(3)">
								<img src="../assets/icon/delete.png" alt="" />
							</div>
						</div>
					</div> -->
					<div class="upload_send" @click="addWork">提交</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import "../common/aws-sdk-2.235.1.min.js";
	export default {
		data() {
			return {
				dialogVisible: false,
				id: this.$route.query.courseId,
				courseType: this.$route.query.type,
				type: 1,
				vedio: [],
				file: [],
				rateList: {
					ca: 0,
				},
				rateParams: [],
				colors: ["#000", "#000", "#000"],
				studyJuri: [
					{
						content: "",
						cover: [],
						upVedio: [],
						upFile: [],
					},
				],
				mr: require("../assets/tu4.png"),
				courseDetail: {},
				chapInfo: [],
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
					autoplay: false, //如果true,浏览器准备好时开始回放。
					muted: false, // 默认情况下将会消除任何音频。
					loop: false, // 导致视频一结束就重新开始。
					preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: "zh-CN",
					aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [
						{
							type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
							src: "", //url地址require("../../assets/media/aaa.mp4")
						},
					],
					// poster: require("../../assets/tu31.png"), //你的封面地址
					// poster: dataRes.imgUrl, //你的封面地址
					notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: true, //当前时间和持续时间的分隔符
						durationDisplay: true, //显示持续时间
						remainingTimeDisplay: false, //是否显示剩余时间功能
						fullscreenToggle: true, //全屏按钮
					},
				},
				playerO: {},
				noneBtnImg: false,
			};
		},
		methods: {
			clean(type) {
				if (type == 1) {
					this.studyJuri[0].cover.splice(0, 1);
				} else if (type == 2) {
					this.studyJuri[0].upVedio.splice(0, 1);
				} else {
					this.studyJuri[0].upFile.splice(0, 1);
				}
			},
			handleClose(done) {
				done();
				// this.studyJuri[0].push([
				// 	{
				// 		content: "",
				// 		cover: [],
				// 		upVedio: [],
				// 		upFile: [],
				// 	},
				// ]);
			},
			imgChange(file, fileList, type) {
				if (type == 1) {
					var _tmp = this.studyJuri[0].cover;
				} else if (type == 2) {
					var _tmp = this.studyJuri[0].upVedio;
				} else {
					var _tmp = this.studyJuri[0].upFile;
				}
				this.noneBtnImg = _tmp.length >= 1;
			},
			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 {
								_this.studyJuri[0].cover.push({
									name: file.name,
									url: data.Location,
									uid: file.uid,
								});
								_this.imgChange(null, null, type);
								console.log(data.Location);
							}
						});
				}
			},
			beforeUpload2(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 == 2) {
									_this.studyJuri[0].upVedio.push({
										name: file.name,
										url: data.Location,
										uid: file.uid,
									});
									_this.imgChange(null, null, type);
								} else if (type == 3) {
									_this.studyJuri[0].upFile.push({
										name: file.name,
										url: data.Location,
										uid: file.uid,
									});
									_this.imgChange(null, null, type);
								}
								console.log(data.Location);
							}
						});
				}
			},
			getCourseDetail() {
				const loading = this.$loading.service({
					background: "rgba(255, 255, 255, 0.7)",
					target: document.querySelector(".student_table"),
				});
				var t = this.courseType;
				let params = {
					courseId: this.id,
				};
				this.ajax
					.get(this.$store.state.api + "selectCourseDetail", params)
					.then((res) => {
						loading.close();
						// element.imgUrl = JSON.parse(element.chapters).poster;
						var a = JSON.parse(res.data[0][0].chapters)[t].chapterInfo[0]
							.chapterData;
						var b = [
							"AVI",
							"NAVI",
							"MPEG",
							"ASF",
							"MOV",
							"WMV",
							"3GP",
							"RM",
							"RMVB",
							"FLV",
							"F4V",
							"H.264",
							"H.265",
							"REAL VIDEO",
							"MKV",
							"WebM",
							"HDDVD",
							"MP4",
							"MPG",
							"M4V",
							"MGV",
							"OGV",
							"QTM",
							"STR",
							"AMC",
							"DVX",
							"EVO",
							"DAT",
							"OGG",
							"OGM",
						];
						for (var i = 0; i < a.length; i++) {
							if (
								b.indexOf(
									a[i].url
										.split(".")
										[a[i].url.split(".").length - 1].toLocaleUpperCase()
								) != -1
							) {
								this.vedio.push(a[i]);
							} else {
								this.file.push(a[i]);
							}
						}
						// element.mediaList = JSON.parse(element.chapters)[0].chapterInfo[t].chapterData;
						console.log(this.vedio);
						console.log(this.file);
						// this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
						this.courseDetail = res.data[0][0];
						this.chapInfo = JSON.parse(this.courseDetail.chapters)[t];
						// this.playerOptions.poster = this.course.imgUrl;
						this.playerOptions.sources[0].src =
							this.vedio.length > 0
								? this.vedio[0].url
								: require("../assets/icon/wheel.png");
						console.log(this.playerOptions.sources[0].src);
						this.playerO = this.playerOptions;
					})
					.catch((err) => {
						loading.close();
						console.error(err);
					});
			},
			switchVideo(media, index) {
				this.playerO = {};
				this.playerOptions.poster = "";
				this.playerOptions.sources[0].src = media;
				this.playerO = this.playerOptions;
			},
			onPlayerPlay() {},
			lookVedio(u) {
				this.playerOptions.sources[0].src = u;
				this.playerO = this.playerOptions;
			},
			downFile(i) {
				window.open(this.file[i].url);
			},
			openAddWork() {
				this.dialogVisible = true;
				this.studyJuri = [
					{
						content: "",
						cover: [],
						upVedio: [],
						upFile: [],
					},
				];
			},
			addWork() {
				let params = [
					{
						uid: this.$store.state.studentInfo.userid,
						cid: this.id,
						stage: this.courseType,
						content: JSON.stringify(this.studyJuri),
					},
				];
				this.ajax
					.post(this.$store.state.api + "addWorks", params)
					.then((res) => {
						this.$message({
							message: "提交成功",
							type: "success",
						});
						this.dialogVisible = false;
						// this.studyJuri.push([
						// 	{
						// 		content: "",
						// 		cover: [],
						// 		upVedio: [],
						// 		upFile: [],
						// 	},
						// ]);
					})
					.catch((err) => {
						this.$message.error("提交失败");
						console.error(err);
					});
			},
		},
		created() {
			this.getCourseDetail();
			document.scrollingElement.scrollTop = 0;
		},
	};
</script>

<style scoped>
	.body_student {
		margin: 0px auto;
		width: 80%;
		height: 100%;
	}
	.student_head {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		height: 30%;
	}
	.wheel > img,
	.project > img,
	.star > img,
	.evaluate > img,
	.up_photo > img,
	.chapter_add > img,
	.deleteWord > img {
		width: 100%;
		height: 100%;
	}
	.chapter_add {
		width: 120px;
		margin-top: 20px;
		position: relative;
		text-align: center;
	}
	.deleteWord {
		width: 22px;
		height: 22px;
		position: absolute;
		right: -10px;
		top: -10px;
		cursor: pointer;
	}
	.box_course {
		display: flex;
		flex-direction: column;
		height: 740px;
	}
	.wheel {
		width: 100%;
	}
	.right_box {
		display: flex;
		flex-direction: column;
		margin-left: 30px;
		justify-content: space-around;
	}
	.right_box_title {
		font-size: 23px;
	}
	.people {
		display: flex;
	}
	.student_body {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		margin-top: 20px;
		min-height: 1000px;
		padding: 0 0 20px;
	}
	.study_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.study_top .checkbox {
		display: flex;
		align-items: center;
		margin-left: 25px;
	}
	.study_top .check {
		margin: 0 10px 0 0;
		/* border-bottom: 4px solid #ccc; */
		padding-bottom: 5px;
		width: 80px;
		text-align: center;
		color: rgb(170, 170, 170);
		cursor: pointer;
		height: 30px;
		box-sizing: border-box;
	}
	.study_top .checked {
		border-bottom: 4px solid #ccc;
		padding-bottom: 5px;
		color: rgb(26, 26, 26);
	}
	.study_top .btn {
		margin: 25px;
		background: #0e71e6;
		color: #fff;
		width: 120px;
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 13px;
		border-radius: 5px;
		cursor: pointer;
	}
	.project_box {
		padding: 0 30px 10px 30px;
	}

	.filebox {
		display: flex;
		flex-wrap: wrap;
	}

	.file {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 20px 20px 0;
		cursor: pointer;
	}

	.file div {
		margin-top: 10px;
		width: 150px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.media {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 20px 20px 0;
		cursor: pointer;
		width: 250px;
		overflow: hidden;
		box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
			0px 2px 1px -1px rgb(0 0 0 / 12%);
		border-radius: 0 0 5px 5px;
		/* border: 1px solid #cecece; */
		box-sizing: border-box;
	}
	.media img {
		width: 250px;
		height: 150px;
		object-fit: cover;
	}
	.media .title {
		padding: 5px 10px;
		text-align: left;
		width: 100%;
		box-sizing: border-box;
	}
	.media .btn {
		width: 100%;
		height: 35px;
		line-height: 35px;
		color: #fff;
		background: rgb(14, 114, 230);
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.detail_content_top {
		width: 100%;
		padding: 25px 0 25px 0;
	}
	.detail_title {
		text-align: center;
		font-size: 24px;
	}
	.detail_time {
		font-size: 13px;
		padding: 15px 0 0 40px;
	}
	.detail_content {
		line-height: 2pc;
		width: 90%;
		margin: 0 auto;
		padding-top: 30px;
		text-indent: 30px;
	}
	.score_box >>> .el-rate {
		margin-left: 10px;
	}
	.dialog_change >>> .el-dialog {
		border-radius: 5px;
	}
	.dialog_change >>> .el-dialog__header {
		background: #f2f2f2;
		text-align: center;
	}
	.dialog_change >>> .el-dialog__title {
		line-height: 5px;
	}
	.dialog_change >>> .el-dialog__body {
		background: #fff;
		padding: 10px 20px;
	}
	.score_box {
		display: flex;
		align-items: center;
		margin-bottom: 18px;
		margin-top: 20px;
	}
	.up_photo {
		width: 60px;
		cursor: pointer;
		margin-top: 10px;
	}
	.upload_send {
		margin: 20px auto;
		width: 60%;
		background: #169bd6;
		text-align: center;
		height: 35px;
		line-height: 35px;
		color: #fff;
		border-radius: 5px;
		cursor: pointer;
	}
	.marginT {
		margin-top: 20px;
	}
	.workd_media {
		width: 100%;
	}
	.cd_content_steps {
		display: flex;
		width: 90%;
		justify-content: space-around;
		border-top: 1px solid #eeeeee;
	}
	.cd_steps_box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		cursor: pointer;
	}
	.first {
		display: flex;
		align-items: center;
		margin: 15px 0 20px 0;
		font-size: 20px;
	}
	.first > div:nth-child(2) {
		font-size: 16px !important;
		padding-left: 10px;
		line-height: 26px;
		box-sizing: border-box;
	}
</style>
