<template>
	<div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
	<div class="pathdetails" style="padding: 30px">

		<!-- 面包屑导航 -->

		<div class="pdname">
			{{ data.name }}
			<el-popover v-if="data.remark" ref="popover" popper-class="jianjie" placement="right" trigger="hover" :width="300"
				:content="data.remark">
				<template #reference><span style="font-size: 16px;font-weight: 600;">简介></span></template>
			</el-popover>
		</div>

		<!-- 详细信息 -->
		<div class="detailinfo">
			<div class="detailL">
				<div>
					<div class="title">
						<div class="titleL">{{ data.currentStageName }}</div>
						<div class="titleR" :style="{ display: 'flex' }">
							<img :src="data.currentChapterCnt ? circle : circle2" />
							<div class="titleRT" :style="{ color: data.currentChapterCnt ? '' : 'rgba(102, 102, 102, 1)' }">
								{{ data.currentChapterCnt ? '进行中' : '未开始' }}
							</div>
						</div>
					</div>
					<div class="course" v-for="(value, index) in data.taskBoList?.filter(
	(e) => !whiteTypes(e.type)
)" :key="index">
						<div style="width: 70%">
							<div v-if="value.name.length > 50" class="coursename" :title="value.name">
								<el-popover ref="popover" placement="right" trigger="hover" :width="300" :content="value.name">
									<template #reference>{{ value.name }}</template>
								</el-popover>
							</div>

							<div v-else class="coursename" :title="value.name">
								{{ value.name }}
							</div>
							<div class="coursetag">
								<div class="tag1" style="margin-right: 11px; margin-top: 16px" v-if="value.flag">
									必修
								</div>
								<div class="tag2" style="margin-right: 11px; margin-top: 16px" v-if="!value.flag">
									选修
								</div>
								<div class="tag3" style="margin-right: 11px; margin-top: 16px">
									{{ types.typeName[value.type] || "" }}
								</div>

								<!--                                <div-->
								<!--                                    v-for="(item, key) in value.flag"-->
								<!--                                    :key="key"-->
								<!--                                    :class="{1:'tag1',2:'tag2',3:'tag3',4:'tag4'}[item.type]"-->
								<!--                                    style="margin-right: 11px; margin-top: 16px"-->
								<!--                                >-->
								<!--                                  {{ item.name }}-->
								<!--                                </div>-->
							</div>
							<div v-if="value.type === 1" class="progressBox">
								<div>当前进度</div>
								<div class="progress">
									<div style="width: 291px">
										<el-progress :percentage="value.currentRatio" :show-text="false" :stroke-width="8" :color="
	{
		0: 'rgba(238, 112, 108, 1)',
		1: 'rgba(255, 151, 38, 1)',
		2: 'rgba(39, 122, 255, 1)',
		3: 'rgba(59, 94, 251, 1)',
		4: 'rgba(57, 219, 183, 1)',
		5: 'rgba(57, 219, 183, 1)',
	}[parseInt(value.currentRatio / 20)]
