<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">{{ `${box1Info.currentYear.num}家` }}</div>
								<div class="item-bottom-center">{{ "/" }}</div>
								<div class="item-bottom-right">{{ `${box1Info.currentYear.totalNum}家` }}</div>
							</div>
						</div>
						<div class="item">
							<div class="item-top">{{ "全部企业" }}</div>
							<div class="item-bottom">
								<div class="item-bottom-left">{{ `${box1Info.allYear.num}家` }}</div>
								<div class="item-bottom-center">{{ "/" }}</div>
								<div class="item-bottom-right">{{ `${box1Info.allYear.totalNum}家` }}</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">{{ `${box3Info.currentYear.num}次` }}</div>
								<div class="item-bottom-center">{{ "/" }}</div>
								<div class="item-bottom-right">{{ `${box3Info.currentYear.totalNum}次` }}</div>
							</div>
						</div>
						<div class="item">
							<div class="item-top">{{ "全部调查" }}</div>
							<div class="item-bottom">
								<div class="item-bottom-left">{{ `${box3Info.allYear.num}次` }}</div>
								<div class="item-bottom-center">{{ "/" }}</div>
								<div class="item-bottom-right">{{ `${box3Info.allYear.totalNum}次` }}</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";
import { useRoute } from "vue-router";
import {
	getGrowthNum,
	getGrowthTrend,
	getEntityListField,
	getGrowth232Num,
	getGrowth232Trend,
	getSection232Field
} from "@/api/institution/index";

const route = useRoute();

const box1Info = ref({
	currentYear: {
		num: 0,
		totalNum: 0
	},
	allYear: {
		num: 0,
		totalNum: 0
	}
});
const handleGetGrowthNum = async () => {
	const params = {
		orgId: route.query.id
		// orgId: 54
	};
	try {
		const res = await getGrowthNum(params);
		console.log("实体清单增长数量", res);
		if (res.code === 200 && res.data) {
			box1Info.value.currentYear.num = res.data.filter(item => {
				return item.yearType === "currentYear";
			})[0].chinaNum;
			box1Info.value.currentYear.totalNum = res.data.filter(item => {
				return item.yearType === "currentYear";
			})[0].allNum;
			box1Info.value.allYear.num = res.data.filter(item => {
				return item.yearType === "AllYear";
			})[0].chinaNum;
			box1Info.value.allYear.totalNum = res.data.filter(item => {
				return item.yearType === "AllYear";
			})[0].allNum;
		} else {
			console.error(res);
		}
	} catch (error) {
		console.error("获取实体清单数量error", error);
	}
};
handleGetGrowthNum();

const box1Data = ref({
	title: [],
	data: [
		{
			name: "全部实体",
			data: []
		},
		{
			name: "中国实体",
			data: []
		}
	]
});
const handleGetBox1Data = async () => {
	const params = {
		orgId: route.query.id
		// orgId: 54
	};
	try {
		const res = await getGrowthTrend(params);
		console.log("实体清单新增数量变数趋势", res);
		if (res.code === 200 && res.data) {
			box1Data.value.title = res.data.map(item => {
				return item.year;
			});
			box1Data.value.data[0].data = res.data.map(item => {
				return item.allNum;
			});
			box1Data.value.data[1].data = res.data.map(item => {
				return item.chinaNum;
			});
		}
	} catch (error) {}
};
const handleBox1 = async () => {
	await handleGetBox1Data();
	const box1Chart = getMultiLineChart(box1Data.value.title, box1Data.value.data[0].data, box1Data.value.data[1].data);
	setChart(box1Chart, "box1Chart");
};

const box2Data = ref([
	// {
	// 	name: "集成电路",
	// 	value: 50
	// },
]);
const handleGetBox2Data = async () => {
	const params = {
		orgId: route.query.id,
		// orgId: 54,
		year: 2025
	};
	try {
		const res = await getEntityListField(params);
		console.log("实体清单新增企业领域分布", res);
		if (res.code === 200 && res.data) {
			box2Data.value = res.data.map(item => {
				return {
					name: item.industry,
					value: item.amount
				};
			});
		}
	} catch (error) {}
};

const handleBox2 = async () => {
	await handleGetBox2Data();
	const box2Chart = getPieChart(box2Data.value);
	setChart(box2Chart, "box2Chart");
};

const box3Info = ref({
	currentYear: {
		num: 0,
		totalNum: 0
	},
	allYear: {
		num: 0,
		totalNum: 0
	}
});

const handleGetGrowth232Num = async () => {
	const params = {
		orgId: route.query.id
		// orgId: 54
	};
	try {
		const res = await getGrowth232Num(params);
		console.log("232调查新增数量", res);
		if (res.code === 200 && res.data) {
			box3Info.value.currentYear.num = res.data.filter(item => {
				return item.yearType === "currentYear";
			})[0].chinaNum;
			box3Info.value.currentYear.totalNum = res.data.filter(item => {
				return item.yearType === "currentYear";
			})[0].allNum;
			box3Info.value.allYear.num = res.data.filter(item => {
				return item.yearType === "AllYear";
			})[0].chinaNum;
			box3Info.value.allYear.totalNum = res.data.filter(item => {
				return item.yearType === "AllYear";
			})[0].allNum;
		} else {
			console.error(res);
		}
	} catch (error) {
		console.error("获取232调查新增数量error", error);
	}
};
handleGetGrowth232Num();

const box3Data = ref({
	title: [],
	data: [
		{
			name: "全部调查",
			data: []
		},
		{
			name: "涉华调查",
			data: []
		}
	]
});

const handleGetBox3Data = async () => {
	const params = {
		orgId: route.query.id
		// orgId: 54
	};
	try {
		const res = await getGrowth232Trend(params);
		console.log("232调查新增数量变数趋势", res);
		if (res.code === 200 && res.data) {
			box3Data.value.title = res.data.map(item => {
				return item.year;
			});
			box3Data.value.data[0].data = res.data.map(item => {
				return item.allNum;
			});
			box3Data.value.data[1].data = res.data.map(item => {
				return item.chinaNum;
			});
		}
	} catch (error) {}
};
const handleBox3 = async () => {
	await handleGetBox3Data();
	const box3Chart = getMultiLineChart(box3Data.value.title, box3Data.value.data[0].data, box3Data.value.data[1].data);
	setChart(box3Chart, "box3Chart");
};

const box4Data = ref([]);

const handleGetBox4Data = async () => {
	const params = {
		orgId: route.query.id,
		// orgId: 54,
		startDate: "2021-01-01"
	};
	try {
		const res = await getSection232Field(params);
		console.log("232调查新增企业领域分布", res);
		if (res.code === 200 && res.data) {
			box4Data.value = res.data.map(item => {
				return {
					name: item.industry,
					value: item.amount
				};
			});
		}
	} catch (error) {}
};

const handleBox4 = async () => {
	await handleGetBox4Data();
	const box4Chart = getPieChart(box4Data.value);
	setChart(box4Chart, "box4Chart");
};

onMounted(() => {
	handleBox1();
	handleBox2();
	handleBox3();
	handleBox4();
});
</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>