<!--科研实力-->
<template>
	<div class="detail-wrap">
		<div class="row">
			<div class="statisticsItem 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="statisticsChart">
					<Echarts :option="barOption(patentList)" height="100%"></Echarts>
				</div>
				<div class="statisticsAI">
					<div class="AIbox">
						<img src="./assets/images/icon-ai.png" />
						<div class="AItext">哈佛大学近十年专利数量呈现稳定增长趋势，尤其在生物技术和人工智能领域表现突出，2025年达到历史新高。</div>
						<img src="./assets/images/arrow.png" />
					</div>
				</div>
			</div>
			<div class="statisticsItem 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="statisticsChart">
					<Echarts :option="lineChart(paperList)" height="100%"></Echarts>
				</div>
				<div class="statisticsAI">
					<div class="AIbox">
						<img src="./assets/images/icon-ai.png" />
						<div class="AItext">哈佛大学近十年论文发表数量持续增长，高质量论文占比显著提升，特别是在医学和工程领域。</div>
						<img src="./assets/images/arrow.png" />
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="statisticsItem 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="statisticsChart">
					<Echarts :option="raderOption1" height="100%"></Echarts>
				</div>
				<div class="statisticsAI">
					<div class="AIbox">
						<img src="./assets/images/icon-ai.png" />
						<div class="AItext">哈佛大学在生物科技和人工智能领域实力最为突出，同时在量子科技和能源领域也有显著优势，体现了其跨学科研究能力。</div>
						<img src="./assets/images/arrow.png" />
					</div>
				</div>
			</div>
			<div class="statisticsItem 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="statisticsChart">
					<Echarts :option="lineChart1(fundGrowth)" height="100%"></Echarts>
				</div>
				<div class="statisticsAI">
					<div class="AIbox">
						<img src="./assets/images/icon-ai.png" />
						<div class="AItext">哈佛大学经费近十年保持稳定增长，研究经费占比逐年提高，2023年总经费突破50亿美元。</div>
						<img src="./assets/images/arrow.png" />
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="statisticsItem 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="statisticsChart">
					<Echarts :option="pieOption1(fundFromList)" height="100%"></Echarts>
				</div>
				<div class="statisticsAI">
					<div class="AIbox">
						<img src="./assets/images/icon-ai.png" />
						<div class="AItext">哈佛大学经费主要来源于捐赠基金、政府拨款和企业合作项目，捐赠基金占比最大，体现了其强大的校友支持。</div>
						<img src="./assets/images/arrow.png" />
					</div>
				</div>
			</div>
			<div class="statisticsItem 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 style="color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: right;">（亿美元）</div>
				<div class="statisticsChart" style="height: 298px; ">
					<Echarts :option="horizontalBaroption(fundToList)" height="100%"></Echarts>
				</div>
				<div class="statisticsAI">
					<div class="AIbox">
						<img src="./assets/images/icon-ai.png" />
						<div class="AItext">医学院和工程学院获得的经费分配最多，体现了学校对医学和工程学科的重点投入，这两个学院也是科研成果最丰富的学院。</div>
						<img src="./assets/images/arrow.png" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import Echarts from "@/components/Chart/index.vue";
import { barOption, lineChart, raderOption1, lineChart1, pieOption1, horizontalBaroption } from "../../utils/charts.js";
import {
	getPatentList,
	getPaperList, getFundGrowth, getFundFromList, getFundToList
} from "@/api/innovationSubject/overview.js";
import { useRouter } from "vue-router";
const router = useRouter();
//专利数量统计
const patentList = ref([])
const handleGetPatentList = async () => {
	try {
		let params = {
			id: router.currentRoute._value.params.id
		}
		const res = await getPatentList(params);
		console.log("专利数量统计", res);
		if (res.code === 200 && res.data) {
			patentList.value = res.data
		}
	} catch (error) {
		console.error("获取专利数量统计error", error);
	}
};
//论文数量统计
const paperList = ref([])
const handleGetPaperList = async () => {
	try {
		let params = {
			id: router.currentRoute._value.params.id
		}
		const res = await getPaperList(params);
		console.log("论文数量统计", res);
		if (res.code === 200 && res.data) {
			paperList.value = res.data
		}
	} catch (error) {
		console.error("获取论文数量统计error", error);
	}
};

//经费增长情况
const fundGrowth = ref([])
const handleGetFundGrowth = async () => {
	try {
		let params = {
			id: router.currentRoute._value.params.id
		}
		const res = await getFundGrowth(params);
		console.log("经费增长情况", res);
		if (res.code === 200 && res.data) {
			fundGrowth.value = res.data
		}
	} catch (error) {
		console.error("获取经费增长情况error", error);
	}
};

//经费来源
const fundFromList = ref([])
const handleGetFundFromList = async () => {
	try {
		let params = {
			id: router.currentRoute._value.params.id
		}
		const res = await getFundFromList(params);
		console.log("经费来源", res);
		if (res.code === 200 && res.data) {
			fundFromList.value = res.data
		}
	} catch (error) {
		console.error("获取经费来源error", error);
	}
};

//学院经费分配排序 
const fundToList = ref([])
const handlegGetFundToList = async () => {
	try {
		let params = {
			id: router.currentRoute._value.params.id
		}
		const res = await getFundToList(params);
		console.log("学院经费分配排序", res);
		if (res.code === 200 && res.data) {
			fundToList.value = res.data
		}
	} catch (error) {
		console.error("获取学院经费分配排序error", error);
	}
};

onMounted(async () => {
	handleGetPatentList()
	handleGetPaperList()
	handleGetFundGrowth()
	handleGetFundFromList()
	handlegGetFundToList()
});

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

	.row {
		display: flex;
		width: 1600px;
		height: 500px;
		gap: 16px;

		.statisticsItem {
			width: 792px;
			height: 500px;

			.statisticsChart {
				width: 736px;
				height: 321px;
				margin: 20px auto;
			}

			.statisticsAI {
				margin: 0 auto;
				width: 760px;
				height: 64px;
				/* 自动布局 */
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				gap: 10;
				padding: 6px 12px 6px 12px;
				box-sizing: border-box;
				border: 1px solid rgba(231, 243, 255, 1);
				border-radius: 4px;
				background: rgba(246, 250, 255, 1);

				.AIbox {

					width: 736px;
					height: 52px;
					/* 自动布局 */
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					gap: 13px;
					padding: 2px 0px 2px 0px;

					.AItext {
						width: 667px;
						height: 48px;
						display: flex;
						flex-direction: row;
						align-items: center;
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}

				}
			}
		}

	}

}
</style>