<template>
	<el-row :gutter="20">
		<el-col :span="13">
			<custom-container title="FCC简介">
				<!-- 顶部右侧自定义内容 -->
				<!-- <template #header-right>
					<div style="display: flex; gap: 8px">
						<el-input placeholder="搜索项目..." clearable style="width: 200px">
							<template #prefix>
								<el-icon><Search /></el-icon>
							</template>
						</el-input>
						<el-button type="primary">涉华背景</el-button>
						<el-button>全部背景</el-button>
					</div>
				</template> -->

				<!-- 中间内容自定义 -->
				<template #default>
					<div class="content-card">
						<el-image class="content-img" :src="BISlogo" fit="fill" />
						<div class="content-desc">
							<div class="content-desc-item">
								<div class="content-desc-title">机构名称：</div>
								<div class="content-desc-content">美国联邦通信委员会(Federal Communications Commission，简称FCC)</div>
							</div>
							<div class="content-desc-item">
								<div class="content-desc-title">成立年份：</div>
								<div class="content-desc-content">1934年</div>
							</div>
							<div class="content-desc-item">
								<div class="content-desc-title">机构职责：</div>
								<div class="content-desc-content">监管通信业务，分配无线电频谱，制定通信标准，保护消费者权益</div>
							</div>
							<div class="content-desc-item">
								<div class="content-desc-title">机构简介：</div>
								<div class="content-desc-content content-desc-content-long">
									美国联邦通信委员会(Federal Communications
									Commission，简称FCC)，是美国负责监管州际和国际通信的独立政府机构。其管辖范围包括无线电、电视、有线、卫星和电缆等通信方式。
									FCC认证是美国对电子产品的强制性认证，主要确保产品的电磁兼容性和无线电频率安全性，防止设备对通信网络造成干扰。
								</div>
							</div>
						</div>
					</div>
				</template>
			</custom-container>

			<custom-container title="规则限制时间线">
				<!-- 中间内容自定义 -->
				<template #default>
					<div style="gap: 20px">
						<div class="rule-time-line-item">2023年2月 - FCC发布FCC-22-84认证规则更新文件，限制Covered List清单上的设备</div>
						<div class="rule-time-line-item">
							2025年5月22日 - FCC全票通过新规，禁止被认定对美国国家安全构成威胁的中国实验室参与测试电子设备
						</div>
						<div class="rule-time-line-item">2025年6月 - 新规具体实施细则公布，明确实验室审查标准</div>
						<div class="rule-time-line-item">2025年9月8日 - 部分条款正式生效执行</div>
					</div>
				</template>
			</custom-container>
		</el-col>
		<el-col :span="11">
			<custom-container title="限制原因与背景">
				<template #default>
					<div class="content-vertical-card">
						<div class="content-vertical-card-title-box">
							<img class="content-vertical-card-title-img" src="@/assets/images/icon-air.png" fit="fill" />
							<span class="content-vertical-card-title">数据对比</span>
						</div>
						<el-table :data="tableData" border style="width: 100%">
							<el-table-column prop="region" label="地区" width="180" />
							<el-table-column prop="num" label="数量" width="180" />
							<el-table-column prop="proportion" label="占比" />
						</el-table>
						<div class="content-vertical-card-declaration">
							根据FCC认可数据库显示，FCC声称约75%销往美国的电子产品依赖中国实验室进行测试
						</div>
					</div>

					<div class="content-vertical-card">
						<div class="content-vertical-card-title-box">
							<img class="content-vertical-card-title-img" src="@/assets/images/icon-compair.png" fit="fill" />
							<span class="content-vertical-card-title">数据对比官方理由</span>
						</div>
						<div class="content-vertical-card-desc-text">FCC以"国家安全"为由，声称：</div>
						<div class="content-vertical-card-desc-text">· 部分中国实验室与中国政府、军方或国有企业存在关联</div>
						<div class="content-vertical-card-desc-text">· 可能成为"外国对手渗透美国通信基础设施的入口"</div>
						<div class="content-vertical-card-desc-text">· 需要防止"不安全设备进入美国市场"</div>
						<div class="content-vertical-card-desc-emphasize">
							FCC审查后认为，部分获认可的实验室与中国政府存在"深层联系"，包括与国有企业或中国军方相关联的机构
						</div>
					</div>
				</template>
			</custom-container>
		</el-col>
	</el-row>
	<el-row :gutter="20">
		<el-col :span="16">
			<custom-container title="美国主要技术委员会及限制规则">
				<template #default>
					<div class="content-list-item-box content-list-item-box-2">
						<div
							class="content-list-item content-card-title-text-2 content-card-title-text-4"
							v-for="item in ruleList"
							:key="item.title"
						>
							<div class="content-card-title-text">{{ item.title }}</div>
							<div class="content-card-desc">{{ item.desc }}</div>
						</div>
					</div>
				</template>
			</custom-container>
		</el-col>
		<el-col :span="8">
			<custom-container title="主要限制条款">
				<template #default>
					<div class="content-list-item-box content-list-item-box-2">
						<div
							class="content-list-item content-card-title-text-2 content-card-title-text-5"
							v-for="item in limitList"
							:key="item.href"
						>
							<el-link type="primary" underline="always">{{ item.href }}</el-link>
							<el-button class="content-list-item-button" v-if="item.link" type="primary">官方链接</el-button>
						</div>
					</div>
				</template>
			</custom-container>
		</el-col>
	</el-row>
</template>

<script setup>
import { ref } from "vue";
import CustomContainer from "@/components/Container/index.vue";
import BISlogo from "@/assets/images/BISlogo-FCC.png";
import Distribution from "@/assets/images/distribution.png";

