<template>
	<div class="overviewContainer">
		<div class="row">
			<CardCustom title="实体清单发布机构" :style="{ width: '984px', height: '284px' }">
				<div class="panel1">
					<img :src="panel1.img" alt="" class="img" />
					<div class="infoWrap">
						<div class="item">
							<div class="name">机构名称：</div>
							<div class="doc">{{ panel1.mingcheng }}</div>
						</div>
						<div class="item">
							<div class="name">相关措施：</div>
							<div class="doc">{{ panel1.cuoshi }}</div>
						</div>
						<div class="item">
							<div class="name">机构职责：</div>
							<div class="doc zhize">{{ panel1.zhize }}</div>
						</div>
					</div>
				</div>
			</CardCustom>
			<CardCustom title="重点人物" :style="{ width: '600px', height: '284px' }">
				<div class="panel2">
					<div class="item" v-for="(item, index) in panel2" :key="index">
						<img :src="item.img" alt="" class="img" />
						<div class="infoWrap">
							<div class="name">{{ item.name }}</div>
							<div class="enName">{{ item.enName }}</div>
							<div class="party">{{ item.party }}</div>
						</div>
					</div>
				</div>
			</CardCustom>
		</div>
		<div class="row">
			<CardCustom title="实体清单分布" :style="{ width: '984px', height: '520px' }">
				<template #right>
					<div class="panel3ButtonWrap">
						<div
							class="leftButton"
							:class="{ activeButton: panel3ActiveIndex === 1 }"
							@click="setPanel3ActiveIndex(1)"
						>
							领域类别分布
						</div>
						<div
							class="rightButton"
							:class="{ activeButton: panel3ActiveIndex === 2 }"
							@click="setPanel3ActiveIndex(2)"
						>
							区域分布
						</div>
					</div>
					<div class="panel3Jinbi"></div>
				</template>
				<div class="panel3">
					<div class="chartWrap">
						<PieCharts v-if="panel3ActiveIndex === 1"></PieCharts>
						<MapCharts v-if="panel3ActiveIndex === 2"></MapCharts>
					</div>
					<Hint text="本次制裁共新增83个实体，其中53个中国大陆实体、1个中国台湾实体。"></Hint>
				</div>
			</CardCustom>
			<CardCustom title="制裁原因" :style="{ width: '600px', height: '520px' }">
				<div class="panel4">
					<div class="item" v-for="(item, index) in panel4" :key="index">
						<div class="icon1">{{ index + 1 }}</div>
						<div class="text">{{ item.text }}</div>
						<div class="icon2"></div>
					</div>
				</div>
			</CardCustom>
		</div>
		<div class="row">
			<CardCustom title="实体清单列表" :style="{ width: '984px', height: '678px' }">
				<template #right>
					<el-checkbox v-model="panel5IsChecked" label="只看中国实体" size="large" :style="{ marginRight: '15px' }" />
					<ButtonList
						:list="panel5ButtonList"
						:gap="8"
						:active-id="panel5ButtonAcitveID"
						@click="panel5SetButtonAcitveID"
						:style="{ marginRight: '15px' }"
					></ButtonList>
				</template>
				<div class="panel5">
					<div class="hintWrap">
						<div class="title">
							共计
							<span class="text1">112</span>
							家，其中50%规则涉及
							<span class="text2">604</span>
							家
						</div>
					</div>
					<div class="tableWrap">
						<el-table
							:data="panel5MockData"
							class="sanction-table"
							stripe
							empty-text="暂无数据"
							header-row-class-name="table-header"
							row-class-name="table-row"
						>
							<el-table-column prop="name" label="实体清单" min-width="180">
								<template #default="{ row }">
									<div style="font-weight: 500" class="name">
										<img :src="row.img" alt="" class="img" />
										{{ row.name }}
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="domains" label="涉及领域" width="100">
								<template #default="{ row }">
									<div class="domain-tags">
										<el-tag v-for="tag in row.domains" :key="tag" :type="panel5TypeMap[tag]">{{
											tag
										}}</el-tag>
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="address" label="上市地点" width="100" align="center">
								<template #default="{ row }">
									{{ row.address }}
								</template>
							</el-table-column>

							<el-table-column prop="time" label="制裁时间" width="120" align="center">
								<template #default="{ row }">
									{{ row.time }}
								</template>
							</el-table-column>

							<el-table-column prop="revenue" label="营收(亿元)" width="100" align="center">
								<template #default="{ row }">
									{{ row.revenue }}
								</template>
							</el-table-column>

							<el-table-column prop="subCompany" label="50%规则子企业" min-width="140" align="left">
								<template #default="{ row }">
									<span class="subCompany">
										{{ row.subCompany }}
									</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</CardCustom>
			<CardCustom title="美国前序相关制裁、前序相关事件列表" :style="{ width: '600px', height: '678px' }">
				<div class="panel6">
					<div class="item" v-for="(item, idx) in panel6" :key="item.title">
						<div class="left">
							<div class="icon"></div>
							<div class="line"></div>
						</div>
						<div class="right">
							<div class="date">{{ item.time }}</div>
							<div class="title">{{ item.title }}</div>
							<div class="desc">{{ item.desc }}</div>
						</div>
					</div>
					<div class="more">
						查看更多
						<span class="moreIcon"></span>
					</div>
				</div>
			</CardCustom>
		</div>
	</div>
