<!-- SourceLibrary.vue -->
<template>
	<div class="source-library-container">
		<div class="source-library-grid">
			<div
				v-for="(item, index) in PersonResource"
				:key="index"
				class="source-library-card"
				@click="handleClcikToCharacter(item.id)"
			>
				<div class="source-library-avatar-wrapper">
					<img :src="item.avatar" alt="" class="source-library-avatar" />
				</div>
				<div class="source-library-text-content">
					<div style="width: 240px; height: 120px; display: flex; flex-direction: column">
						<h3 class="source-library-name">{{ item.name }}</h3>
						<p class="source-library-title">{{ item.title }}</p>
						<div class="taglist">
							<p
								class="source-library-tag"
								v-for="(value, index) in item.tag"
								:key="index"
								:class="{
									tag1: value.typeId === '001',
									tag2: value.typeId === '002',
									tag3: value.typeId === '003',
									tag4: value.typeId === '004',
									tag5: value.typeId === '005',
									tag6: value.typeId === '006'
								}"
							>
								{{ value.typeName }}
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="page">
			<div class="count">{{ `共 ${total} 项` }}</div>
			<el-pagination
				@current-change="handleCurrentChange"
				:page-size="pageSize"
				:current-page="currentPage"
				background
				layout="prev, pager, next"
				:total="total"
			/>
		</div>
	</div>
</template>

<script setup>
// 导入数据（建议使用更具语义的变量名）
import sourceLibraryData from "../json/source.json";
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";

import { getPersonResource, getPersonSummaryInfo } from "@/api/technologyFigures/technologyFigures";

const props = defineProps({
	typeId: {
		type: String,
		default: "000"
	}
});

watch(
	() => props.typeId,
	val => {
		handlegetPersonResourceFn();
	}
);

const router = useRouter();

const total = ref(0);
const pageSize = ref(16);
const loading = ref(false);
const abortController = ref(null);
const currentPage = ref(1);
const PersonResource = ref([]);
// 获取人物资源库
const handlegetPersonResourceFn = async () => {
	// 取消上一次未完成的请求
	if (abortController.value) {
		abortController.value.abort();
	}
	// 创建新的 AbortController
	abortController.value = new AbortController();

	loading.value = true;
	const params = {
		currentPage: currentPage.value - 1, // Standard Spring Boot page index is 0-based
		pageSize: pageSize.value
	};
	if (props.typeId !== "000") {
		params.personTypeId = props.typeId;
	}
	try {
		const res = await getPersonResource(params, abortController.value.signal);
		console.log("人物资源库", res);
		if (res.code === 200) {
			if (res.data && res.data.content) {
				PersonResource.value = res.data.content.map(item => ({
					id: item.personId,
					name: item.personName,
					title: item.positionTitle,
					tag: item.personTypeList,
					avatar: item.personImage || DefaultIcon1
				}));
				total.value = res.data.totalElements;
			} else {
				PersonResource.value = [];
				total.value = 0;
			}
		} else {
			PersonResource.value = [];
			total.value = 0;
		}
		loading.value = false;
	} catch (error) {
		if (error.name !== "AbortError") {
			console.error(error);
			loading.value = false;
		}
	}
};

// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
	handlegetPersonResourceFn();
};

// 跳转人物主页
const handleClcikToCharacter = async id => {
	const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));

	let type = 0;
	let personTypeName = "";

	const params = {
		personId: id
	};
	try {
		const res = await getPersonSummaryInfo(params);
		console.log("人物全局信息", res);
		if (res.code === 200 && res.data) {
			const arr = personTypeList.filter(item => {
				return item.typeId === res.data.personType;
			});
			console.log("arr", arr);

			if (arr && arr.length > 0) {
				personTypeName = arr[0].typeName;
				console.log("personTypeName", personTypeName);

				if (personTypeName === "科技企业领袖") {
					type = 1;
				} else if (personTypeName === "国会议员") {
					type = 2;
				} else if (personTypeName === "智库研究人员") {
					type = 3;
				} else {
					personTypeName = "";
					ElMessage.warning("找不到当前人员的类型值！");
					return;
				}
				const route = router.resolve({
					path: "/characterPage",
					query: {
						type: type, // type=1为科技企业领袖，2为国会议员，3为智库研究人员
						personId: id
					}
				});
				window.open(route.href, "_blank");
			} else {
				personTypeName = "";
				ElMessage.warning("找不到当前人员的类型值！");
				return;
			}
		} else {
			ElMessage.warning("找不到当前人员的类型值！");
			return;
		}
	} catch (error) {}
};

