<template>
	<div>
		<el-dialog
			v-model="dialogVisible"
			:before-close="handleClose"
			fullscreen
			:show-close="false"
		>
			<template #header>
				<div class="topH">
					<div class="backA"></div>
					<div class="dialog-header">
						{{ Tips }}
					</div>
					<div class="backA">
						<div class="bABtn" style="flex-shrink: 0" @click="openCourseDetail">
							{{ lang.ssEnterCourse }}
						</div>
						<div
							@click="handleCloseL"
							style="
								cursor: pointer;
								display: flex;
								align-items: center;
								gap: 5px;
							"
						>
							<img src="../../assets/icon/backk.svg" alt="" />
							<span style="flex-shrink: 0">{{ lang.ssBack }}</span>
						</div>
					</div>
				</div>
			</template>
			<div v-loading="pageloading" style="height: 100%;">
				<div class="fileArea2" @click="openDra" v-if="lang.lang != 'hk'">
					<!-- <img src="../../assets/icon/filemr.svg" alt=""> -->
				</div>
				<el-drawer
					v-model="drawer"
					direction="rtl"
					size="500px"
					:close-on-click-modal="false"
					:show-close="false"
					:before-close="handleClose"
				>
					<template #header>
						<div class="closeBtn">
							<div style="display: flex; align-items: center; gap: 10px">
								<img src="../../assets/icon/tishi.svg" alt="" />
								<span>{{ lang.ssGuide }}</span>
							</div>
							<div class="fileArea" @click="drawer = false"></div>
						</div>
					</template>
					<template #default>
						<div class="draCon">
							<div class="dratit">
								<div
									class="tit"
									:class="[drawertit == 1 ? 'tit2' : '']"
									@click="drawertit = 1"
								>
									{{
										lang.ssFilesCount.replace(
											/\*/g,
											inst.file && inst.file.length ? inst.file.length : 0
										)
									}}
								</div>
								<div
									class="tit"
									:class="[drawertit == 0 ? 'tit2' : '']"
									@click="drawertit = 0"
								>
									{{ lang.ssText }}
								</div>
							</div>
							<div class="draconL" v-if="drawertit == 0">
								<div v-html="inst.content" @click="showPreviewImg"></div>
							</div>
							<div class="draCon" v-if="drawertit == 1">
								<div class="pdflist" v-if="inst.file && inst.file.length">
									<div v-for="item in inst.file" :key="item.id">
										<div
											@click="cutPdf(item.url)"
											class="pdfCS"
											:class="[pdfUrl == item.url ? 'pdfback' : '']"
										>
											<div class="pdfCSTit">{{ item.name }}</div>
											<img
												style="flex-shrink: 0"
												src="../../assets/icon/xiazai.png"
												alt=""
												@click.stop="downloadPdf(item)"
											/>
											<!-- @click.stop="downloadPdf(item.url,item.name)" -->
										</div>
									</div>
								</div>
								<div style="flex: 1" v-if="inst.file && inst.file.length">
									<iframe
										:src="pdfUrl"
										width="100%"
										height="100%"
										frameborder="0"
									></iframe>
								</div>
							</div>
						</div>
					</template>
				</el-drawer>
				<!-- <div class="courseL" @click="openCourseDetail">
                <span>点击进入对应课程</span>
                <img :src="dian" alt="">
            </div> -->
				<iframe
					allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
					ref="iframeRef1"
					:src="iframeRef1Url"
					style="width: 100%; height: 100%"
					frameborder="0"
				>
				</iframe>
			</div>
		</el-dialog>
	</div>
    <!-- 富文本图片放大 -->
    <div class="imgDolg" v-show="imgPreview.show" @click.stop="imgPreview.show = false">
      <i class="el-icon-close" id="imgDolgClose" @click.stop="imgPreview.show = false"></i>
      <img @click.stop="imgPreview.show = true" :src="imgPreview.img" />
    </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { openCourseIframe } from '@/composables/useCourseIframe'
import "../../common/aws-sdk-2.235.1.min.js";
import axios from "axios";

