<template>
	<div class="reslib-page">
		<div class="nav">
			<div v-for="item in navList" :key="item.orgId" class="nav-item" :class="{ active: item.orgId === activeItem }"
				@click="activeItem = item.orgId, handleGetProjectListNew()">
				{{ item.orgName }}
			</div>
		</div>
		<div class="select-box">
			<div class="paixu-btn" @click="handleSwithSort()">
				<div class="icon1">
					<img v-if="sort" src="@/assets/icons/shengxu1.png" alt="" />
					<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
				</div>
				<div class="text">{{ "发布时间" }}</div>
				<div class="icon2">
					<img v-if="sort" src="@/assets/icons/shengxu2.png" alt="" />
					<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
				</div>
			</div>
		</div>
		<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, i) in dataList" :key="item.id" class="left-item">
						<input type="checkbox" checked />{{ item.name }}
					</div>
				</div> -->
				<div class="left-title cl1">涉及领域</div>
				<div class="left-content">
					<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="all-checkbox"
						@change="handleCheckAllChange">
						全部领域
					</el-checkbox>
					<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList" :label="research.id"
						@change="handleCheckedAreaChange()" class="filter-checkbox">
						{{ research.name }}
					</el-checkbox>
					<!-- <div v-for="(item, i) in areaList" :key="item.id" class="left-item">
						<input type="checkbox" :checked="i === 0" />{{ item.name }}
					</div> -->
				</div>
				<div class="left-title cl1">发布时间</div>
				<div class="left-content">
					<el-checkbox v-model="checkAllTime" class="all-checkbox" :indeterminate="isIndeterminateTime"
						@change="handleCheckAllChangeTime">
						全部时间
					</el-checkbox>
					<el-checkbox-group v-model="selectedPubTimeList">
						<el-checkbox v-for="time in pubTimeList" :key="time.id" :label="time.id" class="filter-checkbox"
							@change="handleCheckedAreaChangeTime()">
							{{ time.name }}
						</el-checkbox>
					</el-checkbox-group>
				</div>
			</div>
			<div class="right">
				<div class="right-title">
					<img src="./assets/icon01.png" alt="" />
					<div>资助项目</div>
				</div>
				<div class="right-main">
					<div v-for="(item, i) in mainList" :key="item.id" class="right-item">
						<img :src="item.logoUrl" alt="" />
						<div class="right-item-title">{{ item.projectName }}</div>
						<div class="right-item-content">{{ item.abstractContent }}</div>
						<div class="right-item-pie">
							<div v-for="(pie, i) in item.areaList" :key="i" class="right-item-pie-item" :class="{
								cl1: pie === '新材料',
								cl2: pie === '人工智能',
								cl3: pie === '量子科技',
								cl4: pie === '能源',
								cl5: pie === '生物科技',
								cl6: pie === '航空航天'
							}">
								{{ pie }}
							</div>
						</div>
						<div class="right-item-time">{{ item.publicationDate }}</div>
						<div class="right-item-money"
							:style="{ color: item.amount <= 1000 ? 'rgba(232, 189, 11, 1)' : item.amount <= 10000 ? 'rgba(255, 149, 77, 1)' : 'rgba(206, 79, 81, 1)' }">
							{{ '$' + item.amount + '万' }}</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 } from "vue";
import {
	getProjectListNew, geFundSourceOrg, getAreaType
} from "@/api/scientificFunding/overview";


const navList = ref([]);
const activeItem = ref("");

const areaList = ref([
	{
		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: "海洋"
	}
]);


// 来源机构列表
const handleGeFundSourceOrg = async () => {
	try {
		const res = await geFundSourceOrg();
		console.log("来源机构列表", res);
		if (res.code === 200 && res.data) {
			navList.value = res.data
			activeItem.value = res.data[0].orgId
		}
	} catch (error) {
		console.error("获取来源机构列表error", error);
	}
};

