<!--ZM博弈概况-->
<template>
	<div class="content-wrapper">
		<div class="card-box">
			<div class="card-title">
				<img class="icon" src="../../assets/icons/title-icon1.png" />
				<img class="text" src="../../assets/icons/title-text1.png" />
			</div>
			<div style="display: flex;height: 650px;width: 100%;">
				<div style="width: 50%;">
					<div>
						数据来源
					</div>
					<div style="width: 672px;height: 486px;" id="char"></div>
				</div>
				<div style="width: 50%;">
					<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
						<el-table-column prop="name" label="指标名称" sortable width="350" />
						<el-table-column prop="percent" label="中国">
							<template #default="scope">
								<div class="progress-wrapper left" :style="{ '--i': '40px', '--j': '-20px', marginLeft: '20px' }">
									<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="left-progress"
										:show-text="false" />
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="percent" label="美国">
							<template #default="scope">
								<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
									<el-progress :percentage="scope.row.percent[0]" :stroke-width="20" class="right-progress"
										:show-text="false" />

								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<div class="card-box" style="margin-top: 16px;">
			<div class="card-title">
				<img class="icon" src="../../assets/icons/title-icon2.png" />
				<img class="text" src="../../assets/icons/title-text2.png" />
			</div>
			<div style="display: flex;height: 650px;">
				<Timeline :data="course" text-key="title" id-key="seq" />
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue";
import radarChart from './radarChart3.js'
const course = ref([
	{
		"time": "2025-01-15",
		"title": "《国家量子倡议再授权法案》发布",
		"content": "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA的量子研究纳入，旨在加速技术应用与人才发展。",
		"unit": "美国",
		"tag": "科技发展战略"
	},
	{
		"time": "2025-01-21",
		"title": "将美国实体列入'不可靠实体清单'并采取商品进口限制",
		"content": "根据《反外国制裁法》等，将17家美国实体列入清单，禁止其从事与中国有关的进出口与新增投资。",
		"unit": "中国",
		"tag": "反制措施"
	},
	{
		"time": "2025-01-21",
		"title": "《国家创新驱动发展战略纲要》发布",
		"content": "纲领性文件，提出了建设世界科技强国的'三步走'战略目标，并系统部署了构建现代产业技术体系等八大战略任务。",
		"unit": "中国",
		"tag": "科技发展战略"
	},
	{
		"time": "2025-01-21",
		"title": "中国网信办约谈英伟达",
		"content": "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。",
		"unit": "中国",
		"tag": "反制措施"
	},
	{
		"time": "2025-05-09",
		"title": "《2026财年中国防授权法案》发布",
		"content": "年度国防预算法案，其中系统性地嵌入了大量对华竞争条款，首次将对外投资审查法律化，并在供应链、实体清单等方面加强限制。",
		"unit": "美国",
		"tag": "对华打压遏制"
	},
	{
		"time": "2025-07-24",
		"title": "白宫'人工智能(AI)行动计划'",
		"content": "提出放宽监管、简化环境许可可以加快AI基础设施建设，并涉及促进AI出口、要求联邦采购的AI模型具备中立性等内容。",
		"unit": "美国",
		"tag": "科技发展战略"
	},
	{
		"time": "2025-07-24",
		"title": "2026财年《商务、司法、科学及相关支出法案》",
		"content": "法案为商务部工业与安全局(BIS)大幅增加预算，以加强出口管制执法，特别强调审查对华为、中芯国际的出口许可证。",
		"unit": "美国",
		"tag": "对华打压遏制"
	}
]);

const data = ref([
	{
		name: '竞争潜力',
		value: [81.7, 75.4]
	}, {
		name: '研究人员总数',
		value: [81.7, 75.4]
	}, {
		name: '研发经费投入总额',
		value: [81.7, 75.4]
	}, {
		name: '研发经费占GDP的比重',
		value: [81.7, 75.4]
	}, {
		name: '每万人研发经费投入额',
		value: [81.7, 75.4]
	}, {
		name: '每万研究人员经费投入额',
		value: [81.7, 75.4]
	}, {
		name: '每万人研究人员数',
		value: [81.7, 75.4]
	}
])
onMounted(() => {

	const dom = document.getElementById('char');
	const myChart = echarts.init(dom);

	// 2. 传入容器，生成配置
	const option = radarChart(
		[
			"创新资源",
			"知识创造",
			"企业创新",
			"创新绩效",
			"创新环境"
		],
		[
			[4200, 3000, 20000, 35000, 50000, 18000],
			[1000, 42000, 32000, 35000, 50000, 18000]
		]
	);


	myChart.setOption(option);

	// setChart(option, "char7");

});

