<!--合作情况 v2.0-->

<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="lineChart(cooperateNumWithChinaist)" 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="pieOption1(cooperateTypeWithChina)" 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="getColumnChart(cooperateAreaWithChina)" 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(cooperateFundWithChina)" 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" style="width: 1600px;height: 355px;">
				<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" style="width: 1600px;height: 355px;">
					<Timeline :data="cooperateExampleWithChina" text-key="title" id-key="seq" style="  margin-top: 45px;" />
				</div>

			</div>

		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import Echarts from "@/components/Chart/index.vue";
import { barOption, lineChart, getColumnChart, lineChart1, pieOption1, horizontalBaroption } from "./charts.js";
import {
	getCooperateNumWithChina,
	getCooperateTypeWithChina,
	getCooperateAreaWithChina,
	getCooperateFundWithChina,
	getCooperateExampleWithChina,

} from "@/api/innovationSubject/overview.js";
import Timeline from "./Timeline.vue";
import { useRouter } from "vue-router";
const router = useRouter();

//合作情况:与中国合作数量变化
const cooperateNumWithChinaist = ref([])
const handleGetCooperateNumWithChina = async () => {
	try {
		let params = {
			id: router.currentRoute._value.params.id
		}
		const res = await getCooperateNumWithChina(params);
		console.log("与中国合作数量变化", res);
		if (res.code === 200 && res.data) {
			cooperateNumWithChinaist.value = res.data
		}
	} catch (error) {
		console.error("获取与中国合作数量变化error", error);
	}
};

//与中国合作类型变化
const cooperateTypeWithChina = ref([])
const handleetCooperateTypeWithChina = async () => {
	try {
		let params = {
			year: 2022,
			id: router.currentRoute._value.params.id
		}
		const res = await getCooperateTypeWithChina(params);
		console.log("与中国合作类型变化", res);
		if (res.code === 200 && res.data) {
			cooperateTypeWithChina.value = res.data
		}
	} catch (error) {
		console.error("获取与与中国合作类型变化error", error);
	}
};
//合作情况:与中国合作领域变化
const cooperateAreaWithChina = ref([])
const handleetCooperateAreaWithChina = async () => {
	try {
		let params = {
			year: 2022,
			id: router.currentRoute._value.params.id
		}
		const res = await getCooperateAreaWithChina(params);
		console.log("与中国合作领域变化", res);
		if (res.code === 200 && res.data) {
			cooperateAreaWithChina.value = res.data
		}
	} catch (error) {
		console.error("获取与与中国合作领域变化error", error);
	}
};

//合作情况:与中国合作经费变化
const cooperateFundWithChina = ref([])
const handleetCooperateFundWithChina = async () => {
	try {
		let params = {
			year: 2022,
			id: router.currentRoute._value.params.id
		}
		const res = await getCooperateFundWithChina(params);
		console.log("与中国合作经费变化", res);
		if (res.code === 200 && res.data) {
			cooperateFundWithChina.value = res.data
		}
	} catch (error) {
		console.error("获取与中国合作经费变化error", error);
	}
};

//合作情况:与中国合作事例
const cooperateExampleWithChina = ref([])
const handleetCooperateExampleWithChina = async () => {
	try {
		let params = {
			year: 2022,
			id: router.currentRoute._value.params.id
		}
		const res = await getCooperateExampleWithChina(params);
		console.log("与中国合作事例", res);
		if (res.code === 200 && res.data) {
			cooperateExampleWithChina.value = res.data
		}
	} catch (error) {
		console.error("获取与中国合作事例error", error);
	}
};

onMounted(async () => {
	handleGetCooperateNumWithChina()
	handleetCooperateTypeWithChina()
	handleetCooperateAreaWithChina()
	handleetCooperateFundWithChina()
	handleetCooperateExampleWithChina()

});

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