<template>
	<div class="introduction-wrap">
		<div class="left">
			<div class="box1">
				<AnalysisBox title="主要指令" :showAllBtn="false">
					<div class="analysis-box">
						<div class="analysis-top">
							<el-select v-model="areaType" :empty-values="[null, undefined]" style="width: 200px;">
								<el-option label="全部领域" value="" />
								<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
							<div style="flex: auto; width: 20px;"></div>
							<el-switch v-model="highlightEntities" />
							<div style="margin-left: 6px;">高亮实体</div>
							<div class="select-input">
								<el-input v-model="commandWord" @keyup.enter="handleSearch" style="width: 100%; height: 100%;" :suffix-icon="Search" placeholder="指令搜索" />
							</div>
						</div>
						<div class="analysis-content">
							  <el-scrollbar height="100%" always>
									<!-- 遍历文档章节 -->
									<div v-for="(section, index) in majorList" :key="index" class="section">
										<div class="section-header">
											<div class="section-title">({{ simpleNumToChinese(index+1) }}) {{ section.title }}</div>
											<div class="section-icon">
												<img src="./assets/images/open-icon.png" alt="" />
											</div>
										</div>
										<!-- 渲染一级列表 -->
										<div class="numbered-list">
											<div v-for="(item, itemIndex) in section.content" :key="itemIndex" class="list-item">
												<div class="list-item-dot">{{itemIndex+1}}.</div>
												<div class="list-item-word">{{ item.text }}</div>

												<!-- 渲染二级列表 -->
												<div v-if="item.children" class="sub-list">
													<div v-for="(subItem, subIndex) in item.children" :key="subIndex" class="sub-item">
														<div class="sub-item-dot">({{subIndex+1}})</div>
														<div class="sub-item-word">{{ subItem.text }}</div>

														<!-- 渲染三级列表 -->
														<div v-if="subItem.children" class="sub-sub-list">
															<div v-for="(subSubItem, subSubIndex) in subItem.children" :key="subSubIndex" class="sub-sub-item">
																<div class="sub-sub-item-dot">{{ALPHABET[subSubIndex%26]}}.</div>
																<div class="sub-sub-item-word">{{ subSubItem.text }}</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</el-scrollbar>
						</div>
					</div>
					
				</AnalysisBox>
			</div>
		</div>
		<div class="right">
			<div class="box3">
				<AnalysisBox title="发布机构" :showAllBtn="false">
					<div class="box3-top">
						<div class="box3-top-top" @click="handleToInstitution(box3TopTopData)">
							<div class="left">
								<img :src="box3TopTopData.logo ? box3TopTopData.logo : DefaultIcon2" alt="" />
							</div>
							<div class="right">
								<div class="name">{{ box3TopTopData.name + " >" }}</div>
								<div class="ename">{{ box3TopTopData.eName }}</div>
							</div>
						</div>
						<div class="box3-top-bottom">
							<div class="box3-top-bottom-header">
								<div class="icon">
									<img src="./assets/images/box3-icon1.png" alt="" />
								</div>
								<div class="text">{{ "关键人物" }}</div>
							</div>
							<div class="box3-top-bottom-main">
								<div class="box3-top-bottom-item" v-for="(item, index) in box3TopBottomData" :key="index">
									<div class="box3-top-bottom-item-left">
										<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
									</div>
									<div class="box3-top-bottom-item-right">
										<div class="name">{{ item.name }}</div>
										<div class="position">{{ item.job }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="box4">
				<AnalysisBox title="相关实体" :showAllBtn="false">
					<div class="left-bottom-main">
						<div v-for="item in coopRelatedData" :key="item.id" class="main-box">
							<div class="icon">
								<img style="width: 100%; height: 100%;" :src="item.img || defaultCom" alt="" />
							</div>
							<div class="name one-line-ellipsis">{{ item.ENTITYNAME }}</div>
							<div class="type">{{ item.type }}</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import { Search } from '@element-plus/icons-vue'
import { getDecreeIssueOrganization } from "@/api/decree/introduction";
import { getDecreehylyList } from "@/api/decree/home";

import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import defaultCom from "@/views/coopRestriction/assets/images/default-icon2.png"

const route = useRoute();
const decreeId = ref(route.query.id);

// 指令搜索
const commandWord = ref("");
const handleSearch = () => {

};

// 科技领域
const areaType = ref("");
const areaList = ref([]);
const handleGetAreaList = async () => {
	try {
		const res = await getDecreehylyList();
		console.log("行业领域列表", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data;
		}
	} catch (error) { }
};

// 主要指令
const highlightEntities = ref(false);
const majorList = ref([
	{
		title: "建立美国人工智能出口计划",
		content: [
			{
				text: '在本命令发布之日起 90 天内，商务部长应与国务卿及科学技术政策办公室（OSTP）主任协商，建立并实施美国人工智能出口计划（计划），以支持美国全栈人工智能出口软件包的开发和部署。'
			},
			{
				text: '商务部长应公开征集由行业主导的联盟提案，以纳入该计划。公开征集要求每项提案必须：',
				children: [
					{
						text: '包含一套全栈人工智能技术包，涵盖：',
						children: [
							{
								text: 'AI 优化的计算机硬件（如芯片、服务器和加速器）、数据中心存储、云服务和网络，以及这些设备是否以及在多大程度上在美国制造的描述；'
							},
							{
								text: '数据管道和标签系统；'
							},
							{
								text: '人工智能模型与系统；'
							},
							{
								text: '采取措施保障人工智能模型和系统的安全性和网络安全；'
							},
							{
								text: '针对特定用例的人工智能应用（如软件工程、教育、医疗保健、农业或交通运输）；'
							}
						]
					},
					{
						text: '确定出口参与者的具体目标国家或区域集团；'
					},
					{
						text: '描述一个业务和运营模型，以在高层次上说明哪些实体将建设、拥有和运营数据中心及相关基础设施；'
					},
					{
						text: '联邦激励和支持机制请求的细节；'
					},
					{
						text: '遵守所有相关的美国出口管制制度、出境投资法规和终端用户政策，包括美国法典第 50 编第 58 章及商务部工业与安全局的相关指导。'
					}
				]
			},
			{
				text: '商务部要求提案须在公开征集后不超过 90 天内提交，并应滚动考虑提案纳入项目。'
			},
			{
				text: '商务部长应与国务卿、国防部长、能源部长及 OSTP 主任协商，评估提交的纳入计划提案。商务部长与国务卿、国防部长、能源部长及 OSTP 主任协商后选定的提案，将被指定为优先 AI 出口包，并通过优先访问本命令第 4 节指定的工具予以支持，符合适用法律。'
			}
		]
	},
	{
		title: "动员联邦融资工具",
		content: [
			{
				text: '经济外交行动小组（EDAG），于 2024 年 6 月 21 日总统备忘录中成立，由国务卿主持，并与商务部长和美国贸易代表协商，并根据 2019 年《通过外交倡导美国企业法案》（公共法 116-94 J 部分第七章）第 708 条（CABDA）所述，应协调联邦融资工具的动员，以支持优先的人工智能出口方案。'
			},
			{
				text: '我将根据 CABDA α 第 708 (c) (3) 条授权小企业管理局局长和 OSTP 主任任命各自执行部门和机构的高级官员担任 EDAG 。'
			}
		]
	}
]);
const ALPHABET = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
/**
 * 极简版数字转中文（支持 0-99 整数）
 * @param {Number} num - 要转换的数字（0-99 之间的整数）
 * @returns {String} 中文大写结果
 */
const simpleNumToChinese = (num) => {
  // 1. 基础校验：只处理 0-99 的整数
  if (!Number.isInteger(num) || num < 0 || num > 99) {
    return '仅支持 0-99 之间的整数';
  }
  // 2. 定义基础字符
  const singleChars = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
  const tenChar = '十';
  // 3. 核心转换逻辑
  if (num < 10) {
    // 0-9 直接返回对应字符
    return singleChars[num];
  } else if (num === 10) {
    // 10 特殊处理
    return tenChar;
  } else if (num < 20) {
    // 11-19：十 + 个位（如十一、十九）
    return tenChar + singleChars[num - 10];
  } else {
    // 20-99：十位 + 十 + 个位（个位为0则省略，如二十、二十九）
    const ten = Math.floor(num / 10); // 十位数字
    const unit = num % 10; // 个位数字
    return singleChars[ten] + tenChar + (unit === 0 ? '' : singleChars[unit]);
  }
}

// 相关实体
const coopRelatedData = ref(
	Array.from({ length: 8 }, (_, index) => ({ id: String(index + 1),  img: "", ENTITYNAME: "ENTITYNAME", type: "type" }))
);
// const getcoopRelatedData = async () => {
// 	if (!route.query.id) return;
// 	try {
// 		const res = await getCoopRestrictionRelated({
// 			limitId: route.query.id
// 		});
// 		if (res && res.code === 200) {
// 			coopRelatedData.value = res.data || {};
// 		}
// 	} catch (error) {
// 		console.error("获取合作限制相关实体数据失败:", error);
// 	} 
// };

// 发布机构
const box3TopTopData = ref({
	id: "",
	logo: "",
	name: "",
	eName: ""
});
const box3TopBottomData = ref([]);
// 跳转行政机构主页
const handleToInstitution = item => {
	const curRoute = router.resolve({
		path: "/institution",
		query: {
			id: item.id
		}
	});
	window.open(curRoute.href, "_blank");
};

const handleGetOrgnization = async () => {
	const params = {
		id: decreeId.value
	};
	try {
		const res = await getDecreeIssueOrganization(params);
		console.log("发布机构", res);
		if (res.code === 200 && res.data) {
			box3TopTopData.value.id = res.data.id;
			box3TopTopData.value.logo = res.data.image;
			box3TopTopData.value.name = res.data.name;
			box3TopTopData.value.eName = res.data.ename;
			box3TopBottomData.value = res.data.personList;

		}
	} catch (error) {
		console.error("执行机构error", error);
		box3TopTopData.value = {
			id: "",
			logo: "",
			name: "",
			eName: ""

		};
	}
};

onMounted(() => {
	handleGetOrgnization();
	handleGetAreaList();
});
</script>

<style lang="scss" scoped>
.introduction-wrap {
	display: flex;

	.left {
		width: 1064px;
		margin-top: 16px;

		.box1 {
			height: 100%;
			.analysis-box {
				height: 100%;
				display: flex;
				flex-direction: column;
			}

			.analysis-top {
				font-family: var(--font-family-base);
				padding:  0 20px;
				color: var(--text-primary-65-color);
				height: 60px;
				display: flex;
				align-items: center;
				.select-input {
					background-color: var(--el-fill-color-blank);
					border-radius: var(--el-border-radius-base);
					box-shadow: 0 0 0 1px var(--el-border-color) inset;
					box-sizing: border-box;
					margin-left: 20px;
					width: 200px;
					height: 32px;
				}
			}

			.analysis-content {
				height: 20px;
				flex: auto;

				:deep(.el-scrollbar__bar.is-vertical) {
					right: 0px;
					width: 4px;
					background: transparent;
					border-radius: 2px;
					&>div {
						background: #c5c7c9;
						opacity: 1;
					}
					&>div:hover {
						background: #505357;
					}
				}
				.section {
					padding:  0 20px;

					.section-header {
						display: flex;
						height: 48px;
						align-items: center;
						background-color: rgba(247, 248, 249, 1);
						border-radius: 2px;
						padding: 0 16px;

						.section-title {
							font-size: 18px;
							font-weight: 600;
							letter-spacing: 1px;
							width: 20px;
							flex: auto;
						}

						.section-icon {
							width: 16px;
							height: 16px;
							margin-left: 16px;

							img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.numbered-list {
						margin-bottom: 12px;
						font-size: 16px;
						line-height: 1.7;
						color: #374151;
						.list-item {
							position: relative;
							.list-item-dot {
								position: absolute;
								left: 50px;
								top: 10px;
							}
							.list-item-word {
								border-bottom: 1px solid rgba(234, 236, 238, 1);
								padding: 10px 16px 10px 68px;
							}
						}
					}
					.sub-list {
						.sub-item {
							position: relative;
							.sub-item-dot {
								position: absolute;
								left: 66px;
								top: 10px;
							}
							.sub-item-word {
								border-bottom: 1px solid rgba(234, 236, 238, 1);
								padding: 10px 16px 10px 90px;
							}
						}
					}
					.sub-sub-list {
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						.sub-sub-item {
							position: relative;
							.sub-sub-item-dot {
								position: absolute;
								left: 82px;
								top: 6px;
							}
							.sub-sub-item-word {
								padding: 6px 16px 6px 100px;
							}
						}

					}
				}
			}
		}
	}

	.right {
		width: 520px;
		margin-left: 16px;

		.box3 {
			margin-top: 16px;
			width: 520px;

			.box3-top {
				margin-top: 2px;
				// height: 241px;
				border-bottom: 1px solid rgba(234, 236, 238, 1);

				.box3-top-top {
					width: 473px;
					height: 88px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 4px;
					background: rgba(247, 248, 249, 1);
					display: flex;
					align-items: center;
					margin: 0 auto;
					position: relative;
					cursor: pointer;

					.more {
						position: absolute;
						right: 17px;
						top: 17px;
						display: flex;
						gap: 3px;

						.text {
							height: 16px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 16px;
						}

						.icon {
							width: 16px;
							height: 16px;

							img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.left {
						width: 64px;
						height: 64px;
						margin-left: 17px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						width: 370px;
						margin-left: 15px;

						.name {
							height: 26px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}

						.ename {
							margin-top: 6px;
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
						}
					}
				}

				.box3-top-bottom {
					width: 473px;
					height: 193px;
					margin: 0 auto;

					.box3-top-bottom-header {
						height: 40px;
						display: flex;
						padding-top: 14px;
						box-sizing: border-box;
						gap: 12px;

						.icon {
							margin-top: 5px;
							width: 14px;
							height: 14px;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.text {
							width: 100px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-style: Bold;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
					}

					.box3-top-bottom-main {
						margin-top: 2px;
						height: 130px;
						overflow: hidden;
						overflow-y: auto;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.box3-top-bottom-item {
							margin-top: 12px;
							height: 48px;
							width: 200px;
							display: flex;
							justify-content: flex-start;

							.box3-top-bottom-item-left {
								width: 48px;
								height: 48px;
								border-radius: 24px;
								overflow: hidden;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.box3-top-bottom-item-right {
								margin-left: 8px;
								width: 144px;

								.name {
									width: 144px;
									height: 24px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-style: Bold;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.position {
									margin-top: 1px;
									width: 144px;
									height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
						}
					}
				}
			}

			.box3-bottom {
				.box3-bottom-header {
					height: 59px;
					display: flex;

					.header-icon {
						margin-left: 22px;
						margin-top: 27px;
						width: 16px;
						height: 16px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.header-title {
						margin-left: 12px;
						margin-top: 23px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
					}
				}

				.box3-bottom-main {
					width: 510px;
					height: 440px;
					overflow: hidden;
					overflow-y: auto;

					:deep(.el-timeline) {
						padding: 8px 0px 0px 25px !important;
					}

					:deep(.el-timeline-item__node) {
						border: 4px solid var(--color-main-active) !important;
						background-color: #fff;
					}

					:deep(.el-timeline-item) {
						padding-bottom: 12px !important;
					}

					:deep(.el-timeline-item__timestamp) {
						color: var(--color-main-active) !important;
						font-family: Microsoft YaHei !important;
						font-size: 16px !important;
						font-weight: 600 !important;
						padding-top: 0px !important;
					}

					.timeline-content {
						color: var(--text-primary-65-color);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 26px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.box4 {
			margin-top: 16px;
			height: 528px;

			.left-bottom-main {
				padding: 20px 20px 0;
				height: 100%;
				overflow-y: auto;
				.main-box {
					height: 48px;
					border-radius: 50px;
					border: 1px solid rgb(234, 236, 238);
					background-color: rgba(247, 248, 249, 1);
					margin-bottom: 12px;
					padding: 0 15px;
					display: flex;
					align-items: center;
					cursor: pointer;

					.icon {
						width: 24px;
						height: 24px;
						font-size: 0px;
					}
					.name {
						font-size: 16px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
						flex: auto;
						width: 20px;
						margin: 0 10px;
					}
					.type {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);
					}
				}
			}
		}
	}
}
</style>