<template>
	<div class="deepdig-wrap">
		<div class="top">
			<div class="box1 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-icon1.png" alt="" />
						</div>
						<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="box-main" id="box1Chart"></div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{ "经费来自国会常规预算以及《芯片与科学法案》等专项立法拨款​。BIS​​ 获得最多资金预算。" }}
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box2 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-icon1.png" alt="" />
						</div>
						<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="box-main" id="box2Chart"></div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{ "主要集中在高科技新型产业如集成电路、人工智能及通信网络，突出打压中美竞争关键领域。" }}
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="box3 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-icon1.png" alt="" />
						</div>
						<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="box-main" id="box3Chart"></div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{ "近年来美商务部对华制裁手段升级，聚焦专利壁垒、出口管制、力图阻断产业链升级的特点。" }}
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box4 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-icon1.png" alt="" />
						</div>
						<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="box-main box4-main">
					<div class="box4-main-left" id="box4Chart"></div>
					<div class="box4-main-right">
						<div class="box4-main-right-header">
							与 <span>{{ "唐纳德·特朗普" }}</span> 关系
						</div>
						<div class="box4-main-right-main">
							<div class="box4-main-right-item">
								<div class="icon"></div>
								<div class="text">{{ '在2016年和2024年的总统竞选中，卢特尼克利用其在金融界的影响力，为特朗普筹集了数千万美元的竞选资金，并个人捐赠了1000万美元。' }}</div>
							</div>
														<div class="box4-main-right-item">
								<div class="icon"></div>
								<div class="text">{{ '提名霍华德·卢特尼克担任商务部长，赋予其直接监督美国贸易代表办公室（USTR）的权力。' }}</div>
							</div>
														<div class="box4-main-right-item">
								<div class="icon"></div>
								<div class="text">{{ '在接受CBS News采访时强调，特朗普政府的政策“是美国历史上最重要的”。' }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="box-footer">
					<div class="box-footer-left">
						<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
					</div>
					<div class="box-footer-center">
						{{ "霍华德·卢特尼克与包括总统在内的美国政界、商界高层均有紧密联系。" }}
					</div>
					<div class="box-footer-right">
						<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getSankeyChart from "./utils/sankey";
import getPieChart from "./utils/piechart";
import getWordCloudChart from "./utils/worldCloudChart";
import getGraphChart from "./utils/graph";

import Img from "./assets/images/9.png";
import Img1 from "./assets/images/1.png";
import Img2 from "./assets/images/2.png";
import Img3 from "./assets/images/3.png";
import Img4 from "./assets/images/4.png";
import Img5 from "./assets/images/5.png";
import Img6 from "./assets/images/6.png";
import Img7 from "./assets/images/7.png";
import Img8 from "./assets/images/8.png";

const box1ChartData = ref({
	nodes: [
		{
			name: "《芯片与科学法案》专项法案资金"
		},
		{
			name: "国防生产法第三章专项资金"
		},
		{
			name: "国会年度预算拨款"
		},
		{
			name: "《通胀削减法案》专项法案资金"
		},
		{
			name: "工业和安全局(BIS)"
		},
		{
			name: "国家技术信息局(NTIS)"
		},
		{
			name: "经济分析局(BEA)"
		},
		{
			name: "国家电信和信息管理局(NTIA)"
		},
		{
			name: "专利和商标局(USPTO)"
		},
		{
			name: "经济发展局(EDA)"
		},
		{
			name: "国家标准与技术研究所(NIST)"
		}
	],
	links: [
		{
			source: "《芯片与科学法案》专项法案资金",
			target: "工业和安全局(BIS)",
			value: 100
		},
		{
			source: "《芯片与科学法案》专项法案资金",
			target: "国家技术信息局(NTIS)",
			value: 58
		},
		{
			source: "《芯片与科学法案》专项法案资金",
			target: "经济分析局(BEA)",
			value: 32
		},
		{
			source: "《芯片与科学法案》专项法案资金",
			target: "国家电信和信息管理局(NTIA)",
			value: 12
		},
		{
			source: "国防生产法第三章专项资金",
			target: "工业和安全局(BIS)",
			value: 41
		},
		{
			source: "国防生产法第三章专项资金",
			target: "国家电信和信息管理局(NTIA)",
			value: 28
		},
		{
			source: "国防生产法第三章专项资金",
			target: "经济分析局(BEA)",
			value: 11
		},
		{
			source: "国会年度预算拨款",
			target: "工业和安全局(BIS)",
			value: 24
		},
		{
			source: "国会年度预算拨款",
			target: "经济分析局(BEA)",
			value: 30
		},

		{
			source: "国会年度预算拨款",
			target: "国家电信和信息管理局(NTIA)",
			value: 68
		},
		{
			source: "国会年度预算拨款",
			target: "国家电信和信息管理局(NTIA)",
			value: 23
		},
		{
			source: "国会年度预算拨款",
			target: "专利和商标局(USPTO)",
			value: 7
		},
		{
			source: "国会年度预算拨款",
			target: "经济发展局(EDA)",
			value: 72
		},
		{
			source: "国会年度预算拨款",
			target: "国家标准与技术研究所(NIST)",
			value: 34
		},

		{
			source: "《通胀削减法案》专项法案资金",
			target: "工业和安全局(BIS)",
			value: 35
		},
		{
			source: "《通胀削减法案》专项法案资金",
			target: "经济发展局(EDA)",
			value: 28
		},
		{
			source: "《通胀削减法案》专项法案资金",
			target: "国家标准与技术研究所(NIST)",
			value: 32
		}
	]
});

const box2ChartData = ref([
	{
		name: "集成电路",
		value: 50
	},
	{
		name: "人工智能",
		value: 46
	},
	{
		name: "通信网络",
		value: 40
	},
	{
		name: "能源",
		value: 32
	},
	{
		name: "先进制造",
		value: 31
	},
	{
		name: "生物科技",
		value: 31
	},
	{
		name: "航空航天",
		value: 30
	},
	{
		name: "新材料",
		value: 24
	}
]);

const box3ChartData = ref([
	{ name: "人工智能(AI)", value: 100 },
	{ name: "未实现赤字控制目标", value: 66 },
	{ name: "关注核聚变能源研究", value: 77 },
	{ name: "抵制外国人才争夺", value: 35 },
	{ name: "进行可再生能源税收减免", value: 88 },
	{ name: "评估中美现代化技术", value: 57 },
	{ name: "应对中国制造2025战略", value: 72 },
	{ name: "实施能源税收延期", value: 18 },
	{ name: "限制采购中国产电池", value: 34 },
	{ name: "加强美国在核能领域得到领导力", value: 16 },
	{ name: "发展替代燃料", value: 72 },
	{ name: "发展风能", value: 58 },
	{ name: "发展太阳能", value: 24 },
	{ name: "施加额外能源出口限制", value: 33 },
	{ name: "评估中美能源技术", value: 47 },
	{ name: "禁止资助中国能源项目", value: 32 },
	{ name: "不得向中国机构提供援助", value: 62 },
	{ name: "开展先进生物能源计划", value: 51 }
]);

const box4ChartData = ref({
	nodes: [
		{ id: "9", name: "霍华德·卢特尼克", category: 0, symbolSize: 50, symbol: `image://${Img}` },
		{ id: "1", name: "唐纳德·特朗普", category: 1, symbolSize: 50, symbol: `image://${Img1}` },
		{ id: "2", name: "约翰·斯奎尔斯", category: 2, symbolSize: 50, symbol: `image://${Img2}` },
		{ id: "3", name: "马尔科·卢比奥", category: 2, symbolSize: 50, symbol: `image://${Img3}` },
		{ id: "4", name: "埃隆·马斯克", category: 2, symbolSize: 50, symbol: `image://${Img4}` },
		{ id: "5", name: "道格·伯格姆", category: 2, symbolSize: 50, symbol: `image://${Img5}` },
		{ id: "6", name: "斯科特·贝森特", category: 2, symbolSize: 50, symbol: `image://${Img6}` },
		{ id: "7", name: "杰弗里·凯斯勒", category: 2, symbolSize: 50, symbol: `image://${Img7}` },
		{ id: "8", name: "杰弗里·凯德勒", category: 2, symbolSize: 50, symbol: `image://${Img8}` }
	],
	links: [
		{ source: "9", target: "1" },
		{ source: "9", target: "2" },
		{ source: "9", target: "3" },
		{ source: "9", target: "4" },
		{ source: "9", target: "5" },
		{ source: "9", target: "6" },
		{ source: "9", target: "7" },
		{ source: "9", target: "8" }
	],
	categories: [{ name: "a" }, { name: "b" }]
});

onMounted(() => {
	const box1Chart = getSankeyChart(box1ChartData.value.nodes, box1ChartData.value.links);
	setChart(box1Chart, "box1Chart");
	const box2Chart = getPieChart(box2ChartData.value);
	setChart(box2Chart, "box2Chart");

	const box3Chart = getWordCloudChart(box3ChartData.value);
	setChart(box3Chart, "box3Chart");

	const box4Chart = getGraphChart(box4ChartData.value);
	setChart(box4Chart, "box4Chart");
});
</script>

<style lang="scss" scoped>
.deepdig-wrap {
	padding-bottom: 5px;
	.box {
		width: 792px;
		height: 410px;
		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: 48px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 20px;
			width: 8px;
			height: 16px;
			border-radius: 0 4px 4px 0;
			background: rgba(10, 87, 166, 1);
		}
		.title {
			margin-left: 14px;
			margin-top: 16px;
			height: 24px;
			line-height: 24px;
			color: rgba(10, 87, 166, 1);
			font-family: Microsoft YaHei;
			font-size: 18px;
			font-weight: 700;
		}
		.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: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.box-main {
		height: 300px;
		// background: skyblue;
	}
	.box-footer {
		margin: 8px auto;
		width: 759px;
		height: 40px;
		padding: 6px 12px;
		display: flex;
		align-items: center;
		gap: 10px;
		box-sizing: border-box;
		border: 1px solid rgba(231, 243, 255, 1);
		border-radius: 4px;
		background: rgba(246, 250, 255, 1);
		.box-footer-left {
			width: 19px;
			height: 20px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.box-footer-center {
			width: 666px;
			height: 24px;
			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;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.box-footer-right {
			width: 24px;
			height: 24px;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.top {
		margin: 0 auto;
		display: flex;
		gap: 16px;
	}
	.bottom {
		margin: 16px auto;
		display: flex;
		gap: 16px;
	}
	.box4-main {
		display: flex;
		margin: 0 20px;
		.box4-main-left {
			width: 350px;
		}
		.box4-main-right {
			width: 380px;
			.box4-main-right-header {
				display: inline-block;
				max-width: 300px;
				height: 32px;
				padding: 0 16px;
				border-radius: 20px;
				background: rgba(231, 243, 255, 1);
				text-align: center;
				line-height: 32px;
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 700;
				letter-spacing: 1px;
				color: #3b414b;
				span {
					color: var(--color-main-active);
				}
			}
			.box4-main-right-main {
				height: 240px;
				margin-top: 20px;
				.box4-main-right-item {
					display: flex;
					gap: 8px;
					margin-bottom: 16px;
					.icon {
						margin-top: 8px;
						width: 8px;
						height: 8px;
						border-radius: 4px;
						background: var(--color-main-active);
					}
					.text {
						width: 360px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
					}
				}
			}
		}
	}
}
</style>