<!--其他情况-->
<template>
	<div class="detail-wrap">
		<div class="top box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">重点实验室</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="labList">
				<div class="labCard" v-for="item in labList">
					<img :src="item.logoUrl" alt="" class="labPic" />
					<div class="labTitle">{{ item.labName
					}}</div>
					<div class="labDes">{{ item.introduction }}</div>
					<div class="labTags">
						<div class="tag1" v-for="value in item.arealist"
							:class="{ tag2: value === '人工智能', tag3: value === '生物科技', tag4: value === '天体物理' }">{{ value }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="down box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">政策文件</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="policyList">
				<div class="policyBox" v-for="item in policyList">
					<img :src="item.logoUrl" alt="" style="/* 矩形 211 */
width: 57px;
height: 77px;" />
					<div class="polContent">
						<div class="polTitle">{{ item.name }}</div>
						<div class="polDes">{{ item.introduction }}</div>
					</div>
				</div>
			</div>
			<div class="box1-main-footer">
				<div class="info">
					{{ `共有${total}条` }}
				</div>
				<div class="page-box">
					<el-pagination @current-change="handleCurrentChange" :pageSize="pageSize" :current-page="currentPage"
						size="small" background layout="prev, pager, next" :total="total" />
				</div>
			</div>
		</div>


	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import {
	getLabList,
	getPolicyList
} from "@/api/innovationSubject/overview.js";
import { useRouter } from "vue-router";
const router = useRouter();

import pic1 from "./assets/images/pic1.png";
import pic2 from "./assets/images/pic2.png";
import pic3 from "./assets/images/pic3.png";
import pic4 from "./assets/images/pic4.png";
import pic5 from "./assets/images/pic5.png";
import pic6 from "./assets/images/pic6.png";
import pic7 from "./assets/images/pic7.png";

// const labList = ref([
// 	{
// 		pic: pic1,
// 		title: `怀斯生物启发工程研究所`,
// 		des: "成立于2009年，由汉斯约尔格·怀斯（Hansjörg Wyss）捐赠建立，聚焦仿生学与跨学科工程，推动医疗、机器人、材料等领域的突破。",
// 		tags: ["生物科技"]
// 	},
// 	{
// 		pic: pic2,
// 		title: `罗兰研究所`,
// 		des: "原为独立研究机构，2002年并入哈佛，支持高风险、高回报的基础科学研究，尤其鼓励青年科学家。",
// 		tags: ["物理学", "化学"]
// 	},
// 	{
// 		pic: pic3,
// 		title: `哈佛量子计划`,
// 		des: "跨学院合作平台，整合物理、工程、计算机科学等资源，推动量子科学与技术发展。",
// 		tags: ["物理"]
// 	},
// 	{
// 		pic: pic4,
// 		title: `博德研究所`,
// 		des: "全球顶尖基因组学与生物医学研究中心，推动精准医学与疾病机制研究。",
// 		tags: ["医学"]
// 	},
// 	{
// 		pic: pic5,
// 		title: `哈佛干细胞研究所`,
// 		des: "成立于2004年，联合哈佛医学院、牙医学院、文理学院等，推动干细胞基础研究与临床转化。",
// 		tags: ["医学"]
// 	},
// 	{
// 		pic: pic6,
// 		title: `哈佛大学天体物理中心`,
// 		des: "由哈佛大学与史密森尼学会于1973年联合成立，是全球规模最大、最活跃的天体物理研究机构之一。",
// 		tags: ["天体物理"]
// 	}

// ]);

// const policyList = ref([
// 	{
// 		title: "《哈佛大学权利与责任声明》",
// 		des: "阐明学生在言论自由、学术自由、正当程序、尊重他人等方面的权利与义务。"
// 	},
// 	{
// 		title: "《哈佛大学学术诚信政策》",
// 		des: "定义抄袭、作弊、伪造等学术不端行为，并规定处理流程。"
// 	},
// 	{
// 		title: "《哈佛大学反歧视与反骚扰政策》",
// 		des: "禁止基于种族、性别、性取向、宗教、残疾等的歧视与骚扰，明确举报与调查机制。"
// 	},
// 	{
// 		title: "《研究合规与人类受试者保护政策》",
// 		des: "规范涉及人类受试者的研究（如医学、心理学、社会学实验），确保符合联邦法规（如Common Rule）。"
// 	},
// 	{
// 		title: "《哈佛法学院学术政策手册》",
// 		des: "详述J.D./LL.M./S.J.D.学位要求、课程规则、成绩制度、书面作业要求、出勤规定、荣誉毕业标准等。"
// 	},
// 	{
// 		title: "《哈佛文理研究生院学生手册》",
// 		des: "涵盖博士生资格考试、论文提交、助教职责、奖学金续期、学术进展评估等。"
// 	}
// ]);

//创新主体其他情况:重点实验室
const labList = ref([])
const handleGetLabList = async () => {
	try {
		let params = {
			id: router.currentRoute._value.params.id
		}
		const res = await getLabList(params);
		console.log("重点实验室", res);
		if (res.code === 200 && res.data) {
			labList.value = res.data
		}
	} catch (error) {
		console.error("获取重点实验室error", error);
	}
};
//创新主体其他情况:政策文件
const policyList = ref([])
const total = ref(0)
const currentPage = ref(1)
const handleGetPolicyList = async () => {
	try {
		let params = {
			currentPage: currentPage.value,
			pageSize: 6,
			id: router.currentRoute._value.params.id
		}
		const res = await getPolicyList(params);
		console.log("政策文件", res);
		if (res.code === 200 && res.data) {
			policyList.value = res.data.content
			total.value = res.data.totalElements
		}
	} catch (error) {
		console.error("获取政策文件error", error);
	}
};

onMounted(async () => {
	handleGetLabList()
	handleGetPolicyList()
});
</script>

<style lang="scss" scoped>
.detail-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 30px;

	.box {
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
	}

	.box-header {
		height: 56px;
		display: flex;
		position: relative;

		.header-left {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: rgba(10, 87, 166, 1);
		}

		.title {
			margin-left: 14px;
			margin-top: 14px;
			color: rgba(5, 95, 194, 1);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			letter-spacing: 0px;
			text-align: left;
		}

		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 52px;
			display: flex;

			.btn {
				margin-left: 8px;
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 28px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				cursor: pointer;
			}

			.btnActive {
				border: 1px solid rgba(10, 87, 166, 1);
				background: rgba(246, 250, 255, 1);
				color: rgba(10, 87, 166, 1);
			}
		}

		.header-info {
			height: 22px;
			position: absolute;
			right: 84px;
			top: 17px;
			display: flex;
			justify-content: flex-end;

			.icon {
				margin-top: 3px;
				width: 14px;
				height: 14px;
				margin-right: 8px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				height: 22px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
			}
		}

		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 8px;

			.icon {
				width: 28px;
				height: 28px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.checkboxRight {
				color: rgba(132, 136, 142, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: justify;
			}

			.btnRightActive {
				width: 80px;
				height: 28px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				border: 1px solid rgba(5, 95, 194, 1);
				border-radius: 4px;
				background: rgba(231, 243, 255, 1);
				color: rgba(5, 95, 194, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 30px;
				letter-spacing: 0px;
				text-align: center;
			}

			.btnRight {
				width: 80px;
				height: 28px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 30px;
				letter-spacing: 0px;
				text-align: center;
			}
		}
	}
}

.top {
	width: 1600px;
	height: 552px;

	.labList {
		display: flex;
		gap: 16px;
		margin-left: 24px;
		flex-wrap: wrap;

		.labCard {
			width: 376px;
			height: 228px;
			display: flex;
			flex-direction: column;
			padding: 20px;
			box-sizing: border-box;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 10px;
			background: rgba(255, 255, 255, 0.65);

			.labPic {
				width: 32px;
				height: 32px;
			}

			.labTitle {
				margin-top: 12px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
				letter-spacing: 1px;
				text-align: left;
			}

			.labDes {
				margin-top: 4px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				letter-spacing: 0px;
				text-align: justify;
			}

			.labTags {
				display: flex;
				gap: 8px;
				height: auto;
				margin-top: auto;

				.tag1 {
					height: 22px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 1px 8px 1px 8px;
					box-sizing: border-box;
					border: 1px solid rgba(186, 224, 255, 1);
					border-radius: 4px;
					background: rgba(230, 244, 255, 1);
					color: rgba(22, 119, 255, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}

				.tag2 {
					height: 22px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 1px 8px 1px 8px;
					box-sizing: border-box;
					border: 1px solid rgba(255, 163, 158, 1);
					border-radius: 4px;
					background: rgba(255, 241, 240, 1);
					color: rgba(245, 34, 45, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}

				.tag3 {
					height: 22px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 1px 8px 1px 8px;
					box-sizing: border-box;
					border: 1px solid rgba(255, 241, 184, 1);
					border-radius: 4px;
					background: rgba(255, 251, 230, 1);
					color: rgba(250, 173, 20, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}

				.tag4 {
					height: 22px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 1px 8px 1px 8px;
					box-sizing: border-box;
					border: 1px solid rgba(217, 247, 190, 1);
					border-radius: 4px;
					background: rgba(246, 255, 237, 1);
					color: rgba(82, 196, 26, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
	}

}

.down {
	width: 1600px;
	height: 362px;

	.policyList {
		width: 1600px;
		display: flex;
		gap: 16px;
		margin-left: 24px;
		flex-wrap: wrap;

		.policyBox {
			width: 506px;
			height: 109px;
			box-sizing: border-box;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 10px;
			background: rgba(255, 255, 255, 0.65);
			display: flex;
			gap: 16px;
			padding: 16px;

			.polPic {
				width: 57px;
				height: 77px;
				box-sizing: border-box;
				border: 1px solid rgba(234, 236, 238, 1);
				background: url("./assets/images/pic7.png");
			}

			.polContent {
				display: flex;
				gap: 4px;
				flex-direction: column;

				.polTitle {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 1px;
					text-align: left;
				}

				.polDes {
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
					letter-spacing: 0px;
					text-align: justify;
				}
			}

		}
	}

	.box1-main-footer {
		margin: 30px 22px 0 22px;
		height: 22px;
		display: flex;
		justify-content: space-between;

		.info {
			height: 22px;
			line-height: 22px;
			color: rgb(132, 136, 142);
			font-family: "Microsoft YaHei";
			font-size: 14px;
			font-weight: 400;
			text-align: left;
		}
	}
}
</style>