import { userInfoStore } from "../../stores/counter";
import { defineExpose } from "vue";
const lang = inject('lang')
const user = userInfoStore();
const iframeRef1Url = ref("");
const cid = ref("");
const dialogVisible = ref(false);
const Tips = ref("");
const drawer = ref(false);
const drawertit = ref("1");
const inst = ref("");
const pdfUrl = ref("");
const pageloading = ref(false);
const imgPreview = ref({
	img: "",
	show: false,
});
const showPreviewImg = (e) => {

	if (e.target.nodeName === "IMG") {
		imgPreview.value.img = e.target.src;
		imgPreview.value.show = true;
	}
    console.log('imgPreview',imgPreview.value);
    
};
const downloadPdf = (f) => {
	console.log("f", f);

	var credentials = {
		accessKeyId: "AKIATLPEDU37QV5CHLMH",
		secretAccessKey: "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",
	}; //秘钥形式的登录上传
	window.AWS.config.update(credentials);
	window.AWS.config.region = "cn-northwest-1"; //设置区域
	let url2 = f.url;
	let _url2 = "";
	if (
		url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
	) {
		_url2 = url2.split("https://view.officeapps.live.com/op/view.aspx?src=")[1];
	} else {
		_url2 = url2;
	}

	var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
	let name = decodeURIComponent(
		_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
	);
	var params = {
		Bucket: "ccrb",
		Key: name,
	};
	s3.getObject(params, function (err, data) {
		if (err) console.log(err, err.stack);
		// an error occurred
		else {
			let url = window.URL.createObjectURL(new Blob([data.Body]));
			let a = document.createElement("a");
			a.name = f.name;
			a.href = url;
			a.download = f.name;
			a.click();
			console.log(data);
		} // sxuccessful response
	});
};

const handleClose = (done) => {
	done();
};

const handleCloseL = () => {
	dialogVisible.value = false;
	iframeRef1Url.value = "";
};
const cutPdf = (val) => {
	pdfUrl.value = val;
};
const gotoPage = (val) => {
	pageloading.value = true;
	dialogVisible.value = true;
	console.log("val", val);
	inst.value = "";
	drawertit.value = "1";
	iframeRef1Url.value = val.link;
	cid.value = val.courselink;
	console.log("inst.value", inst.value);
	if (val.inst) {
		inst.value = JSON.parse(val.inst);
		// console.log("inst", { ...inst.value });
		if ({ ...inst.value }.file.length) {
			pdfUrl.value = { ...inst.value }.file[0].url;
		}
	}
	dialogVisible.value = true;
	Tips.value = val.name;
	pageloading.value = false;
};
defineExpose({
	gotoPage,
});
const openDra = () => {
	drawer.value = true;
};
const openCourseDetail = () => {
	let id = cid.value;
	console.log(user.user);
	// 会返回复制得课程
	axios.post("https://pbl.cocorobo.cn/api/pbl/getcopyCourseByUseridSz", {id: id +','+ user.user.userid}, {
		headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
		withCredentials: true
	})
	.then(res => {

	// top.U.A.Request(
	// 	"https://pbl.cocorobo.cn/api/pbl/getcopyCourseByUseridSz",
	// 	[id, user.user.userid],
	// 	function (res) {
			console.log(res);
			if (res.data[0].length > 0) {
				// let isSave = res.value[0].filter(x => {
				//   return x.courseId == id
				// })
				//这个是打开指定的课程接口
				let url = '';
				if (lang.lang == 'hk') {
					url = "https://pbl.cocorobo.hk"
				}else if (lang.lang == 'en') {
					url = "https://pbl.cocorobo.com"
				}else{
					url = "https://pbl.cocorobo.cn"
				}
				let url2 = `${url}/pbl-student-table/dist/#/courseDetail?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}&courseId=${res.data[0][0].courseId}&tType=1&cid=&screenType=2`
				// top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 2, user.user.type);
				// top.U.MD.D.I.openInApplication('setUrl',{url:url2,title:'课程详情',id:new Date().getTime()})
				openCourseIframe(url2)
				
				// top.U.MD.D.I.openInApplication(
				// 	"studyDetail",
				// 	res.value[0][0].courseId,
				// 	2,
				// 	user.user.type
				// );
			} else {
				updateCourseId(id, "studyDetail");
			}
		})
		.catch(err => {
			console.log(err)
		})
};
const updateCourseId = (id, type) => {
	axios.post("https://pbl.cocorobo.cn/api/pbl/copyCourseSz", {id: id +','+ user.user.userid}, {
		headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
		withCredentials: true
	})
	.then(res => {
	
	// top.U.A.Request(
	// 	"https://pbl.cocorobo.cn/api/pbl/copyCourseSz",
	// 	[id, user.user.userid],
	// 	function (res) {
			console.log(res);
			if (res.data[0][0].courseId != "") {
				if (type == "openCourseNewUpdate") {
					top.U.MD.D.I.openInApplication(
						"openCourseNewUpdate",
						res.data[0][0].courseId
					);
				} else {
					let url = '';
					if (lang.lang == 'hk') {
						url = "https://pbl.cocorobo.hk"
					}else if (lang.lang == 'en') {
						url = "https://pbl.cocorobo.com"
					}else{
						url = "https://pbl.cocorobo.cn"
					}
					let url2 = `${url}/pbl-student-table/dist/#/courseDetail?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}&courseId=${res.data[0][0].courseId}&tType=${user.user.type}&cid=&screenType=2`
					// top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 2, user.user.type);
					// top.U.MD.D.I.openInApplication('setUrl',{url:url2,title:'课程详情',id:new Date().getTime()})
					openCourseIframe(url2)

					// top.U.MD.D.I.openInApplication(
					// 	"studyDetail",
					// 	res.value[0][0].courseId,
					// 	3,
					// 	user.user.type
					// );
				}
			}
		})
		.catch(err => {
			console.log(err)
		})
};
</script>