</template>

<script setup>
import CardCustom from "../../components/CardCustom.vue";
import PieCharts from "../components/pieCharts.vue";
import MapCharts from "../components/mapCharts.vue";
import ButtonList from "@/components/buttonList/buttonList.vue";
import Hint from "../components/hint.vue";

import { onMounted, reactive, ref } from "vue";
import panel1_1 from "../../assets/images/panel1_1.png";
import panel2_1 from "../../assets/images/panel2_1.png";
import panel2_2 from "../../assets/images/panel2_2.png";
import panel2_3 from "../../assets/images/panel2_3.png";
import panel2_4 from "../../assets/images/panel2_4.png";
import panel5_1 from "../../assets/images/panel5_1.png";
import panel5_2 from "../../assets/images/panel5_2.png";
import panel5_3 from "../../assets/images/panel5_3.png";
import panel5_4 from "../../assets/images/panel5_4.png";
import panel5_5 from "../../assets/images/panel5_5.png";
import panel5_6 from "../../assets/images/panel5_6.png";
import panel5_7 from "../../assets/images/panel5_7.png";
import panel5_8 from "../../assets/images/panel5_8.png";
const panel1 = ref({
	img: panel1_1,
	mingcheng: "美国商务部工业与安全局",
	cuoshi: "出口管制条例（EAR）、实体清单、商业管制清单（CCL）、232调查等",
	zhize: "美国商务部工业与安全局（BIS）是美国商务部下属机构，核心职责围绕国家安全与战略技术管控展开，具体包括：以维护商业管制清单（CCL）和出口管制分类号（ECCN）的方式，对敏感货物及两用技术实施出口管制并确定许可要求；通过出口执行局（OEE）执行出口管制、反抵制等相关法律，对违规行为采取行政、刑事等处罚措施；在出口管制和战略贸易问题上与其他国家合作，参与并领导国际出口管制制度。"
});
const panel2 = ref([
	{
		name: "吉娜·雷蒙多",
		enName: "Gina Raimondo",
		party: "美国民主党",
		img: panel2_1
	},
	{
		name: "迈克・约翰逊",
		enName: "Mike Johnson",
		party: "美国共和党",
		img: panel2_2
	},
	{
		name: "艾伦·埃斯特韦斯",
		enName: "Alan Estevez",
		party: "美国民主党",
		img: panel2_3
	},
	{
		name: "凯・格兰杰",
		enName: "Kay Granger",
		party: "美国共和党",
		img: panel2_4
	}
]);
const panel3ActiveIndex = ref(1);
const setPanel3ActiveIndex = index => {
	panel3ActiveIndex.value = index;
};
const panel4 = ref([
	{
		text: "获取美国产物项，以支持中国量子技术；"
	},
	{
		text: "支持2023年2月飞越美国上空的高空气球；"
	},
	{
		text: "获取获取美国原产的无人机物项供中国军方使用。"
	},
	{
		text: "法案序言称“中国光伏、风电企业通过政府补贴倾销产品”"
	},
	{
		text: "将中国定位为“通过强制技术转让获取先进制程的威胁”"
	}
]);

