<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="sortModel" placeholder="发布时间" class="select" popper-class="coop-select-dropdown"
			:teleported="true" placement="bottom-start"
			:popper-options="sortPopperOptions" @change="handleSortChange">
			<template #prefix>
				<img v-if="sortModel !== true" src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image down.png"
					class="select-prefix-img" alt="" @click.stop="toggleSortPrefix" />
				<img v-else src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image up.png" class="select-prefix-img"
					alt="" @click.stop="toggleSortPrefix" />
			</template>
			<el-option :key="true" label="正序" :value="true" />
			<el-option :key="false" label="倒序" :value="false" />
		</el-select>
		<div class="main">
			<div class="left">
				<div class="left-ti1"></div>


				<div class="left-title ">科技领域</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 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>
			<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">{{ formatDateCn(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">
									<AreaTag v-for="(domain, i) in item.domain" :key="i" " :tagName="domain">
									</AreaTag>
								</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, computed } from "vue";
import { useRouter } from "vue-router";
import { getCoopRestrictionList } from "@/api/coopRestriction/coopRestriction";

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

const formatDateCn = (dateStr) => {
	const s = String(dateStr || "").trim();
	// 兼容 YYYY-MM-DD / YYYY/MM/DD
	const m = s.match(/^(\d{4})[-/](\d{1,2})[-/](\d{1,2})/);
	if (!m) return s;
	const y = m[1];
	const month = String(Number(m[2]) || "");
	const day = String(Number(m[3]) || "");
	return `${y}\n${month}月${day}日`;
};

// 合作限制-获取合作限制列表接口
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;
	}
	// 与智库概览一致：null 作为占位但默认按倒序；true=正序，false=倒序
	params.sortOrder = sort.value === true ? "asc" : "desc";

	try {
		console.log('----params getMainDataList', params)
		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");

/** null：占位「发布时间」且默认倒序；true 正序；false 倒序（显式），与智库概览一致 */
const sort = ref(null);

const sortPopperOptions = {
	modifiers: [
		{ name: "preventOverflow", options: { mainAxis: false, altAxis: false } },
		{ name: "flip", enabled: false }
	]
};

const sortModel = computed({
	get() {
		return sort.value;
	},
	set(v) {
		sort.value = v;
	}
});

const handleSortChange = () => {
	// 改变排序后从第一页开始
	if (currentPage.value === 1) {
		getMainDataList();
	} else {
		currentPage.value = 1;
	}
};

const toggleSortPrefix = () => {
	sort.value = sort.value === true ? false : true;
	// 切换排序后从第一页开始
	if (currentPage.value === 1) {
		getMainDataList();
	} else {
		currentPage.value = 1;
	}
};
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, sort],
	(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;
}

/* 合作限制：下拉项内边距（teleport 到 body，用 :global 生效） */
:global(.coop-select-dropdown .el-select-dropdown__item) {
	padding: 0 20px !important;
}

.reslib-page {
	width: 1600px;

	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;
	}

	.select-prefix-img {
		width: 7px;
		height: 14px;
		margin-right: 6px;
		cursor: pointer;
	}

	/* 下拉项内边距：与智库模块 el-select 视觉一致 */
	:deep(.el-select-dropdown__item) {
		padding: 0 20px;
	}

	.main {
		width: 1600px;

		display: flex;
		margin-bottom: 35px;

		.left {
			width: 360px;
			height: 432px;
			padding-bottom: 24px;
			box-sizing: border-box;
			border: 1px solid rgba(234, 236, 238, 1);
			margin-right: 16px;
			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 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: 20px;
				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: 320px;
				left: 0px;
			}

			.left-title {
				margin-left: 25px;
				margin-top: 16px;
				color: var(--color-main-active);
				font-size: 16px;
				font-weight: 700;
				font-family: "Source Han Sans CN";
				line-height: 24px;
				letter-spacing: 1px;
				height: 24px;
			}

			.left-content {
				margin-left: 24px;
				margin-top: 12px;
				display: grid;
				grid-template-columns: repeat(2, 160px);
				gap: 8px 4px;

				.left-item {
					width: 160px;
					height: 24px;
					margin: 0;
					display: flex;
					align-items: center;
					font-size: 16px;
					font-weight: 400;
					font-family: "Source Han Sans CN";
					line-height: 24px;
					color: rgb(95, 101, 108);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					input[type="checkbox"] {
						-webkit-appearance: none;
						appearance: none;
						width: 14px;
						height: 14px;
						margin-right: 8px;
						flex: 0 0 auto;
						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);
					}
				}
			}


		}

		.right {
			width: 1224px;

			border-radius: 10px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);

			.right-title {
				width: 1224px;
				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: 1224px;

				padding: 12px 0px 80px 0px;
				position: relative;


				.main-content {
					width: 1224px;
					padding-left: 28px;
					border-bottom: 1px solid rgb(235, 238, 242);


					.main-item {
						width: 1167px;



						position: relative;
						display: flex;

						&::after {
							content: "";
							position: absolute;
							top: 37px;
							bottom: -37px;
							left: 108px;
							width: 2px;
							background-color: rgb(230, 231, 232);
							z-index: 1;
						}

						&:last-child::after {
							content: "";
							position: absolute;
							top: 37px;
							bottom: -37px;
							left: 108px;
							width: 2px;
							background-color: rgb(230, 231, 232);
							z-index: 1;
							height: calc(100% - 37px);
						}

						.date {
							flex-shrink: 0;
							width: 80px;
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							line-height: 24px;
							color: rgb(5, 95, 194);
							text-align: right;
							margin-top: 6px;
							white-space: pre-line;
						}

						.img {
							flex-shrink: 0;
							width: 24px;
							height: 24px;
							margin: 14px 16px 0 16px;
							position: relative;
							z-index: 100;
						}

						.box {
							flex: 1;
							min-height: 91px;
							position: relative;
							padding-top: 14px;

							.title {
								font-size: 20px;
								font-weight: 700;
								font-family: "Microsoft YaHei";
								line-height: 26px;
								color: rgb(59, 65, 75);
								margin-bottom: 9px;
								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: 12px;
								display: flex;
								gap: 8px;

								.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: 1159px;
					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>
