<template>
	<div class="reslib-page" ref="reslibContainer">
		<div class="nav">
			<div
				v-for="item in navList"
				:key="item.id"
				class="nav-item"
				:class="{ active: item.id === activeItem }"
				@click="activeItem = item.id"
			>
				{{ item.name }}
			</div>
		</div>
		<el-select v-model="value" placeholder="排序方式" class="select">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
		</el-select>
		<div class="main">
			<div class="left">
				<div class="left-ti1"></div>
				<div class="left-ti2"></div>
				<div class="left-title">数据来源</div>
				<div class="left-content">
					<div v-for="item in dataList" :key="item.id" class="left-item">
						<input
							type="checkbox"
							:value="String(item.id)"
							v-model="selectedSources"
						/>{{ item.name }}
					</div>
				</div>
				<div class="left-title cl1">涉及领域</div>
				<div class="left-content">
					<div v-for="item in dataList2" :key="item.id" class="left-item">
						<input
							type="checkbox"
							:value="String(item.id)"
							v-model="selectedDomains"
						/>{{ item.name }}
					</div>
				</div>
			</div>
			<div class="right">
				<div class="right-title">
					<img src="./assets/icon01.png" alt="" />
					<div>合作限制历程</div>
				</div>
				<div class="right-main">
					<div class="main-content">
						<div v-for="item in mainDataList" :key="item.id" class="main-item">
							<div class="date">{{ item.date }}</div>
							<img :src="item.img" alt="" class="img" />
							<div class="box">
								<div class="title" @click="handleClick(item)">{{ item.title }}</div>
								<div class="content" @click="handleClick(item)">{{ item.content }}</div>
								<div class="domain">
									<div v-for="(domain, i) in item.domain" :key="i" class="domain-item">{{ domain }}</div>
								</div>
								<div class="type" :class="getTypeClass(item.type)">
									{{ item.type }}
								</div>
							</div>
						</div>
				</div>
				<div class="page">
					<div class="count">共 {{ total }} 项</div>
						<el-pagination
							v-model:current-page="currentPage"
							:page-size="pageSize"
							:total="total"
							layout="prev, pager, next"
							background
							@current-change="handlePageChange"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { getCoopRestrictionList } from "@/api/coopRestriction/coopRestriction";

import defaultImg from "../../assets/images/default-icon2.png";

// 合作限制-获取合作限制列表接口
const getMainDataList = async () => {
	const params = {
		currentPage: currentPage.value - 1, // 后端通常从0开始计页
		pageSize: pageSize.value,
		sortField: "date"
	};

	if (!selectedDomains.value.includes("0")) {
		params.area = selectedDomains.value.join(",");
	}
	if (!selectedSources.value.includes("0")) {
		params.source = selectedSources.value.join(",");
	}
	if (activeItem.value !== "0") {
		params.type = activeItem.value;
	}
	if (value.value) {
		params.sortOrder = value.value;
	}

	try {
		const res = await getCoopRestrictionList(params);
		if (res && res.code === 200) {
			mainDataList.value = (res.data.content || []).map(item => ({
				id: item.limitId,
				title: item.limitName,
				content: item.limitIntroduction,
				date: item.limitDate,
				domain: item.limitArea || [],
				type: item.limitMeans,
				// 使用默认图片
				img: defaultImg
			}));
			total.value = res.data.totalElements || 0;
		} else {
			mainDataList.value = [];
			total.value = 0;
		}
	} catch (error) {
		console.error("获取合作限制列表失败:", error);
		mainDataList.value = [];
		total.value = 0;
	}
};


const router = useRouter();
const handleClick = item => {
	const routeData = router.resolve({
		path: "/cooperationRestrictions/detail",
		query: {
			id: item.id
		}
	});
	window.open(routeData.href, "_blank");
};

const navList = ref([
	{ id: "0", name: "全部限制" },
	{ id: "01", name: "学术交流限制" },
	{ id: "02", name: "科研合作限制" },
	{ id: "03", name: "人才流动限制" },
	{ id: "04", name: "数据共享限制" }
]);
const activeItem = ref("0");

const value = ref("");