onMounted(async () => {
	handlegetPersonResourceFn();
});

const handlePageChange = p => {
	currentPage.value = p;
};
</script>

<style lang="scss" scoped>
.source-library-container {
	width: 1530px;
	margin: 0;
}

.source-library-grid {
	width: 1600px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px 16px;
}

.source-library-card {
	width: 388px;
	height: 160px;
	box-sizing: border-box;
	display: flex;
	border: 1px solid rgba(234, 236, 238, 1);
	border-radius: var(---10, 10px);
	padding: 20px 18px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	background: rgba(255, 255, 255, 1);
	cursor: pointer;
}

.source-library-card:hover {
	transform: translateY(-2px);
}

.source-library-avatar-wrapper {
	flex-shrink: 0;
	margin-right: 18px;
}

.person-tags {
	display: flex;
	margin-top: -20px;
	width: 42px;
	padding-left: 28px;
	text-align: center;
}

.person-tag-bg {
	/* 椭圆 6 */
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
}

.tag-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.source-library-avatar {
	/* 椭圆 142 */
	width: 88px;
	height: 88px;
	border-radius: 50%;
}

.source-library-text-content {
	width: 656px;
	flex: 1;
}

.source-library-name {
	color: rgba(59, 65, 75, 1);
	margin: 0;
	font-family: Microsoft YaHei;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 0px;
	text-align: left;
}

.source-library-title {
	width: 240px;
	height: 48px;
	color: rgba(59, 65, 75, 1);
	margin: 11px 0 0px 0;
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
}

.taglist {
	display: flex;
	gap: 10px;
	margin-top: auto;
	margin-bottom: 0px;
}

.source-library-tag {
	/* width: 72px; */
	height: 22px;
	/* 自动布局 */
	display: inline-block;
	/* 关键：把块级盒子变成行内块 */

	align-items: center;

	padding: 1px 8px 1px 8px;
	box-sizing: border-box;
	border-radius: 4px;
	margin: 0;
	font-family: Microsoft YaHei;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: left;
}

.tag1 {
	border: 1px solid rgba(217, 247, 190, 1);
	background: rgba(246, 255, 237, 1);
	color: rgba(82, 196, 26, 1);
}
.tag2 {
	border: 1px solid rgba(186, 224, 255, 1);
	background: rgba(230, 244, 255, 1);
	color: rgba(22, 119, 255, 1);
}
.tag3 {
	border: 1px solid rgba(135, 232, 222, 1);
	background: rgba(230, 255, 251, 1);
	color: rgba(19, 168, 168, 1);
}
.tag4 {
	border: 1px solid rgba(211, 173, 247, 1);
	background: rgba(249, 240, 255, 1);
	color: rgba(114, 46, 209, 1);
}
.tag5 {
	border: 1px solid rgba(255, 229, 143, 1);
	background: rgba(255, 251, 230, 1);
	color: rgba(250, 173, 20, 1);
}
.tag6 {
	border: 1px solid rgba(255, 163, 158, 1);
	background: rgba(255, 241, 240, 1);
	color: rgba(245, 34, 45, 1);
}

.page {
	/* width: 1221px; */
	width: 1600px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 36px 0 0 0;
	padding-left: 11px;
	.count {
		color: rgba(59, 65, 75, 1);
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: left;
	}
}

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

: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>