const panel5ButtonList = [
	{ id: 1, text: "新增实体" },
	{ id: 2, text: "移除实体" }
];
const panel5ButtonAcitveID = ref(panel5ButtonList[0].id);
const panel5SetButtonAcitveID = id => {
	panel5ButtonAcitveID.value = id;
};
const panel5IsChecked = ref(true);
const panel5TypeMap = {
	人工智能: "danger",
	通信网络: "warning",
	航空航天: "success"
};
const panel5MockData = [
	{
		name: "科大讯飞股份有限公司",
		domains: ["人工智能"],
		address: "深圳",
		time: "2025年9月",
		isUp: true,
		revenue: "325",
		subCompany: "讯飞智元信息科技...等15家>",
		img: panel5_1
	},
	{
		name: "华为技术有限公司",
		domains: ["通信网络"],
		address: "--",
		time: "2025年9月",
		isUp: true,
		revenue: "325",
		subCompany: "海思半导体有限公...等15家>",
		img: panel5_2
	},
	{
		name: "中国航空工业集团",
		domains: ["航空航天"],
		address: "--",
		time: "2025年9月",
		isUp: true,
		revenue: "325",
		subCompany: "中航科技控股有限...等15家>",
		img: panel5_3
	},
	{
		name: "杭州海康威视有限公司",
		domains: ["航空航天"],
		address: "深圳",
		time: "2025年9月",
		isUp: true,
		revenue: "325",
		subCompany: "海云智能科技有限...等15家>",
		img: panel5_4
	},
	{
		name: "浪潮集团有限公司",
		domains: ["人工智能"],
		address: "--",
		time: "2025年9月",
		isUp: true,
		revenue: "325",
		subCompany: "浪潮商用机器有限...等15家>",
		img: panel5_5
	},
	{
		name: "中兴通讯股份有限公司",
		domains: ["航空航天"],
		address: "深圳",
		time: "2025年9月",
		isUp: true,
		revenue: "325",
		subCompany: "中融讯合通信设备...等15家>",
		img: panel5_6
	},
	{
		name: "大疆创新科技有限公司",
		domains: ["人工智能"],
		address: "--",
		time: "2025年9月",
		isUp: true,
		revenue: "325",
		subCompany: "大疆智能计算服务...等15家>",
		img: panel5_7
	},
	{
		name: "艾睿中国电子贸易有限公司",
		domains: ["航空航天"],
		address: "上海",
		time: "2025年9月",
		isUp: true,
		revenue: "325",
		subCompany: "讯飞智元信息科技...等15家>",
		img: panel5_8
	}
];
// 历次制裁过程
const panel6 = ref([
	{
		time: "2025-09-02",
		title: "传感器和仪器仪表技术咨询委员会将于2024年5月9日召开部分闭门会议",
		desc: "传感器与仪器仪表技术咨询委员会(以下简称“委员会”)将于美国东部夏令时间2024年5月9日星期四下午1:00至2:30召开会议。本次会议将通过微软团队(MS Teams)以线上形式举行。根据美国商务部第10-16号《部门组织》文件。"
	},
	{
		time: "2025-04-17",
		title: "美国对华加征关税至20%并扩大科技制裁",
		desc: '美国以"芬太尼问题"为由提高对华关税至20%，恢复钢铁铝关税；同时推动《恢复贸易公平法案》，计划对中国商品征收100%关税。系统性打压中国高科技产业，关税措施实质为经济勒索。'
	},
	{
		time: "2025-04-17",
		title: "中美关税战升级至125%与反制措施",
		desc: '美国将对华关税从34%提升至84%（总税率104%），中方同步对美商品加征同等税率，并暂停进口美国影片、限制留学合作。特朗普政府通过"基准关税+对等关税+额外加征"策略施压，引发全球供应链震荡。'
	}
]);
</script>

