<template>
	<div class="sanction-wrap">
		<div class="box1 box">
			<div class="box-header">
				<div class="box-header-left">
					<div class="title">{{ "实体清单 >" }}</div>
					<div class="desc">
						{{
							"被列入清单的企业在购买受《出口管理条例》管辖的美国物项（商品、软件、技术）时，将面临“推定拒绝”的严格许可审查，相当于事实上的禁运。主要针对半导体、人工智能、超算等高科技领域。"
						}}
					</div>
					<div class="info">
						{{ "美国商务部工业与安全局 (BIS) · 1997年2月-至今" }}
					</div>
				</div>
				<div class="box-header-right">
					<div class="box-header-right-top">
						<div class="item">
							<div class="item-top">{{ "今年新增" }}</div>
							<div class="item-bottom">
								<div class="item-bottom-left">{{ "95家" }}</div>
								<div class="item-bottom-center">{{ "/" }}</div>
								<div class="item-bottom-right">{{ "1129家" }}</div>
							</div>
						</div>
						<div class="item">
							<div class="item-top">{{ "今年新增" }}</div>
							<div class="item-bottom">
								<div class="item-bottom-left">{{ "95家" }}</div>
								<div class="item-bottom-center">{{ "/" }}</div>
								<div class="item-bottom-right">{{ "1129家" }}</div>
							</div>
						</div>
					</div>
					<div class="box-header-right-bottom">
						<div class="icon">
							<img src="@/assets/images/icon/tips.png" alt="" />
						</div>
						<div class="text">{{ "中国实体数量/实体总数" }}</div>
					</div>
				</div>
			</div>
			<div class="box-center">
				<div class="box-center-left">
					<img src="@/assets/images/icon-hot.png" alt="" />
				</div>
				<div class="box-center-center">
					{{
						"美商务部2025年10月8日将16家中国大陆企业及3个中国香港地址列入实体清单，指控这些实体为伊朗及其代理组织（如胡塞武装、哈马斯）采购美国电子元件，用于无人机等军事目的，规避了..."
					}}
				</div>
				<div class="box-center-right">{{ "更多 >" }}</div>
			</div>
			<div class="box-main">
				<div class="box-main-left">
					<div class="box-main-content" id="box1Chart"></div>
					<div class="box-main-footer">{{ "实体清单新增企业数量变化趋势" }}</div>
				</div>
				<div class="box-main-right">
					<div class="box-main-content" id="box2Chart"></div>
					<div class="box-main-footer">{{ "实体清单新增企业领域分布" }}</div>
				</div>
			</div>
		</div>
		<div class="box2 box">
			<div class="box-header">
				<div class="box-header-left">
					<div class="title">{{ "232调查 >" }}</div>
					<div class="desc">
						{{
							"依据《1962年贸易扩展法》第232条，由商务部在270天内向总统提交报告，并由总统在90天内决定是否采取措施，评估特定产品的进口是否威胁美国国家安全并对其加征高额关税、实施进口配额等措施。"
						}}
					</div>
					<div class="info">
						{{ "美国商务部 · 1962年9月-至今" }}
					</div>
				</div>
				<div class="box-header-right">
					<div class="box-header-right-top">
						<div class="item">
							<div class="item-top">{{ "今年新增" }}</div>
							<div class="item-bottom">
								<div class="item-bottom-left">{{ "2次" }}</div>
								<div class="item-bottom-center">{{ "/" }}</div>
								<div class="item-bottom-right">{{ "6次" }}</div>
							</div>
						</div>
						<div class="item">
							<div class="item-top">{{ "今年新增" }}</div>
							<div class="item-bottom">
								<div class="item-bottom-left">{{ "16次" }}</div>
								<div class="item-bottom-center">{{ "/" }}</div>
								<div class="item-bottom-right">{{ "91次" }}</div>
							</div>
						</div>
					</div>
					<div class="box-header-right-bottom">
						<div class="icon">
							<img src="@/assets/images/icon/tips.png" alt="" />
						</div>
						<div class="text">{{ "中国实体数量/实体总数" }}</div>
					</div>
				</div>
			</div>
			<div class="box-center">
				<div class="box-center-left">
					<img src="@/assets/images/icon-hot.png" alt="" />
				</div>
				<div class="box-center-center">
					{{ "美商务部2025年7月14日针对中国企业生产的无人机系统及其零部件、多晶硅及其衍生物发起两项232调查。" }}
				</div>
				<div class="box-center-right">{{ "更多 >" }}</div>
			</div>
			<div class="box-main">
				<div class="box-main-left">
					<div class="box-main-content" id="box3Chart"></div>
					<div class="box-main-footer">{{ "232调查数量变化趋势" }}</div>
				</div>
				<div class="box-main-right">
					<div class="box-main-content" id="box4Chart"></div>
					<div class="box-main-footer">{{ "232调查涉及企业领域分布" }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart";

const box1Data = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [
		{
			name: "全部实体",
			data: [1104, 468, 602, 635, 486, 622, 811, 967, 952, 1104, 1358, 1196]
		},
		{
			name: "中国实体",
			data: [234, 263, 251, 224, 264, 255, 258, 234, 246, 249, 257, 268]
		}
	]
});

