<!--  国家科技战略博弈手段分析  -->
<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="thematic-content">
			<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>
			<div class="item-header-divider"></div>
			<div style="display: flex;height: calc(100% - 60px);">
				<Timeline :data="course" text-key="title" id-key="seq" />
			</div>
		</div>
		<div class="chart-content">
			<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: 400px;width: 100%;" id="char1">
				</div>
			</div>
			<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: 350px;width: calc(100% - 40px) ;margin: 20px;" id="char2">
				</div>
			</div>
			<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: 450px;width: calc(100% - 40px) ;margin: 20px;" id="char3">
				</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 getMultiLineChart1 from "../js/multiLineChart1.js";
import radarChart1 from '../js/radarChart.js'
import pictorialBarChar from '../js/pictorialBarChar.js'

//科技博弈历程
const course = ref([
	{
		time: "2025-05-23",
		title: "日本加入对华设备管制联盟",
		content: "日本经济产业省正式宣布，将23种高性能半导体制造设备纳入出口管制范围，于7月23...",
		unit: "1"
	},
	{
		time: "2025-05-23",
		title: "中国发起关键原材料反制",
		content: "中国商务部、海关总署宣布为维护国家安全和利益，自8月1日起对镓、锗相关物项实施...",
		unit: "0"
	},
	{
		time: "2025-08-19",
		title: "中国突破7nm芯片制造",
		content: "华为开售Mate 60 Pro手机。其搭载的麒麟9000s芯片使用DUV光刻技术制造。",
		unit: "0"
	},
	{
		time: "2025-08-20",
		title: "中国加速成熟制程产能扩张引发欧美担忧",
		content: "中国在成熟制程半导体(28nm及以上)的产能正急剧扩张。此举引发美国和欧洲联盟的...",
		unit: "0"
	},
	{
		time: "2025-08-17",
		title: "美国进一步收紧对华AI芯片出口限制",
		content: "美国商务部工业和安全局(BIS)宣布更新“先进计算芯片规则”，大幅收紧对向中...",
		unit: "2"
	},
	{
		time: "2025-12-21",
		title: "美国调查中国传统芯片产能",
		content: "美国商务部宣布，将启动一项针对美国关键行业对中国制造的成熟制程依赖程度的调查...",
		unit: "2"
	}
]);


const chart1Data = ref({
	title: [
		"2024-09",
		"2024-10",
		"2024-11",
		"2024-12",
		"2025-01",
		"2025-02",
		"2025-03",
		"2025-04",
		"2025-05",
		"2025-06",
		"2025-07",
		"2025-08"
	],
	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, 175]
		},
		{
			name: "合作限制",
			value: [152, 48, 91, 88, 74, 103, 129, 141, 136, 171, 185, 169]
		},
		{
			name: "市场准入",
			value: [138, 61, 77, 105, 68, 112, 135, 159, 147, 183, 192, 178]
		},
		{
			name: "人才限制",
			value: [142, 53, 82, 97, 69, 100, 130, 150, 142, 173, 189, 177]
		},
	]
});


const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May']
const data1 = [120, 200, 150, 80, 70]
const data2 = [90, 230, 180, 110, 100]

// 绘制echarts图表
const setChart = (option, chartId) => {
	let chartDom = document.getElementById(chartId);
	chartDom.removeAttribute("_echarts_instance_");
	let chart = echarts.init(chartDom);
	chart.setOption(option);
	return chart;
};



onMounted(() => {
	course.value.sort((a, b) => new Date(a.time) - new Date(b.time));


	//制裁手段强度变化折线图
	let chart1 = getMultiLineChart1(chart1Data.value.title, chart1Data.value.data[0].value, chart1Data.value.data[1].value, chart1Data.value.data[2].value, chart1Data.value.data[3].value, chart1Data.value.data[4].value, chart1Data.value.data[5].value);
	setChart(chart1, "char1");

	let char2 = radarChart1()
	setChart(char2, "char2");

	let char3 = pictorialBarChar(names, data1, data2, false);
	setChart(char3, "char3");
	// pictorialBarChar
});
</script>

<style lang="scss" scoped>
.thematic-box {
	margin-top: 36px;
	height: 1233px;
	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(180.00deg, 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: 92px;
	}

}

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

.chart-content {
	display: grid;
	grid-template-columns: 1fr 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);
}
</style>