const options = [
	{
		value: "asc",
		label: "正序"
	},
	{
		value: "desc",
		label: "倒序"
	}
];
const dataList = ref([
	{
		id: "0",
		name: "全部来源"
	},
	{
		id: "02",
		name: "法案"
	},
	{
		id: "01",
		name: "行政令"
	},
	{
		id: "03",
		name: "政府公告"
	}
]);
const selectedSources = ref(["0"]);
const dataList2 = ref([
	{
		id: 0,
		name: "全部领域"
	},
	{
		id: 1,
		name: "人工智能"
	},
	{
		id: 2,
		name: "生物科技"
	},
	{
		id: 3,
		name: "新一代信息技术"
	},
	{
		id: 4,
		name: "量子科技"
	},
	{
		id: 5,
		name: "新能源"
	},
	{
		id: 6,
		name: "集成电路"
	},
	{
		id: 7,
		name: "海洋"
	},
	{
		id: 8,
		name: "先进制造"
	},
	{
		id: 9,
		name: "新材料"
	},
	{
		id: 10,
		name: "航空航天"
	},
	{
		id: 11,
		name: "深海"
	},
	{
		id: 12,
		name: "极地"
	},
	{
		id: 13,
		name: "太空"
	},
	{
		id: 14,
		name: "核"
	}
]);
const selectedDomains = ref(["0"]);
const mainDataList = ref([]);
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const reslibContainer = ref(null);

const getTypeClass = (type) => {
	const map = {
		'行政令': 'type1',
		'法案': 'type2',
		'政府公告': 'type3',
		'政令': 'type4'
	};
	return map[type] || 'type-default';
};

const handlePageChange = p => {
	currentPage.value = p;
	// 翻页后平滑滚动到资源库顶部
	if (reslibContainer.value) {
		reslibContainer.value.scrollIntoView({ behavior: "smooth" });
	}
};

onMounted(() => {
	getMainDataList();
});

watch(
	[activeItem, selectedSources, selectedDomains, value],
	(newVal, oldVal) => {
		const [newActive, newSources, newDomains] = newVal;
		const [, oldSources, oldDomains] = oldVal;

		if (newSources.includes("0") && newSources.length > 1) {
			if (oldSources.includes("0")) {
				selectedSources.value = newSources.filter(i => i !== "0");
				return; 
			} else {
				selectedSources.value = ["0"];
				return;
			}
		} else if (newSources.length === 0) {
			selectedSources.value = ["0"];
			return;
		}

		if (newDomains.includes("0") && newDomains.length > 1) {
			if (oldDomains.includes("0")) {
				selectedDomains.value = newDomains.filter(i => i !== "0");
				return;
			} else {
				selectedDomains.value = ["0"];
				return;
			}
		} else if (newDomains.length === 0) {
			selectedDomains.value = ["0"];
			return;
		}

		if (currentPage.value === 1) {
			getMainDataList();
		} else {
			currentPage.value = 1;
		}
	},
	{ deep: true }
);