// 限制条款
const ruleList = ref([
	{
		title: '禁止"受限实体"控制的实验室参与认证',
		desc: `FCC将不再认可由"受限实体"拥有、控制或指导的测试实验室、认证机构和实验室认可机构。
"受限实体"包括FCC的"受限清单"（Covered List）上的公司，以及美国国防部的"中国军事企业清单"与商务部的"实体清单"上的企业。`
	},
	{
		title: "所有权和控制权的界定",
		desc: `任何"受限实体"直接或间接拥有10%或以上股权或投票权的实验室，将被视为"受控"实验室。
实验室必须在30天内向FCC提交声明，证明其不受"受限实体"控制，并报告任何持有5%或以上股权的实体。`
	},
	{
		title: "撤销现有认可",
		desc: `FCC将撤销任何被发现由"受限实体"控制的实验室的现有认可。
未能提供准确信息或提供虚假信息的实验室也将失去认可资格。`
	},
	{
		title: "实验室可信度审查",
		desc: `覆盖范围：75%的进口电子产品（如IoT设备、智能手机、无线摄像头、智能穿戴等）。
关键标准：实验室需通过FCC"可信度审查"，排除与中国军民融合体系、实体清单（Entity List）或国防部"中国军工企业清单"的关联:。`
	}
]);

// 主要限制条款
const limitList = ref([
	{
		href: "FCC Amendments to Equipment Authorization Program",
		link: true
	},
	{
		href: "Federal Register Document (2023-02-06)",
		link: false
	},
	{
		href: " FCC Covered List",
		link: true
	}
]);

// 数据对比
const tableData = ref([
	{
		region: "中国",
		num: "168家",
		proportion: 10
	},
	{
		region: "美国",
		num: "111家",
		proportion: 10
	},
	{
		region: "中国台湾",
		num: "114家",
		proportion: 10
	}
]);
</script>

<style scoped>
.content-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.content-vertical-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.renwu-card {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 379px;
	height: 148px;
	background-color: rgba(234, 236, 238, 1);
	padding-left: 10px;
}
.rule-time-line-item {
	font-size: 16px;
	font-weight: 400;
	height: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: rgba(95, 101, 108, 1);
	border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-img {
	width: 154px;
	height: 154px;
	flex-shrink: 0;
}
.content-img-2 {
	width: 128px;
	height: 128px;
	flex-shrink: 0;
}
.content-distribution-img {
	width: 627px;
	height: 536px;
}
.content-desc {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.content-desc-item {
	display: flex;
	gap: 4px;
}
.content-desc-title {
	width: 100px;
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
}
.content-desc-content {
	color: var(--color-main-active);
	font-size: 16px;
	font-weight: 700;
}
.content-desc-content-long {
	color: rgba(95, 101, 108, 1);
	font-weight: 400;
}
.time-line {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding-left: 10px;
	margin-bottom: 20px;
}
.time-line-title {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.time-line-dot {
	width: 10px;
	height: 10px;
}
.time-line-title-text {
	font-size: 14px;
	font-weight: 700;
	color: rgba(95, 101, 108, 1);
	color: var(--base-color);
}
.time-line-desc-title {
	font-size: 16px;
	font-weight: 400;
	color: var(--base-color);
	margin-bottom: 5px;
}
.time-line-desc-text {
	font-size: 14px;
	font-weight: 400;
	color: rgba(95, 101, 108, 1);
}
.time-line-dot {
	width: 8px;
	height: 8px;
	background-color: var(--color-main-active);
	border-radius: 50%;
}
.example-card {
	border: 1px solid #ebeef5;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 16px;
	background-color: #fafafa;
}

.content-card-title {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.content-card-title-text {
	font-size: 16px;
	font-weight: 700;
	color: rgba(10, 18, 30, 1);
	margin-right: auto;
}
.content-list-item-box {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.content-list-item-box-2 {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
}
.content-card-title-text-2 {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 10px;
	padding-left: 14px;
	padding-right: 14px;
	margin-bottom: 10px;
	border-radius: 4px;
	/* box-shadow: 0 2px 8px rgba(60, 87, 126, 0.2); */
	box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2);
}
.content-card-title-text-3 {
	max-width: 45%;
	gap: 19px;
}
.content-card-title-text-4 {
	display: flex;
	flex-wrap: wrap;
	width: 45%;
	gap: 10px;
}
.content-card-title-text-5 {
	justify-content: flex-start;
	width: 100%;
}
.content-list-item-button {
	width: 80px;
	height: 25px;
}
.content-card-desc {
	font-size: 14px;
	color: rgba(132, 136, 142, 1);
}
.content-vertical-card-title-box {
	display: flex;
	align-items: center;
	gap: 8px;
}
.content-vertical-card-title-img {
	width: 16px;
	height: 13px;
}
.content-vertical-card-title {
	font-size: 16px;
	font-weight: 700;
	color: rgba(95, 101, 108, 1);
}
.content-vertical-card-declaration {
	/* width: 100%; */
	/* height: 42px; */
	line-height: 42px;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 15px;
	font-size: 14px;
	font-weight: 400;
	color: rgba(95, 101, 108, 1);
	background-color: rgba(231, 243, 255, 1);
}
.content-vertical-card-desc-text {
	padding-left: 10px;
	font-size: 16px;
	font-weight: 400;
	color: rgba(132, 136, 142, 1);
}
.content-vertical-card-desc-emphasize {
	line-height: 24px;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-main-active);
}
</style>