<style lang="scss" scoped>
.overviewContainer {
	width: 1600px;
	margin: 0px auto 0 auto;
	padding-bottom: 20px;
}
.row {
	display: flex;
	flex-direction: row;
	gap: 16px;
	margin-top: 15px;
}
.panel1 {
	height: 100%;
	padding: 2px 24px 0 24px;
	display: flex;
	.img {
		width: 90px;
		height: 90px;
		margin-right: 16px;
	}
	.infoWrap {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 19px;
		.item {
			display: flex;

			.name {
				flex-shrink: 0;
				width: 100px;
				color: rgba(59, 65, 75, 1);
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
			}
			.doc {
				flex: 1;
				color: rgba(5, 95, 194, 1);
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
			}
			.zhize {
				color: rgba(95, 101, 108, 1);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
			}
		}
	}
}
.panel2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	height: 100%;
	overflow: auto;
	align-content: flex-start;
	gap: 16px;
	padding: 0 23px 20px;
	.item {
		width: 268px;
		height: 94px;
		padding: 10px 16px;
		background: rgba(231, 243, 255, 0.5);
		display: flex;
		align-items: center;
		.img {
			width: 70px;
			height: 70px;
			margin-right: 16px;
		}
		.infoWrap {
			display: flex;
			flex-direction: column;
			flex: 1;
			max-height: 100%;
			gap: 3px;
			color: rgba(95, 101, 108, 1);
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			.name {
				color: rgba(5, 95, 194, 1);
				font-size: 16px;
				font-weight: 700;
				line-height: 22px;
			}
		}
	}
}
.panel3 {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 3px 24px 10px;
	.chartWrap {
		flex: 1;
	}
}
.panel3ButtonWrap {
	flex: 1;
	display: flex;
	justify-content: center;
	margin-right: 18px;
	.leftButton {
		width: 140px;
		height: 34px;
		/* 自动布局 */
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: rgba(5, 95, 194, 1);
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		border-radius: 40px 0 0 40px;
		border: 2px solid rgba(5, 95, 194, 1);
		border-right: none;
		cursor: pointer;
	}
	.rightButton {
		width: 140px;
		height: 34px;
		/* 自动布局 */
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: rgba(5, 95, 194, 1);
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		border-radius: 0px 40px 40px 0px;
		border: 2px solid rgba(5, 95, 194, 1);
		border-left: none;
		cursor: pointer;
	}
	.activeButton {
		background-color: rgba(5, 95, 194, 1);
		color: #ffffff;
	}
}
.panel3Jinbi {
	width: 28px;
	height: 28px;
	background-image: url("../../assets/images/panel3_1.png");
	background-size: 100% 100%;
	margin-right: 4px;
	cursor: pointer;
}
.panel4 {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	.item {
		width: 552px;
		height: 48px;
		display: flex;
		align-items: center;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 2px;
		.icon1 {
			width: 24px;
			height: 24px;
			border-radius: 12px;
			background-color: rgba(231, 243, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 15px;
			margin-right: 15px;
			font-size: 12px;
			color: rgb(5, 95, 194);
			font-weight: 500;
		}
		.text {
			color: rgba(59, 65, 75, 1);
			font-size: 16px;
			font-weight: 400;
			line-height: 30px;
			flex: 1;
		}
		.icon2 {
			width: 16px;
			height: 16px;
			background-image: url("../../assets/images/panel4_1.png");
			background-size: 100% 100%;
			margin-left: 15px;
			margin-right: 15px;
		}
	}
}
.panel5 {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 3px 24px 10px;
	:deep(.table-header) {
		color: rgba(59, 65, 75, 1);
		font-size: 16px;
		font-weight: 700;
		height: 64px;
	}
	:deep(.table-row) {
		height: 60px;
		font-size: 16px;
		font-weight: 400;
	}
	.hintWrap {
		height: 40px;
		display: flex;
		align-items: center;
		padding: 0 12px;
		border: 1px solid rgb(231, 241, 255);
		border-radius: 4px;
		background: rgb(246, 251, 255);
		.title {
			color: var(--color-main-active);
			font-size: 14px;
			font-weight: 400;
			line-height: 24px;
			.text1 {
				color: rgb(206, 79, 81);
				font-weight: 900;
			}
			.text2 {
				color: rgb(255, 149, 77);
				font-weight: 900;
			}
		}
	}
	.tableWrap {
		flex: 1;
		margin-top: 14px;
		min-height: 0;
	}
	.name {
		display: flex;
		align-items: center;
		.img {
			width: 40px;
			height: 40px;
			margin-right: 6px;
			margin-left: 6px;
		}
	}
	.subCompany {
		color: rgba(5, 95, 194, 1);
	}
}
.panel6 {
	height: 100%;
	padding: 6px 45px 0 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	.item {
		display: flex;
		.left {
			position: relative;
			margin-right: 20px;
			.icon {
				position: absolute;
				left: -5px;
				top: 7px;
				width: 10px;
				height: 10px;
				background-image: url("../../assets/images/panel6_1.png");
				background-size: 100% 100%;
			}
			.line {
				width: 1px;
				background-color: rgba(174, 214, 255, 1);
				height: 100%;
			}
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-bottom: 40px;
			.date {
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
				color: rgba(5, 95, 194, 1);
			}
			.title {
				color: rgba(5, 95, 194, 1);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				margin-top: 12px;
			}
			.desc {
				color: rgba(95, 101, 108, 1);
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				margin-top: 8px;
			}
		}
	}
	.more {
		display: flex;
		color: rgba(5, 95, 194, 1);
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
		align-items: center;
		cursor: pointer;
		.moreIcon {
			width: 16px;
			height: 16px;
			background-image: url("../../assets/images/panel6_more.png");
			margin-left: 3px;
			background-size: 100% 100%;
			margin-bottom: 2px;
		}
	}
}
</style>
