<!--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 style="
							display: flex;
							justify-content: space-between;
							margin-right: 50px;
							line-height: 32px;
							align-items: center;
						">
						<div style="display: flex; margin-left: 50px">
							数据来源:
							<el-select class="select-item" size="default" style="margin-left: 15px; width: 240px; height: 32px"
								v-model="origin" @change="handleGetCompare()">
								<el-option :value="value.id" :label="value.name" v-for="value in originList" />
							</el-select>
						</div>
						<div style="display: flex">
							<div class="china-icon"></div>
							<div class="text">中国</div>
							<div class="usa-icon"></div>
							<div class="text">美国</div>
						</div>
					</div>

					<div style="width: 672px; height: 486px; padding-top: 50px" id="char"></div>
				</div>
				<div style="width: 50%;    height: 620px;overflow: auto;">
					<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="targetCode" border
						:tree-props="{ children: 'children' }" default-expand-all :header-cell-style="{ 'border-right': 'none' }"
						:cell-style="{ 'border-right': 'none' }">
						<!-- 自定义展开图标 -->

						<el-table-column prop="targetName" label="指标名称" width="350" />
						<el-table-column prop="usScore" label="美国">
							<template #default="scope">
								<div style="display: flex;">
									<div class="progress-text">
										{{ scope.row.usScore }}
									</div>
									<div class="progress-wrapper left" :style="{ '--i': '40px', '--j': '-20px', marginLeft: '20px' }">
										<el-progress :percentage="scope.row.chinaScore" :stroke-width="20" class="left-progress"
											:show-text="false" />
									</div>
								</div>

							</template>
						</el-table-column>
						<el-table-column prop="chinaScore" label="中国">
							<template #default="scope">
								<div style="display: flex;">

									<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
										<el-progress :percentage="scope.row.usScore" :stroke-width="20" class="right-progress"
											:show-text="false" />
									</div>
									<div class="progress-text" style="color:rgba(206, 79, 81, 1);">
										{{ scope.row.chinaScore }}
									</div>
								</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 class="btn-box">
			<div v-for="(value, index) in btnList" :key="index" class="btn-item disabled" :style="{
				background: value.background
			}">
				<img :src="value.img" style="width: 22px; height: 19px; margin: 0 22px" />
				{{ value.text }}
				<img :src="`./icon/ZM/btn-icon-arrow.png`"
					style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" />

				<!-- <img src="./assets/images/btn-icon-arrow.png"
					style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" /> -->

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

<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import { ArrowRight, CaretBottom } from '@element-plus/icons-vue'
import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue";

import radarChart from "./radarChart3.js";
import { getCompare, getChartDict, getTechnologyGameAnalysis } from '@/api/zmOverview/risk/index.js'
import icon1 from './icon/btn-icon-0.png'
import icon2 from './icon/btn-icon-1.png'
import icon3 from './icon/btn-icon-2.png'
import icon4 from './icon/btn-icon-3.png'
import icon5 from './icon/btn-icon-4.png'
import icon6 from './icon/btn-icon-5.png'
import icon7 from './icon/btn-icon-6.png'
import icon from './icon/btn-icon-7.png'
import Img1 from "./assets/images/btn-icon-0.png";
import Img2 from "./assets/images/btn-icon-1.png";
import Img3 from "./assets/images/btn-icon-2.png";
import Img4 from "./assets/images/btn-icon-3.png";
import Img5 from "./assets/images/btn-icon-4.png";
import Img6 from "./assets/images/btn-icon-5.png";
import Img7 from "./assets/images/btn-icon-6.png";
import Img8 from "./assets/images/btn-icon-7.png";

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

const originList = ref([]);
const origin = ref("");
//数据来源
const handleGetChartDict = async () => {
	try {
		const res = await getChartDict();
		console.log("数据来源", res);
		if (res.code === 200 && res.data) {
			originList.value = res.data;
			origin.value = res.data[0].id;
		}
	} catch (error) {
		console.error("获取数据来源error", error);
	}
};
//中美科技实力对比
const handleGetCompare = async () => {
	try {
		const res = await getCompare(origin.value);
		console.log("中美科技实力对比", res);
		if (res.code === 200 && res.data) {
			tableData.value = res.data[0].children;
			// tableData.value = [res.data];
			const secondLevelData = res.data[0].children;
			const indicatorNames = secondLevelData.map(item => item.targetName);
			const chinaScores = secondLevelData.map(item => item.chinaScore);
			const usScores = secondLevelData.map(item => item.usScore);
			const dom = document.getElementById("char");
			const myChart = echarts.init(dom);
			const radarOption = {
				indicatorNames: indicatorNames,
				data: [chinaScores, usScores]
			};
			const option = radarChart(radarOption.indicatorNames, radarOption.data);
			myChart.setOption(option);
			console.log(radarOption);
		}
	} catch (error) {
		console.error("获取中美科技实力对比error", error);
	}
};

//中美博弈概览V2:领域打压遏制时间线
const handlegetTechnologyGameAnalysis = async () => {
	try {
		const res = await getTechnologyGameAnalysis();
		console.log("中美科技博弈分析", res);
		if (res.code === 200 && res.data) {
			course.value = res.data;
		}
	} catch (error) {
		console.error("获取中美科技博弈分析error", error);
	}
};
onMounted(async () => {
	await handleGetChartDict();
	await handleGetCompare();
	await handlegetTechnologyGameAnalysis();
	// 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: []
			}
		]
	}
]);