watch(currentPage, () => {
	getMainDataList();
});
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.reslib-page {
	width: 1600px;
	min-height: 1565px;
	height: auto;
	position: relative;
	padding-bottom: 50px;
	.nav {
		width: 808px;
		height: 42px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 34px;
		.nav-item {
			cursor: pointer;
			padding: 8px 20px;
			font-size: 20px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 26px;
			color: rgb(59, 65, 75);
		}
		.active {
			background-color: rgb(5, 95, 194);
			border-radius: 21px;
			color: #fff;
			font-weight: 700;
		}
	}
	.select {
		width: 128px;
		position: absolute;
		top: 7px;
		right: 0px;
	}
	.main {
		width: 1600px;
		height: auto;
		min-height: 1489px;
		display: flex;
		.left {
			width: 300px;
			height: 760px;
			margin-right: 16px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			position: relative;
			.left-ti1 {
				width: 8px;
				height: 16px;
				background-color: rgb(5, 95, 194);
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				position: absolute;
				top: 17px;
				left: 0px;
			}
			.left-ti2 {
				width: 8px;
				height: 16px;
				background-color: rgb(5, 95, 194);
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				position: absolute;
				top: 207px;
				left: 0px;
			}
			.left-title {
				margin-left: 25px;
				color: rgb(5, 95, 194);
				font-size: 16px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				margin-top: 13px;
			}
			.left-content {
				// width: 109px;
				// height: 132px;
				margin-left: 25px;
				margin-top: 13px;
				.left-item {
					// width: 89px;
					height: 30px;
					margin-bottom: 4px;
					font-size: 16px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					line-height: 24px;
					color: rgb(95, 101, 108);
					input[type="checkbox"] {
						-webkit-appearance: none;
						appearance: none;
						width: 14px;
						height: 14px;
						margin-right: 8px;
						border: 1px solid rgb(200, 204, 210);
						border-radius: 4px;
						background-color: #fff;
						vertical-align: middle;
					}
					input[type="checkbox"]:checked {
						background-color: rgb(5, 95, 194);
						border-color: rgb(5, 95, 194);
					}
					input[type="checkbox"]:checked::after {
						content: "";
						display: block;
						width: 4px;
						height: 8px;
						margin: 1px auto 0;
						border: 2px solid #fff;
						border-top: none;
						border-left: none;
						transform: rotate(45deg);
					}
				}
			}
			.cl1 {
				margin-top: 21px;
			}
		}
		.right {
			width: 1284px;
			height: auto;
			min-height: 1489px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			.right-title {
				width: 1284px;
				height: 48px;
				border-bottom: 1px solid rgb(235, 238, 242);
				position: relative;
				img {
					width: 22px;
					height: 19px;
					position: absolute;
					top: 15px;
					left: 20px;
				}
				div {
					width: 120px;
					height: 48px;
					margin-left: 60px;
					font-size: 20px;
					font-weight: 700;
					font-family: "Microsoft YaHei";
					line-height: 26px;
					color: rgb(5, 95, 194);
					padding: 11px 0;
				}
			}
			.right-main {
				width: 1284px;
				height: auto;
				min-height: 1441px;
				padding: 22px 43px 80px 20px;
				position: relative;
				.main-content {
					width: 1221px;
					height: auto;
					min-height: 1345px;
					.main-item {
						width: 1221px;
						height: auto;
						min-height: 116px;
						margin-bottom: 24px;
						position: relative;
						display: flex;
						&::after {
							content: "";
							position: absolute;
							top: 37px; 
							bottom: -37px; 
							left: 91px; 
							width: 2px;
							background-color: rgb(230, 231, 232);
							z-index: 1;
						}
						&:last-child::after {
							display: none;
						}
						.date {
							flex-shrink: 0;
							width: 62px;
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(5, 95, 194);
							text-align: right;
							margin-top: 13px; 
						}
						.img {
							flex-shrink: 0;
							width: 24px;
							height: 24px;
							margin: 13px 21px 0 18px;
							position: relative;
							z-index: 100;
						}
						.box {
							flex: 1;
							min-height: 91px;
							position: relative;
							padding-top: 10px;
							.title {
								font-size: 20px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 26px;
								color: rgb(59, 65, 75);
								margin-bottom: 8px;
								cursor: pointer;
							}
							.content {
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								color: rgb(95, 101, 108);
								margin-bottom: 9px;
								cursor: pointer;
							}
							.type {
								padding: 2px 8px;
								border-radius: 20px;
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
								line-height: 24px;
								position: absolute;
								top: 10px;
								right: 0px;
							}
							.type1 {
								background-color: rgba(255, 149, 77, 0.1);
								color: rgb(255, 149, 77);
							}
							.type2 {
								background-color: rgba(206, 79, 81, 0.1);
								color: rgb(206, 79, 81);
							}
							.type3 {
								background-color: rgba(5, 95, 194, 0.1);
								color: rgb(5, 95, 194);
							}
							.type4 {
								background-color: rgba(103, 194, 58, 0.1);
								color: rgb(103, 194, 58);
							}
							.type-default {
								background-color: rgba(144, 147, 153, 0.1);
								color: rgb(144, 147, 153);
							}
							.domain {
								margin-bottom: 15px;
								display: flex;
								.domain-item {
									padding: 2px 8px;
									border-radius: 4px;
									font-size: 14px;
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 20px;
									margin-right: 8px;
									color: rgb(5, 95, 194);
									background-color: rgba(231, 243, 255, 1);
								}
							}
						}
					}
				}
				.page {
					width: 1221px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: absolute;
					bottom: 20px;
					left: 20px;
					padding-left: 11px;
					.count {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
					}
					:deep(.el-pagination) {
						display: flex;
						align-items: center;
					}
					:deep(.el-pagination.is-background .el-pager li) {
						min-width: 32px;
						height: 32px;
						line-height: 32px;
						border-radius: 6px;
						margin: 0 6px;
						border: 1px solid rgba(0, 0, 0, 0.15);
						background-color: #fff;
						color: rgb(95, 101, 108);
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
					}
					:deep(.el-pagination.is-background .el-pager li.is-active) {
						background-color: #fff;
						color: rgba(22, 119, 255, 1);
						border-color: rgba(22, 119, 255, 1);
						// box-shadow: 0 0 0 2px rgba(47, 122, 229, 0.15) inset;
					}
					:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
						border: none;
						background-color: transparent;
						color: rgb(95, 101, 108);
						min-width: 16px;
						margin: 0 6px;
					}
					:deep(.el-pagination.is-background .btn-prev),
					:deep(.el-pagination.is-background .btn-next) {
						min-width: 32px;
						height: 32px;
						border-radius: 6px;
						border: 1px solid rgba(0, 0, 0, 0.15);
						background-color: #fff;
						color: rgb(95, 101, 108);
						font-size: 16px;
						font-family: "Microsoft YaHei";
						margin: 0 6px;
					}
					:deep(.el-pagination.is-background .btn-prev.is-disabled),
					:deep(.el-pagination.is-background .btn-next.is-disabled) {
						color: rgba(95, 101, 108, 0.45);
						border-color: rgb(235, 238, 242);
						background-color: #fff;
					}
				}
			}
		}
	}
}
</style>