const checkAll = ref(false);
const isIndeterminate = ref(true);
const selectedAreaList = ref([]);

const handleCheckAllChange = val => {
	// console.log(val, "handleCheckAllChange");
	if (val) {
		isIndeterminate.value = false;
		selectedAreaList.value.length !== areaList.value.length
			? (selectedAreaList.value = areaList.value.map(obj => obj.id))
			: "";
	} else {
		selectedAreaList.value = [];
	}
	// selectedAreaList.value = val ? areaList : []
	// isIndeterminate.value = false
	handleGetProjectListNew();
};
const handleCheckedAreaChange = () => {
	// console.log(selectedAreaList.value, "handleCheckedAreaChange");
	console.log(selectedAreaList.value, "当前选中的领域");
	selectedAreaList.value.length !== areaList.value.length
		? (isIndeterminate.value = true)
		: ((checkAll.value = true), (isIndeterminate.value = false));
	handleGetProjectListNew();
};


const pubTimeList = ref([
	{
		id: 2025,
		name: "2025"
	},
	{
		id: 2024,
		name: "2024"
	},
	{
		id: 2023,
		name: "2023"
	},
	{
		id: 2022,
		name: "2022"
	},
	{
		id: 2021,
		name: "2021"
	}
	// {
	// 	id: "更早时间",
	// 	name: "更早时间"
	// }
]);
const selectedPubTimeList = ref([""]);
const checkAllTime = ref(false);
const isIndeterminateTime = ref(true);
const sort = ref(false);
const handleSwithSort = () => {
	sort.value = !sort.value;
	handleGetProjectListNew();
};

const handleCheckAllChangeTime = val => {
	// console.log(val, "handleCheckAllChange");
	if (val) {
		isIndeterminateTime.value = false;
		selectedPubTimeList.value.length !== pubTimeList.value.length
			? (selectedPubTimeList.value = pubTimeList.value.map(obj => obj.id))
			: "";
	} else {
		selectedPubTimeList.value = [];
	}
	// selectedAreaList.value = val ? areaList : []
	// isIndeterminate.value = false
	handleGetProjectListNew();
};
const handleCheckedAreaChangeTime = () => {
	// console.log(selectedAreaList.value, "handleCheckedAreaChange");
	console.log(selectedPubTimeList.value, "当前选中的时间");
	selectedPubTimeList.value.length !== pubTimeList.value.length
		? (isIndeterminateTime.value = true)
		: ((checkAllTime.value = true), (isIndeterminateTime.value = false));
	handleGetProjectListNew();
};

// 获取行业领域列表
const handleGetAreaType = async () => {
	try {
		const res = await getAreaType();
		console.log("获取行业领域列表", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data
		}
	} catch (error) {
		console.error("获取行业领域列表error", error);
	}
};

const mainList = ref([]);
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const handlePageChange = p => {
	currentPage.value = p;
	handleGetProjectListNew()
};
// 资助体系v2.0:资助项目列表分页
const handleGetProjectListNew = async () => {
	try {
		let params = {
			arealist: selectedAreaList.value,
			currentPage: currentPage.value,
			pageSize: 10,
			yearlist: selectedPubTimeList.value.map(item => item.toString().trim()).filter(item => item !== ""),
			funSort: sort.value ? 'desc' : 'asc',
			orgId: activeItem.value
		}
		const res = await getProjectListNew(params);
		console.log("资助项目列表分页", res);
		if (res.code === 200 && res.data) {
			mainList.value = res.data.content
			total.value = res.data.totalElements
		}
	} catch (error) {
		console.error("获取资助项目列表分页error", error);
	}
};

onMounted(async () => {
	await handleGeFundSourceOrg()
	await handleGetAreaType()
	handleGetProjectListNew()
});

</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}