" />
									</div>
									<div style="font-size: 14px;font-weight: 500;color: #277aff;margin-left: 10px;" :style="{
	color: {
		0: 'rgba(238, 112, 108, 1)',
		1: 'rgba(255, 151, 38, 1)',
		2: 'rgba(39, 122, 255, 1)',
		3: 'rgba(59, 94, 251, 1)',
		4: 'rgba(57, 219, 183, 1)',
		5: 'rgba(57, 219, 183, 1)',
	}[parseInt(value.currentRatio / 20)],
}">
										{{ value.currentRatio }}%
									</div>
								</div>
							</div>
						</div>
						<div class="goclass" :style="{
	background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
}" @click="toFinish(value)">
							{{ value.status === 1 ? "已完成" : types.path[value.type] ? types.toName[value.type] : "未开放" }}
						</div>
						<!--            <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
						<!--              <div-->
						<!--                  class="goclass"-->
						<!--                  :style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }">去上课-->
						<!--              </div>-->
						<!--              <img-->
						<!--                  style="width: 76px; height: 76px; margin-right: 61px"-->
						<!--                  :style="{ display: value.currentRatio === 0 ? 'flex' : 'none' }"-->
						<!--                  src="../../assets/image/pathdetails/notstarted.png"-->
						<!--              />-->
						<!--            </div>-->
					</div>
				</div>
				<!-- <div class="tag1">必修</div>
        <div class="tag2">选修</div>
        <div class="tag3">测评</div>
        <div class="tag4">#通用力</div> -->
			</div>
			<div class="detailR">
				<!--        todo #路径详情 课程公告及共享文档缺失-->
				<!-- 课程公告及共享文档 -->
				<div class="detailRT">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="路径说明" name="first">
							<div class="notice">
								{{ data.remark || "暂无说明" }}
							</div>
						</el-tab-pane>
						<!--
            <el-tab-pane label="共享文档" name="second">    -->
						<!--              <div style="padding: 19px 30px 17px 28px">-->
						<!--                <div-->
						<!--                    v-for="(value, index) in sharedoc"-->
						<!--                    :key="index"-->
						<!--                    style="-->
						<!--                    display: flex;-->
						<!--                    align-items: center;-->
						<!--                    margin-bottom: 15px;-->
						<!--                  "-->
						<!--                >-->
						<!--                  <img :src="value.img" style="width: 22px; height: 26px"/>-->
						<!--                  <div class="sharedocname">{{ value.name }}</div>-->
						<!--                  <div class="download">-->
						<!--                    <img-->
						<!--                        src="../../assets/image/download.png"-->
						<!--                        style="width: 16px; height: 15px"-->
						<!--                    />-->
						<!--                    <div style="margin-left: 7px">下载</div>-->
						<!--                  </div>-->
						<!--                </div>-->
						<!--              </div>-->
						<!--   </el-tab-pane>-->
					</el-tabs>
				</div>
				<!-- 课程公告及共享文档 -->
				<!-- 个人信息及学习进度 -->
				<div class="detailRB">
					<div class="info">
						<div class="title">
							<img style="width: 21px; height: 20px" src="../../assets/image/pathdetails/info.png" />
							<div class="text" style="margin-left: 7px">个人信息</div>
							<div class="box"></div>
						</div>
						<!--            todo #路径详情 个人信息缺少img和介绍-->
						<div class="teacheritem" :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }">
							<img class="peopleimg" :src="userInfo.avatar" />
							<div style="margin-left: 17px">
								<div class="teacherName">
									<div style="margin-right: 5px">
										{{ userInfo?.realName }}
									</div>
									<!--                  <div v-for="(item, key) in data.userInfoBo?.medal" :key="key">-->
									<!--                    <img class="teacherMedal" :src="item"/>-->
									<!--                  </div>-->
								</div>
								<div class="introduce">{{ userInfo?.bandDesc }}</div>
							</div>
						</div>
					</div>
					<div class="info" style="padding-top: 20px">
						<div class="title">
							<img style="width: 18px; height: 17px" src="../../assets/image/pathdetails/study.png" />
							<div class="text" style="margin-left: 9px">学习进度</div>
							<div class="box"></div>
						</div>
						<!--
            <div class="rate">
              <div class="ratetext">上次学到：{{ data.lastLearned }}</div>
              <div class="ratebtn">继续学习</div>
            </div>-->
						<div style="margin-top: 16px">
							<div class="progressBox">
								<div>总进度</div>
								<div class="progress">
									<div style="width: 291px">
										<el-progress :percentage="parseInt(data.currentChapterCnt / data.totalChapterCnt * 100)"
											:show-text="false" :stroke-width="8" :color="
	{
		0: 'rgba(238, 112, 108, 1)',
		1: 'rgba(255, 151, 38, 1)',
		2: 'rgba(39, 122, 255, 1)',
		3: 'rgba(59, 94, 251, 1)',
		4: 'rgba(57, 219, 183, 1)',
		5: 'rgba(57, 219, 183, 1)',
	}[(parseInt(data.currentChapterCnt / data.totalChapterCnt) * 100) / 20]