const tableData = ref([
	{
		id: 1,
		name: '综合创新指数',
		percent: [60, 40],
		children: []
	},
	{
		id: 2,
		name: '创新资源',
		percent: [50, 50],
		children: []
	},
	{
		id: 3,
		name: '研发人力',
		percent: [70, 30],
		children: [
			{
				id: 31,
				name: '每万名就业人员中R&D人员全时当量',
				percent: [65, 35],
				children: []
			},
			{
				id: 32,
				name: '研究人员占R&D人员比例',
				percent: [55, 45],
				children: []
			},
			{
				id: 33,
				name: '科学与工程类毕业生比例',
				percent: [70, 30],
				children: []
			}
		]
	},
	{
		id: 4,
		name: '研发经费',
		percent: [60, 40],
		children: [
			{
				id: 41,
				name: 'R&D经费支出总额(购买力平价)',
				percent: [65, 35],
				children: []
			},
			{
				id: 42,
				name: 'R&D经费支出占GDP比重',
				percent: [55, 45],
				children: []
			},
			{
				id: 43,
				name: '基础研究经费占R&D经费比重',
				percent: [45, 55],
				children: []
			}
		]
	},
	{
		id: 5,
		name: '科研条件',
		percent: [60, 40],
		children: [
			{
				id: 51,
				name: '国家级重大科技基础设施数量',
				percent: [50, 50],
				children: []
			}
		]
	}
]);
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 100%;
	height: 1416px;

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

		.card-title {

			width: 1602px;
			height: 48px;
			display: flex;

			.icon {
				/* 合并 */
				width: 18.67px;
				height: 17.85px;
				margin: 14px 16px;
			}

			.text {
				/* Text */
				width: 177px;
				height: 31px;
				margin: 8px 0px;
			}
		}
	}
}


/* ========== 公共外壳 ========== */
.progress-wrapper {
	position: relative;
	flex: 1;
	height: 10px;
}

/* 文字居中在彩色条内 */
.inner-text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 12px;
	color: #fff;
	font-weight: bold;
	z-index: 2;
}

/* ========== 左侧：右侧斜切 + 左侧圆角 ========== */
/* 左侧文字 */
.left-text {
	font-size: 12px;
	color: #333;
	margin-right: 8px;
	white-space: nowrap;
}

.left-progress {
	transform: scaleX(-1);

}

.left-progress :deep(.el-progress-bar__outer) {
	border-radius: 0;
	clip-path: inset(0 0 0 0);
	background: rgba(231, 243, 255, 1);
	overflow: hidden;
	/* 读行内传进来的变量 */
	height: var(--i) !important;
	margin-left: var(--j) !important
}

.left-progress :deep(.el-progress-bar__inner) {
	border-radius: 0;
	/* 移除圆角 */
	clip-path: inset(0 0 0 0);
	/* 设置为矩形，inset() 函数的四个参数都是0表示不裁剪 */
	background: #055FC2;
	/* 读行内传进来的变量 */
	height: var(--i) !important;
	margin-left: var(--j) !important;
}



/* ========== 右侧：左侧斜切 + 右侧圆角 ========== */
.right-progress :deep(.el-progress-bar__outer) {
	border-radius: 0;
	clip-path: inset(0 0 0 0);
	background: #ffccc7;
	overflow: hidden;
	height: var(--i) !important;
}

.right-progress :deep(.el-progress-bar__inner) {
	border-radius: 0;
	clip-path: inset(0 0 0 0);
	background: #CE4F51;
	height: var(--i) !important;
}

:deep(.el-table .cell) {
	padding: 0;

	color: rgba(59, 65, 75, 1);

	font-family: Microsoft YaHei;
	font-style: Regular;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: left;
}
</style>