.reslib-page {
	width: 1600px;
	height: 1565px;
	position: relative;

	.select-box {

		width: 128px;
		position: absolute;
		top: 7px;
		right: 0px;

		.paixu-btn {
			display: flex;
			width: 120px;
			height: 32px;
			box-sizing: border-box;
			border: 1px solid rgba(230, 231, 232, 1);
			border-radius: 4px;
			background: rgba(255, 255, 255, 1);

			&:hover {
				background: var(--color-bg-hover);
			}

			cursor: pointer;

			.icon1 {
				width: 11px;
				height: 14px;
				margin-top: 10px;
				margin-left: 9px;

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

			.text {
				height: 19px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 18px;
				letter-spacing: 0px;
				text-align: left;
				margin-top: 7px;
				margin-left: 9px;
			}

			.icon2 {
				width: 10px;
				height: 5px;
				margin-top: 5px;
				margin-left: 13px;

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

	.nav {
		width: calc(100% - 100px);
		height: 42px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 34px;

		.nav-item {
			width: 100%;
			text-align: center;
			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: 1489px;
		display: flex;

		.left {
			width: 300px;
			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: 253px;
				// height: 132px;
				margin-left: 25px;
				margin-top: 13px;
				display: flex;
				flex-wrap: wrap;
				/* 允许内容换行 */
				justify-content: space-between;

				/* 两端对齐 */
				.left-item {
					white-space: nowrap;
					/* 保持在一行内 */
					overflow: hidden;
					/* 隐藏超出部分 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
					width: calc(50% - 8px);
					/* 每个选项占一半宽度，减去间距 */
					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-top-right-radius: 3px;
						border-bottom-right-radius: 3px;
						margin-right: 17px;
					}

					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: 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: 1441px;
				padding: 19px 34px 20px 29px;
				position: relative;

				.right-item {
					width: 1221px;
					height: 124px;
					border-bottom: 1px solid rgb(234, 236, 238);
					margin-bottom: 8px;
					position: relative;

					img {
						width: 32px;
						height: 32px;
						position: absolute;
						top: 9px;
						left: 7px;
					}

					.right-item-title {
						position: absolute;
						top: 10px;
						left: 56px;
						font-size: 20px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 26px;
						color: rgb(59, 65, 75);
					}

					.right-item-content {
						white-space: nowrap;
						/* 保持在一行内 */
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						width: 90%;
						/* 设置一个固定的宽度或百分比 */
						position: absolute;
						top: 44px;
						left: 56px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);
					}

					.right-item-pie {
						position: absolute;
						top: 76px;
						left: 56px;
						display: flex;

						.right-item-pie-item {
							padding: 2px 8px;
							border-radius: 4px;
							margin-right: 8px;
							border: 1px solid;
							font-size: 14px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							line-height: 20px;
						}

						.cl1 {
							background-color: rgba(230, 255, 251, 1);
							border-color: rgba(135, 232, 222, 1);
							color: rgba(19, 168, 168, 1);
						}

						.cl2 {
							background-color: rgba(255, 241, 240, 1);
							border-color: rgba(255, 163, 158, 1);
							color: rgba(245, 34, 45, 1);
						}

						.cl3 {
							background-color: rgba(249, 240, 255, 1);
							border-color: rgba(211, 173, 247, 1);
							color: rgba(114, 46, 209, 1);
						}

						.cl4 {
							background-color: rgba(230, 255, 251, 1);
							border-color: rgba(135, 232, 222, 1);
							color: rgba(19, 168, 168, 1);
						}

						.cl5 {
							background-color: rgba(230, 244, 255, 1);
							border-color: rgba(145, 202, 255, 1);
							color: rgba(22, 119, 255, 1);
						}

						.cl6 {
							background-color: rgba(240, 245, 255, 1);
							border-color: rgba(173, 198, 255, 1);
							color: rgba(47, 84, 235, 1);
						}
					}

					.right-item-time {
						position: absolute;
						top: 13px;
						right: 0;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);
					}

					.right-item-money {
						position: absolute;
						top: 76px;
						right: 0;
						font-size: 18px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 24px;
					}
				}

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