const box2Data = 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 box3Data = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [
		{
			name: "全部调查",
			data: [856, 456, 568, 631, 667, 631, 532, 589, 631, 668, 672, 630]
		},
		{
			name: "涉华调查",
			data: [188, 195, 198, 205, 208, 214, 218, 223, 216, 219, 211, 204]
		}
	]
});

const box4Data = 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
	}
]);

onMounted(() => {
	const box1Chart = getMultiLineChart(box1Data.value.title, box1Data.value.data[0].data, box1Data.value.data[1].data);
	setChart(box1Chart, "box1Chart");

	const box2Chart = getPieChart(box2Data.value);
	setChart(box2Chart, "box2Chart");

	const box3Chart = getMultiLineChart(box3Data.value.title, box3Data.value.data[0].data, box3Data.value.data[1].data);
	setChart(box3Chart, "box3Chart");

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

<style lang="scss" scoped>
.sanction-wrap {
	padding-bottom: 5px;
	.box {
		margin: 16px auto;
		width: 1600px;
		height: 640px;
		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);
		position: relative;
		&::before {
			content: "";
			position: absolute;
			width: 8px;
			height: 122px;
			background: var(--color-main-active);
			top: 23px;
			left: 0;
		}
		.box-header {
			display: flex;
			justify-content: space-between;
			.box-header-left {
				width: 763px;
				margin-left: 48px;
				.title {
					margin-top: 23px;
					height: 32px;
					color: rgba(5, 95, 194, 1);
					font-family: Microsoft YaHei;
					font-size: 24px;
					font-weight: 700;
					line-height: 32px;
					text-align: left;
				}
				.desc {
					margin-top: 9px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
				}
				.info {
					margin-top: 10px;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
				}
			}
			.box-header-right {
				margin-right: 59px;
				width: 700px;
				.box-header-right-top {
					margin-top: 26px;
					display: flex;
					justify-content: flex-end;
					gap: 50px;
					.item {
						.item-top {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
							letter-spacing: 0px;
							text-align: right;
						}
						.item-bottom {
							height: 42px;
							line-height: 42px;
							margin-top: 3px;
							display: flex;
							gap: 4px;
							justify-content: flex-end;
							.item-bottom-left {
								color: rgba(206, 79, 81, 1);
								font-family: Microsoft YaHei;
								font-size: 32px;
								font-weight: 700;
								letter-spacing: 0px;
								text-align: right;
							}
							.item-bottom-center {
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 18px;
								font-weight: 700;
								letter-spacing: 0px;
								text-align: right;
							}
							.item-bottom-right {
								color: rgba(5, 95, 194, 1);
								font-family: Microsoft YaHei;
								font-size: 32px;
								font-weight: 700;
								letter-spacing: 0px;
								text-align: right;
							}
						}
					}
				}
				.box-header-right-bottom {
					margin-top: 23px;
					height: 24px;
					display: flex;
					gap: 8px;
					justify-content: flex-end;
					.icon {
						margin-top: 4px;
						width: 14px;
						height: 16px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.text {
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}
		}
		.box-center {
			margin: 20px auto 10px;
			width: 1511px;
			height: 55px;
			box-sizing: border-box;
			border: 1px solid rgba(231, 243, 255, 1);
			border-radius: 4px;
			background: rgba(246, 250, 255, 1);
			display: flex;
			align-items: center;
			padding: 0 16px;
			gap: 16px;
			.box-center-left {
				width: 20px;
				height: 18px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.box-center-center {
				width: 1370px;
				height: 24px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.box-center-right {
				width: 49px;
				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: right;
			}
		}
		.box-main {
			width: 1511px;
			margin: 0 auto;
			height: 388px;
			display: flex;
			justify-content: space-between;
			.box-main-left {
				width: 700px;
				.box-main-content {
					height: 340px;
				}
				.box-main-footer {
					width: 700px;
					height: 36px;
					border-radius: 18px;
					margin-top: 5px;
					background: rgba(246, 250, 255, 1);
					text-align: center;
					line-height: 36px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
				}
			}
			.box-main-right {
				width: 700px;
				.box-main-content {
					height: 340px;
				}
				.box-main-footer {
					width: 700px;
					height: 36px;
					border-radius: 18px;
					margin-top: 5px;
					background: rgba(246, 250, 255, 1);
					text-align: center;
					line-height: 36px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
				}
			}
		}
	}
}
</style>