<style lang="scss" scoped>
.alexp {
	display: flex;
	flex-direction: column;
	gap: 20px;
	.areaL {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}
	.tit {
		font-size: 16px;
		color: #000;
		font-weight: 600;
	}
	.con {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		// grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 0px;
		.conL {
			flex: 1;
			box-sizing: border-box;
			// background: #fff;
			// border-radius: 10px;
			display: flex;
			cursor: pointer;
			flex-direction: column;
			justify-content: space-between;
			img {
				width: 100%;
				object-fit: cover;
				cursor: pointer;
			}
		}
	}
}
.aiex {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	.cont {
		border-radius: 4px;
		position: relative;
		display: flex;
		flex-direction: column;
		flex: 1;
		cursor: pointer;
		padding: 12px;
		box-sizing: border-box;
		min-height: 36px;
		background: #fff;
		img {
			height: 170px;
			width: 100%;
			object-fit: cover;
			border-radius: 5px;
		}
		.tit {
			margin-top: 16px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-weight: normal;
			color: #555555;
			font-size: 14px;
		}
	}
}
:deep(.el-dialog__body) {
	width: 100% !important;
	height: calc(100% - 65px);
	padding: 0 !important;
	position: relative;
}
.closeBtn {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	span {
		font-family: PingFang TC;
		font-weight: 600;
		font-style: Semibold;
		font-size: 20px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #000;
	}
}
.fileArea {
	position: absolute;
	top: 0;
	right: 0;
	width: 63px;
	height: 63px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: url("../../assets/icon/cha2.svg") no-repeat center center;
	background-color: #3781fc33;
	cursor: pointer;
}
.fileArea:hover {
	background: url("../../assets/icon/draCha.svg") no-repeat center center;
	background-color: #3781fc;
}
.fileArea2 {
	position: absolute;
	top: 0;
	right: 0;
	width: 63px;
	height: 63px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
	background: url("../../assets/icon/fmorer.png") no-repeat center center;
	background-color: #3781fc33;
}
.fileArea2:hover {
	background: url("../../assets/icon/filemr.svg") no-repeat center center;
	background-color: #3781fc;
}
:deep(.el-dialog__header) {
	padding: 0 !important;
	height: 58px;
}
.dialog-header {
	font-size: 18px;
	font-weight: 600;
	width: 70%;
	text-align: center;
	color: #000;
}
.courseL {
	background: #ffffff;
	cursor: pointer;
	color: #f5a70c;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 10px;
	box-sizing: border-box;
	border-radius: 5px;
	font-weight: 600;
	font-size: 18px;
	border: 2px #e7e7e7 solid;
	top: 10px;
	left: 65%;
	gap: 5px;
	img {
		height: 25px;
		object-fit: contain;
	}
}
.topH {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}
.backA {
	display: flex;
	gap: 30px;
	height: 35px;
	align-items: center;
	width: 15%;
	font-size: 16px;
	justify-content: flex-end;
	.bABtn {
		padding: 3px 15px;
		cursor: pointer;
		box-sizing: border-box;
		background: #3781fc;
		color: #fff;
		border-radius: 5px;
	}
}
.draCon {
	display: flex;
	flex-direction: column;
	height: 100%;
	.dratit {
		display: flex;
		border-bottom: 1px #c3c3c3 solid;
		.tit {
			font-family: PingFang TC;
			font-weight: 600;
			font-style: Semibold;
			font-size: 18px;
			line-height: 100%;
			color: #000;
			flex: 1;
			text-align: center;
			height: 35px;
			cursor: pointer;
		}
		.tit2 {
			border-bottom: 1px #000 solid;
		}
	}
	.draconL {
		flex: 1;
		overflow: auto;
	}
	.pdflist {
		max-height: 100px;
		overflow: auto;
		padding: 20px 0;
		box-sizing: border-box;
		.pdfCS {
			padding: 3px 10px;
			box-sizing: border-box;
			border-radius: 5px;
			font-size: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
			.pdfCSTit {
				line-clamp: 1;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			img {
				height: 15px;
				object-fit: cover;
				cursor: pointer;
			}
		}
		.pdfback {
			background: #3781fc33;
		}
	}
}
//富文本图片放大
.imgDolg {
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 9999;
	background-color: rgba(140, 134, 134, 0.6);
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	#imgDolgClose {
		position: fixed;
		top: 35px;
		cursor: pointer;
		right: 7%;
		font-size: 50px;
		color: white;
	}
	img {
		width: 80%;
	}
}
</style>