" />
									</div>
									<div style="font-size: 14px; font-weight: 500; margin-left: 10px" :style="{
	color: {
		0: 'rgba(238, 112, 108, 1)',
		1: 'rgba(255, 151, 38, 1)',
		2: 'rgba(39, 122, 255, 1)',
		3: 'rgba(59, 94, 251, 1)',
		4: 'rgba(57, 219, 183, 1)',
		5: 'rgba(57, 219, 183, 1)',
	}[parseInt((data.currentChapterCnt / data.totalChapterCnt * 100) / 20)],
}">
										{{ parseInt(data.currentChapterCnt / data.totalChapterCnt * 100) }}%
									</div>
								</div>
							</div>
						</div>
						<div style="margin-top: 31px">
							<div class="progressBox">
								<div>必修进度</div>
								<div class="progress">
									<div style="width: 291px">
										<el-progress :percentage="parseInt(data.currentReqCnt / data.totalReqCnt * 100)" :show-text="false"
											:stroke-width="8" :color="
	{
		0: 'rgba(238, 112, 108, 1)',
		1: 'rgba(255, 151, 38, 1)',
		2: 'rgba(39, 122, 255, 1)',
		3: 'rgba(59, 94, 251, 1)',
		4: 'rgba(57, 219, 183, 1)',
		5: 'rgba(57, 219, 183, 1)',
	}[parseInt((data.currentReqCnt / data.totalReqCnt * 100) / 20)]
" />
									</div>
									<div style="
                      font-size: 14px;
                      font-weight: 500;
                      color: #277aff;
                      margin-left: 10px;
                    " :style="{
	color: {
		0: 'rgba(238, 112, 108, 1)',
		1: 'rgba(255, 151, 38, 1)',
		2: 'rgba(39, 122, 255, 1)',
		3: 'rgba(59, 94, 251, 1)',
		4: 'rgba(57, 219, 183, 1)',
		5: 'rgba(57, 219, 183, 1)',
	}[parseInt((data.currentReqCnt / data.totalReqCnt * 100) / 20)],
}">
										{{ parseInt(data.currentReqCnt / data.totalReqCnt * 100) }}%
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 个人信息及学习进度 -->
			</div>
		</div>
		<!-- 详细信息 -->
		<!-- 弹框提示信息 -->
		<el-dialog title="" top="347px" v-model="dialogVisible" :show-close="false"
			style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
			width="502px">
			<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
			<span slot="footer" style="display:inline-block;margin-top:60px;">
				<el-button @click="dialogVisible = false" style="width:140px;height:40px;margin-right: 22px;">取消</el-button>
				<el-button type="primary" @click="dialogVisible = false" style="width:140px;height:40px;">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script setup>
