<!--   国家科技博弈支撑资源分析   -->
<template>
	<div class="thematic-box">
		<div style="width:100%;text-align:center;">
			<div class="thematic-title" style="display:inline-block;">
				国家科技博弈优劣势分析
			</div>
		</div>
		<div class="divider"></div>
		<div class="chart-content" style="margin-top: 32px;">
			<div class="chart-box">
				<div class="item-header">
					<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
					<div class="item-header-text">技术能力对比</div>
					<div class="item-header-btn">
						查看数据源 >
					</div>
				</div>
				<div class="divider"></div>
				<div style="display: flex;height: 320px;width: calc(100% - 40px) ;margin: 20px;" id="char8">
				</div>
				<div style="width: 100%;">
					<div class="comparison-btn">
						领域综合能力排名位势
					</div>
				</div>
			</div>
			<div class="chart-box">
				<div class="item-header">
					<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-radar.png"></img>
					<div class="item-header-text">产业能力对比</div>
					<div class="item-header-btn">
						查看数据源 >
					</div>

				</div>
				<div class="divider"></div>
				<div style="display: flex;height: 320px;width: calc(100%-40px) ;margin: 20px;" id="char9">
				</div>


			</div>


		</div>
	</div>

</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import router from "@/router/index";
import * as echarts from "echarts";
import DivideHeader from "@/components/DivideHeader.vue";
import Timeline from "../component/Timeline.vue";
import getBarChart from "../js/barChart.js";
import getBarChart3 from "../js/barChart3.js";
import radarChart2 from "../js/radarChart2.js";
import getMultiLineChart2 from "../js/multiLineChart2.js";
//科技人才对比分析
const char4Data = ref({
	name: ["中国", "日本", "欧盟", "韩国", "加拿大", "澳大利亚"],
	value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79]
});

//科研投入对比分析
const char5Data = ref({
	name: ["中国", "日本", "欧盟", "韩国", "加拿大", "澳大利亚"],
	value: [83.76, 76.72, 73.89, 72.16, 66.24, 65.47, 63.98, 62.12, 44.38, 24.79]
});

const names = ["中国", "日本", "欧盟", "韩国", "加拿大", "澳大利亚"];
const data1 = [120, 200, 150, 80, 70, 100];
const data2 = [90, 230, 180, 110, 100, 30];
const data3 = [20, 130, 120, 160, 80, 11];
// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};

const chart8Data = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [
		{
			name: "美国",
			value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172]
		},
		{
			name: "中国",
			value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44]
		},
		{
			name: "日本",
			value: [149, 58, 85, 95, 72, 108, 133, 148, 139, 180, 187, 125]
		},
		{
			name: "欧盟",
			value: [152, 48, 91, 88, 74, 103, 129, 141, 136, 171, 185, 19]
		},
		{
			name: "韩国",
			value: [138, 61, 77, 105, 68, 112, 135, 159, 147, 183, 192, 148]
		},
		{
			name: "人才限制",
			value: [142, 53, 82, 97, 69, 100, 130, 150, 142, 173, 189, 177]
		}
	]
});
onMounted(() => {
	let char8 = getBarChart3(names, data1, data2, data3, false);
	setChart(char8, "char8");

	let char7 = radarChart2();
	setChart(char7, "char7");

	//制裁手段强度变化折线图
	let chart9 = getMultiLineChart2(
		chart8Data.value.title,
		chart8Data.value.data[0].value,
		chart8Data.value.data[1].value,
		chart8Data.value.data[2].value,
		chart8Data.value.data[3].value,
		chart8Data.value.data[4].value,
		chart8Data.value.data[5].value
	);
	setChart(chart9, "char9");
});
</script>

<style lang="scss" scoped>
.thematic-box {
	margin-top: 64px;
	height: 578px;
	margin-bottom: 100px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 1);
	border-radius: var(---, 10px);
	/* 业务系统/模块阴影 */
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	background: linear-gradient(180deg, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0) 100%);

	.divide {
		width: 100%;
		margin: 0 auto;
		margin-top: 52px;
		margin-bottom: 36px;
	}
}

.thematic-title {
	/* Common/导航按钮 */
	width: 284px;
	height: 48px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 4;
	padding: 9px 16px 9px 16px;
	background: rgba(5, 95, 194, 1);
	color: rgba(255, 255, 255, 1);

	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 0px;
	text-align: left;
}

.thematic-content {
	/* 容器 480 */
	width: calc(100% - 40px);

	height: 640px;

	margin: 35px 20px 20px 20px;
	box-sizing: border-box;
	border: 1px solid rgba(234, 236, 238, 1);
	border-radius: var(---, 10px);
	/* 业务系统/模块阴影 */
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	background: rgba(255, 255, 255, 1);

	.timeLine-box {
		height: 100%;
		width: calc(100% - 50px);

		.time-item-box {
			width: 30%;
			height: 165px;
		}
	}

	.item-header-divider {
		/* 矩形 249 */
		width: 100%;
		height: 1px;
		background: rgba(231, 243, 255, 1);
	}

	.thematic-btn-left {
		height: 100%;
		width: 24px;
		padding-top: 130px;
	}

	.thematic-btn-right {
		height: 100%;
		width: 24px;
		padding-top: 130px;
	}

	.thematic-btn-icon {
		height: 48px;
		width: 100%;
		margin-top: calc(50% - 24px);
	}
}

.item-header {
	height: 48px;
	line-height: 48px;
	width: 100%;
	display: flex;

	.item-header-icon {
		width: 20px;
		height: 20px;
		margin: 15px;
	}

	.item-header-text {
		width: calc(100% - 170px);
		font-size: 20px;
		font-weight: 700;
		line-height: 26px;
		background: rgba(255, 255, 255, 0.65);
		color: #055fc2;
		font-family: Microsoft YaHei;
		font-size: 20px;
		line-height: 48px;
		text-align: left;
	}

	.item-header-btn {
		color: rgba(5, 95, 194, 1);
		cursor: pointer;
		margin-right: 27px;
		width: 100px;
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
		text-align: right;
	}
}

.divider {
	width: 100%;
	height: 1px;
	background: rgba(231, 243, 255, 1);
}

.comparison-btn {
	/* 容器 648 */
	width: calc(100% - 70px);
	margin-left: 35px;
	height: 30px;
	/* 自动布局 */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10;
	padding: 0px 24px 0px 24px;
	border-radius: 15px;
	background: rgba(231, 243, 255, 1);

	color: rgba(5, 95, 194, 1);

	font-size: 16px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: center;
}

.chart-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
	height: 452px;
	padding: 0 20px;
}

.chart-box {
	height: 452px;
	box-sizing: border-box;
	border: 1px solid rgba(234, 236, 238, 1);
	border-radius: var(---, 10px);
	background: rgba(255, 255, 255, 1);
}

.radar2Data-line {
	display: flex;
	width: 100%;
	height: 30px;
	margin-top: 18px;
	color: rgba(95, 101, 108, 1);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	align-items: center;
	/* 垂直居中 */
}

.radar2Data-circle {
	/* 椭圆 79 */
	width: 12px;
	height: 12px;
	border-radius: 50%;
}
</style>
