<template>
	<div class="learnpath">
		<div class="content">
			<div class="title">
				<div class="titleL">
					<div @click="returnfun" class="text">学习路径图</div>
					<div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
						<img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" />
						<div style="margin-top: 1px">{{ userInfo.jobName }}</div>
					</div>
					<div class="info" v-if="userInfo.bandDesc">
						<img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" />
						<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
					</div>
				</div>
				<div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
					<!--          <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
					<!--            <div>-->
					<!--              <div class="finish">-->
					<!--                <img-->
					<!--                    src="../../assets/image/circle.png"-->
					<!--                    style="width: 20px; height: 20px"-->
					<!--                />-->
					<!--                <div class="text">未完成</div>-->
					<!--                <div class="box"></div>-->
					<!--              </div>-->
					<!--              <div-->
					<!--                  v-for="(value, index) in unCompleteTaskList"-->
					<!--                  :key="index"-->
					<!--                  class="tasks"-->
					<!--                  :style="{-->
					<!--                  'border-bottom':-->
					<!--                    index === unCompleteTaskList.length - 1-->
					<!--                      ? null-->
					<!--                      : '1px solid rgba(229, 228, 228, 1)',-->
					<!--                }"-->
					<!--              >-->
					<!--                <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
					<!--                  {{ value.name }}-->
					<!--                </div>-->
					<!--                <img-->
					<!--                    style="width: 20px; height: 20px"-->
					<!--                    src="../../assets/image/go.png"-->
					<!--                    @click="toUnTask(chapterId)"-->
					<!--                />-->
					<!--              </div>-->
					<!--            </div>-->
					<!--            <template #reference>-->
					<!--              todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
					<!--              <div class="titleR">进入未完成任务</div>-->
					<!--            </template>-->
					<!--          </el-popover>-->
				</div>
				<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
					返回列表
				</div>
			</div>
			<!-- 路径列表-->
			<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
				<div style="min-width: 770px; width: 100%">
					<el-table :data="data" style="width: 100%" @row-click="gofun">
						<el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
							<img :src="scope.row.picUrl" style="width: 230px; height: 155px" />
						</el-table-column>
						<el-table-column align="center" prop="name" label="路径名称" />
						<el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
							<el-popover placement="bottom-start"   :width="400"  title="路径介绍" trigger="hover" :content="scope.row.remark">
								<template #reference>
									<div>{{ scope.row.remark }}</div>
								</template>
							</el-popover>
						</el-table-column>

						<el-table-column align="center" prop="organizationName" label="归属组织" />
						<el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
							<img :src="
								scope.row.taskStatus === 1
									? ongoing
									: scope.row.taskStatus === 2
										? completed
										: scope.row.taskStatus === 0
											? nostarted
											: null
							" style="width: 99px; height: 99px" />
						</el-table-column>
					</el-table>
				</div>
			</div>

			<!--      :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
			<!-- 路径列表-->
			<!-- 路径详情图 -->
			<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
				<div v-for="(item, i) in detail?.rows" :key="i">
					<img :src="useImage(`222_0${i + 2}.png`)" />
				</div>
				<!--        <div class="modal"-->
				<!--             style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
				<!--        </div>-->
			</div>
			<!-- 路径详情图 -->
		</div>
	</div>
</template>
<script setup>
import { reactive, toRefs, ref, onMounted, computed } from "vue";
import nostarted from "../../assets/image/nostarted.png";
import completed from "../../assets/image/completed.png";
import ongoing from "../../assets/image/ongoing.png";
import { boeRequest, request, usePage, useRequest } from "@/api/request";
import {
	ROUTER_CHAPTER_LIST,
	ROUTER_LIST,
	ROUTER_UNCOMPLETE_LIST,
} from "@/api/api";
import { useImage } from "@/api/utils";
import { useRouter } from "vue-router";
import store from "@/store";

const detail = ref();
const userInfo = computed(() => store.state.userInfo);
const { data } = usePage(ROUTER_LIST, { pageSize: 60 });
console.log("datadata", data);
const router = useRouter();
const returnclick = () => {
	router.back();
};

// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});

const state = reactive({
	showmapdetail: false,
});
const { showmapdetail } = toRefs(state);

const returnfun = () => {
	state.showmapdetail = false;
};

async function gofun({ routerId, name: routerName }) {
	// console.log(routerId)
	// const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
	// detail.value = data.data
	// state.showmapdetail = true;
	// router.push({path: "/pathdetails", query: {routerId}});
	import.meta.env.MODE === "development"
		? router.push({
			path: "/pathdetails",
			query: { routerId, routerName },
		})
		: window.open(
			`http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent(
				`routerId=${routerId}&routerName=${routerName}`
			)}`
		);
}
function toUnTask() { }
</script>
<style lang="scss">
#app div:nth-child(1) {
	// background: rgba(0, 0, 0, 0) !important;
}

.modal {}

.modal:after {
	content: "";
}

.learnpath {
	width: 100%;
	min-height: 800px;
	//border-radius: 8px;
	background-color: rgba(255, 255, 255, 1);
	display: flex;

	.content {
		width: 100%;
		// flex: 1;
		margin-top: 43px;

		// background-color: pink;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 53px;
			margin-right: 54px;
		}

		.title .titleL {
			display: flex;
			align-items: center;
		}

		.title .titleL .text {
			font-size: 18px;
			font-weight: bold;
			color: #333333;
			line-height: 24px;
			margin-right: 26px;
		}

		.title .titleL .info {
			display: flex;
			// align-items: center;
			font-size: 14px;
			font-weight: 400;
			color: #387df7;
		}

		.title .titleR {
			width: 157px;
			height: 48px;
			border: 2px solid #0060ff;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			font-size: 16px;
			font-weight: bold;
			color: #0060ff;
		}

		.head {
			// height: 50px;
			background: #f9f9f9;
			margin-top: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			font-weight: 500;
			color: #333333;
			margin-left: 53px;
			margin-right: 54px;
			width: calc(100% - 107px);
			// min-width: 770px;
			overflow-x: auto;

			.el-table th.el-table__cell {
				background: rgba(249, 249, 249, 1);
				color: rgba(51, 51, 51, 1);
				font-size: 14px;
				font-weight: 500;
			}

			.el-table .cell {
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				word-break: break-all;
			}

			.el-table__row {
				height: 231px;
				font-size: 14px;
				color: rgba(102, 102, 102, 1);
				font-weight: 500;
			}
		}

		.mapdetail {
			width: calc(100% - 107px);
			height: 577px;
			background: rgba(242, 245, 247, 0.6);
			margin-top: 26px;
			border-radius: 8px;
			margin-left: 53px;
			margin-right: 54px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.lppopover {
	.finish {
		padding-left: 27px;
		padding-right: 18px;
		margin-top: 15px;
		margin-bottom: 17px;
		position: relative;
		display: flex;
		align-items: center;
	}

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

	.box {
		width: 59px;
		height: 10px;
		background-color: rgba(36, 120, 255, 0.15);
		position: absolute;
		left: 50px;
		top: 15px;
	}

	.tasks {
		width: 405px;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 28px;
		cursor: pointer;
	}
  .box-item {
  width: 200px;
  margin-top: 10px;
}
}
</style>