import { computed, reactive, ref, watch } from "vue";
import circle from '../../assets/image/pathdetails/circle.png';
import circle2 from '../../assets/image/pathdetails/circle2.png';
import { boeRequest, useRequest, request } from "@/api/request";
import { ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import store from "@/store";

const {
	query: { routerId, routerName },
} = useRoute();
const router = useRouter();
const returnclick = () => {
	router.back();
};
const { data } = useRequest(ROUTER_PROCESS, { routerId });
const userInfo = computed(() => store.state.userInfo);
console.log('lalalallala', data)
const activeName = ref("first");

const handleClick = (tab, event) => {
	console.log(tab, event);
};
const path = { 1: "path" };

const dialogVisible = ref(false);
const dialogVisibleTip = ref('');



const types = ref({
	typeName: {
		1: "在线",
		2: "面授",
		3: "案例",
		4: "作业",
		5: "考试",
		6: "直播",
		7: "外链",
		8: "讨论",
		9: "活动",
		10: "测评",
		11: "评估",
		12: "投票",
		13: "项目",
	},
	toName: {
		1: "去上课",
		2: "去上课",
		3: "去阅读",
		4: "去完成",
		5: "去完成",
		6: "去观看",
		7: "去查看",
		8: "去讨论",
		9: "去签到",
		10: "去完成",
		11: "去完成",
		12: "去投票",
		13: "去完成",
	},
	path: {
		1: import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线
		2: "/faceteach",
		3: import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
		4: "/homeworkpage",
		5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
		6: "/livebroadcast",
		7: ({ courseId }) =>
			request(LINK_DETAILS(courseId), {}).then(({ data: { linkAddress } }) =>
				window.open(linkAddress, '_top')
			), //外联
		8: "/discusspage",
		9: "/moreactive",
		10: ({ evaType, targetId }) =>
			window.open(
				(evaType == 0
					? import.meta.env.VITE_BOE_TEST_DETAIL_URL
					: import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL) + targetId
			,'_top'), //测评
		11: "/surveydetail",
		12: "/ballotpage",
		13: "/projectdetails",
	},
});

function toFinish(d) {
	console.log(d)
	console.log(data.value.currentStageId, routerId)
	if (!types.value.path[d.type]) {
		ElMessage.error("暂时未开放");
		return;
	}
	if (d.type == 2) {
		let date1 = new Date(d.endTime).getTime();
		let date2 = new Date().getTime();
		if (date1 < date2) {
			dialogVisibleTip.value = '当前面授课已结束';
			dialogVisible.value = true;

			//return
		}
	}
	if (d.type == 4) {
		let date1 = new Date(d.endTime).getTime();
		let date2 = new Date().getTime();
		if (date1 < date2) {
			dialogVisibleTip.value = '当前作业已结束';
			dialogVisible.value = true;

			//return
		}
	}
	// 直播结束时间
	if (d.type == 6) {
		let date1 = new Date(d.endTime).getTime();
		let date2 = new Date().getTime();
		if (date1 < date2) {
			dialogVisibleTip.value = '当前直播已结束';
			dialogVisible.value = true;
			//return
		}
	}
	// 考试 停用
	if (d.type == 5) {
		if (d.taskStatus == 1 || d.taskStatus == 2) {
			// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
			dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
			dialogVisible.value = true;
			return
		}
	}
	// 评估 停用
	if (d.type == 11) {
		if (d.taskStatus == 1 || d.taskStatus == 2) {
			// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
			dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
			dialogVisible.value = true;
			return
		}
	}
	// 其他活动 结束时间
	if (d.type == 9) {
		let date1 = new Date(d.endTime).getTime();
		let date2 = new Date().getTime();
		if (date1 < date2) {
			dialogVisibleTip.value = '当前活动已结束';
			dialogVisible.value = true;
			//return
		}
	}
	// 在线课 停用 -- 暂时没有在线课停用标记
	if (d.type == 1) {
		if (d.taskStatus == 1 || d.taskStatus == 2) {
			// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
			dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
			dialogVisible.value = true;
			return
		}
	}
	// 面授课 停用
	if (d.type == 2) {
		if (d.taskStatus == 1 || d.taskStatus == 2) {
			// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
			dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
			dialogVisible.value = true;
			return
		}
	}
	if (d.type === 3 || d.type === 7) {
		d.status || request(STUDY_RECORD, {
			studentId: userInfo.value.id,
			targetId: data.value.routerId,
			logo: 1,
			stageOrChapterId: data.value.currentStageId,
			taskId: d.routerTaskId,
		});
	}
	if (typeof types.value.path[d.type] === "string") {
		types.value.path[d.type] &&
			types.value.path[d.type].startsWith("http") &&
			window.open(types.value.path[d.type] + d.targetId,'_top');
		types.value.path[d.type] &&
			types.value.path[d.type].startsWith("/") &&
			router.push({
				path: types.value.path[d.type],
				query: {
					id: d.routerTaskId,
					type: 1,
					infoId: routerId,
					courseId: d.courseId,
					pName: data.value.name,
					sName: data.value.currentStageName,
					chapterOrStageId: data.value.currentStageId
				},
			});
	} else if (typeof types.value.path[d.type] === "function") {
		console.log("ddddddd", d);
		types.value.path[d.type](d);
		// console.log("types.value.path[d.type](d)", d);
	}
}

function whiteTypes(type) {
	return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.pathdetails {
	.crumb {
		color: #fff;
		display: flex;
		font-size: 14px;
		line-height: 24px;
	}

	.pdname {
		font-size: 20px;
		font-weight: 800;
		color: #ffffff;
		margin-top: 17px;
	}

	.detailinfo {
		width: 100%;
		margin-top: 24px;
		display: flex;
		z-index: 2;

		.detailL {
			flex: 1;
			margin-right: 20px;
			background: #ffffff;
			border-radius: 8px;
			padding-left: 45px;
			padding-right: 45px;
			padding-top: 23px;

			.title {
				height: 50px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: rgba(249, 249, 249, 1);
				margin-top: 27px;
				margin-bottom: 19px;

				.titleL {
					font-size: 16px;
					font-weight: 800;
					color: #333333;
					margin-left: 27px;
				}

				.titleR {
					display: flex;
					align-items: center;
				}

				.titleR .titleRT {
					font-size: 16px;
					font-weight: 800;
					color: #0060ff;
					margin-right: 73px;
					margin-left: 2px;
				}
			}

			.course {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 32px;
				margin-left: 26px;

				.coursename {
					font-size: 14px;
					font-weight: 500;
					color: #333330;
					line-height: 24px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

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

				.progressBox {
					font-size: 14px;
					font-weight: 500;
					color: #677d86;
					margin-top: 24px;

					.progress {
						display: flex;
						align-items: center;
					}

					.progress .el-progress-bar__outer {
						background-color: rgba(232, 241, 254, 1);
					}
				}

				.goclass {
					width: 126px;
					height: 46px;
					background: #2478ff;
					box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
					border-radius: 4px;
					font-size: 16px;
					font-weight: 800;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 37px;
					cursor: pointer;
				}
			}
		}

		.detailR {
			width: 434px;

			.detailRT {
				min-height: 298px;
				background: #ffffff;
				border-radius: 8px;

				.el-tabs__item {
					height: 56px;
					padding: 10px 33px 0px 27px;
					font-size: 14px;
					font-weight: 500;
				}

				.el-tabs__nav-wrap::after {
					background-color: rgba(56, 125, 247, 0.2);
				}

				.notice {
					padding: 15px 43px 30px 47px;
					font-size: 14px;
					font-weight: 500;
					color: #333330;
					line-height: 24px;
				}

				.sharedocname {
					width: 259px;
					font-size: 14px;
					font-weight: 400;
					color: #677d86;
					margin-left: 20px;
					line-height: 24px;
				}

				.download {
					display: flex;
					align-items: center;
					margin-left: 20px;
					cursor: pointer;
					font-size: 16px;
					font-weight: 400;
					color: #2478ff;
				}
			}

			.detailRB {
				min-height: 459px;
				background: #ffffff;
				border-radius: 8px;
				margin-top: 17px;

				.info .title {
					display: flex;
					align-items: center;
					padding-top: 39px;
					position: relative;
					margin-left: 48px;
				}

				.info .title .text {
					margin-left: 8px;
					font-size: 16px;
					color: rgba(51, 51, 51, 1);
					font-weight: 800;
				}

				.info .title .box {
					width: 75px;
					height: 10px;
					background-color: rgba(36, 120, 255, 0.15);
					position: absolute;
					left: 23px;
					top: 53px;
				}

				.info .teacheritem {
					margin-left: 48px;
					margin-right: 48px;
					margin-top: 30px;
					display: flex;
					// align-items: center;
				}

				.info .teacheritem .peopleimg {
					width: 60px;
					height: 60px;
					border-radius: 30px;
				}

				.info .teacheritem .teacherName {
					font-size: 14px;
					font-weight: bold;
					color: #394145;
					display: flex;
					align-items: center;
					width: 260px;
				}

				.info .teacheritem .teacherName .teacherMedal {
					width: 17px;
					height: 19px;
					margin-right: 4px;
					display: flex;
					align-items: center;
				}

				.info .teacheritem .introduce {
					width: 260px;
					font-size: 14px;
					font-weight: 500;
					color: #394145;
					margin-top: 14px;
					line-height: 24px;
				}

				.info .rate {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 29px;
					margin-left: 48px;
					margin-right: 26px;
				}

				.info .rate .ratetext {
					width: 259px;
					font-size: 14px;
					font-weight: 500;
					color: #677d86;
					line-height: 24px;
				}

				.info .rate .ratebtn {
					width: 86px;
					height: 36px;
					border: 1px solid #2478ff;
					border-radius: 4px;
					font-size: 14px;
					font-weight: 500;
					color: #2478ff;
					line-height: 24px;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.info .progressBox {
					font-size: 14px;
					font-weight: 500;
					color: #677d86;
					margin-top: 16px;
					margin-left: 44px;

					.progress {
						display: flex;
						align-items: center;
					}

					.progress .el-progress-bar__outer {
						background-color: rgba(232, 241, 254, 1);
					}
				}
			}
		}
	}
}
</style>