const btnList = ref([
	{
		text: "制裁征候挖掘",
		background: "linear-gradient(180.00deg, rgba(9, 88, 217, 1),rgba(9, 88, 217, 0.5) 100%)",
		img: Img1
	},
	{
		text: "制裁内容快速摘要",
		background: "linear-gradient(180.00deg, rgba(255, 97, 97, 1),rgba(255, 97, 97, 0.5) 100%)",
		img: Img2
	},
	{
		text: "重点领域博弈历程分析",
		background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)",
		img: Img3
	},
	{
		text: "制裁手段关联分析",
		background: "linear-gradient(180.00deg, rgba(48, 193, 195, 1),rgba(48, 193, 195, 0.5) 100%)",
		img: Img4
	},
	{
		text: "政要人物画像",
		background: "linear-gradient(180.00deg, rgba(123, 52, 184, 1),rgba(123, 52, 184, 0.5) 100%)",
		img: Img5
	},
	{
		text: "人物关系挖掘",
		background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)",
		img: Img6
	},
	{
		text: "人物立场分析",
		background: "linear-gradient(180.00deg, rgba(93, 186, 255, 1),rgba(93, 186, 255, 0.5) 100%)",
		img: Img7
	},
	{
		text: "制裁内容比对分析",
		background: "linear-gradient(180.00deg, rgba(93, 186, 255, 1),rgba(93, 186, 255, 0.5) 100%)",
		img: Img8
	}
]);
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1600px;
	height: 1600px;
	margin: 0 auto;

	.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: 100%;
			height: 48px;
			display: flex;

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

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

.progress-text {
	/* No.1 92.5 */
	width: 80px;
	height: 22px;
	color: rgba(5, 95, 194, 1);

	font-family: Source Han Sans CN;
	font-style: Bold;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0px;
	text-align: left;
}

/* ========== 公共外壳 ========== */
.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: 10px !important;
	margin-left: var(--j) !important;
	margin-top: 6px;
}

.left-progress :deep(.el-progress-bar__inner) {
	border-radius: 0;
	/* 移除圆角 */
	clip-path: inset(0 0 0 0);
	/* 设置为矩形，inset() 函数的四个参数都是0表示不裁剪 */
	background: #055fc2;
	/* 读行内传进来的变量 */
	height: 10px !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: 10px !important;
	margin-top: 6px;
}

.right-progress :deep(.el-progress-bar__inner) {
	border-radius: 0;
	clip-path: inset(0 0 0 0);
	background: #ce4f51;
	height: 10px !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;
}

.china-icon {
	/* 椭圆 79 */
	width: 12px;
	height: 12px;
	margin: 5px;
	border-radius: 50%;
	background: rgba(206, 79, 81, 1);
}

.usa-icon {
	width: 12px;
	height: 12px;
	margin: 5px;
	border-radius: 50%;
	background: rgba(5, 95, 194, 1);
}

.text {
	color: rgba(59, 65, 75, 1);

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

.btn-box {
	margin-top: 16px;
	width: 100%;
	height: auto;
	/* 高度自适应内容 */
	display: flex;
	flex-direction: row;
	/* 行方向布局 */
	flex-wrap: wrap;
	/* 允许换行 */
	justify-content: flex-start;
	align-items: stretch;
	/* 使所有按钮高度一致 */
	gap: 16px 16px;
	/* 设置按钮之间的间距 */
	padding: 0;
	/* 移除内边距，防止内容溢出 */
}

.btn-item {
	width: 307px;
	height: 60px;
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	// justify-content: center;
	/* 使按钮内容居中 */
	align-items: center;
	/* 使按钮内容居中 */
	display: flex;
	/* 使用flex布局 */
	color: rgba(255, 255, 255, 1);
	justify-content: flex-start;
	font-family: Microsoft YaHei;
	font-style: Bold;
	font-size: 16px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: center;
}

/* 隐藏原生箭头 */
// :deep(.el-table__expand-icon>.el-icon) {
// 	display: none;
// }

// /* 或者用背景图/伪元素替换 */
// :deep(.el-table__expand-icon>.el-icon::before) {
// 	content: "▶";
// 	color: #409eff;
// }

// :deep(.el-table .el-table__expand-icon--expanded::before) {
// 	content: "▼";
// }
/* 隐藏原生图标 */
:deep(.el-table__expand-icon > .el-icon) {
	display: none;
}

/* 自定义未展开图标 */
:deep(.el-table__expand-icon) {
	background-image: url('./icon/arrowDown.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 24px;
	height: 24px;
	cursor: pointer;
	transition: transform 0.3s;
}

/* 自定义展开图标 */
:deep(.el-table__expand-icon.is-expanded) {
	background-image: url('./icon/arrowDown.png');
	transform: rotate(-90deg);
}

/* 自定义表头背景颜色 */
:deep(.el-table th) {
	background-color: #f0f9eb;
}

/* 自定义表头文字颜色 */
:deep(.el-table th .cell) {
	color: rgba(59, 65, 75, 1);

	font-family: Source Han Sans CN;
	font-style: Bold;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
	text-align: center;
}

/* 自定义表头边框 */
:deep(.el-table th) {
	border-bottom: 2px solid #ebeef5;
}

/* 自定义表头高度 */
:deep(.el-table th) {
	padding: 12px 0;
}
</style>
