<template>
	<div class="introduction-wrap">
		<div class="left">
			<div class="box1">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">基本信息</div>

					<div class="header-right">
						<div class="icon">
							<img src="../assets/icons/header-right-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="../assets/icons/header-right-icon2.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-main">
					<div class="box1-main-left">
						<img :src="basicInfo.img" alt="" />
					</div>
					<div class="box1-main-right">
						<div class="item">
							<div class="item-left">{{ "政令全称：" }}</div>
							<div class="item-right">{{ basicInfo.name }}</div>
						</div>
						<div class="item">
							<div class="item-left">{{ "英文全称：" }}</div>
							<div class="item-right text" v-if="basicInfo.eName?.length < 60">
								{{ basicInfo.eName }}
							</div>
							<el-popover v-else effect="dark" :width="500" :content="basicInfo.eName" placement="top-start">
								<template #reference>
									<div class="item-right text">
										{{ basicInfo.eName }}
									</div>
								</template>
							</el-popover>
						</div>
						<div class="item">
							<div class="item-left">{{ "相关领域：" }}</div>
							<div class="item-right tag-box">
								<div class="tag" v-for="(area, index) in basicInfo.areaList" :key="index">
									{{ area.industryName }}
								</div>
							</div>
						</div>
						<div class="item">
							<div class="item-left">{{ "签署时间：" }}</div>
							<div class="item-right text">{{ basicInfo.signTime }}</div>
						</div>
						<div class="item">
							<div class="item-left">{{ "发布机构：" }}</div>
							<div class="item-right text">
								{{ basicInfo.proposeOrgName }}
							</div>
						</div>
						<div class="item">
							<div class="item-left">{{ "政令编号：" }}</div>
							<div class="item-right text">
								{{ basicInfo.bh }}
							</div>
						</div>
						<div class="item">
							<div class="item-left">{{ "执行期限：" }}</div>
							<div class="item-right text">
								{{ basicInfo.deadline + " 天" }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box2">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">主要指令</div>
					<div class="header-right">
						<div class="icon">
							<img src="../assets/icons/header-right-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="../assets/icons/header-right-icon2.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box2-main">
					<el-empty v-if="!curmajorList.length" description="暂无数据" :image-size="100" />
					<div class="box2-item" v-for="(item, index) in curmajorList" :key="index">
						<div class="id">{{ index + 1 }}</div>
						<div class="title">{{ item.content }}</div>
						<!-- <div class="open">
							<img src="./assets/images/open-icon.png" alt="" />
						</div> -->
					</div>
				</div>
				<div class="box2-footer">
					<div class="box2-footer-left">{{ `共 ${majorListNum} 项` }}</div>
					<div class="box2-footer-right">
						<el-pagination
							@current-change="handleCurrentChange"
							:page-size="5"
							background
							layout="prev, pager, next"
							:total="majorListNum"
						/>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="box3">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">发布机构</div>
					<div class="header-right">
						<div class="icon">
							<img src="../assets/icons/header-right-icon1.png" alt="" />
						</div>
						<div class="icon">
							<img src="../assets/icons/header-right-icon2.png" alt="" />
						</div>
					</div>
				</div>
				<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 class="more">
							<div class="text">{{ "查看官网" }}</div>
							<div class="icon">
								<img src="./assets/images/open-icon.png" alt="" />
							</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>
				<div class="box3-bottom">
					<div class="box3-bottom-header">
						<div class="header-icon">
							<img src="./assets/images/box3-bottom-header-icon.png" alt="" />
						</div>
						<div class="header-title">{{ "机构动态" }}</div>
					</div>
					<div class="box3-bottom-main">
						<el-timeline style="max-width: 500px">
							<el-timeline-item
								:timestamp="item.newsDate"
								placement="top"
								v-for="(item, index) in eventList"
								:key="index"
							>
								<div class="timeline-content">
									{{ item.newsContent }}
								</div>
							</el-timeline-item>
						</el-timeline>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import box1Img from "./assets/images/box1-img.png";
import Box3Logo from "./assets/images/box3-img.png";
import {
	getDecreeBasicInfo,
	getDecreeMainContent,
	getDecreeOrganization,
	getDecreeIssueOrganization
} from "@/api/decree/introduction";

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

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

// 基本信息
const basicInfo = ref({
	img: "",
	name: "",
	eName: "",
	areaList: [],
	signTime: "",
	signPeople: "",
	bh: "",
	deadline: ""
});

const handleGetBasicInfo = async () => {
	const params = {
		id: decreeId.value
	};
	try {
		const res = await getDecreeBasicInfo(params);
		console.log("基本信息", res);
		if (res.code === 200 && res.data) {
			basicInfo.value.img = res.data.picture;
			basicInfo.value.name = res.data.name;
			basicInfo.value.eName = res.data.ename;
			basicInfo.value.areaList = res.data.industryList;
			basicInfo.value.signTime = res.data.postDate;
			basicInfo.value.bh = res.data.order;
			basicInfo.value.deadline = res.data.deadline;
			basicInfo.value.proposeOrgName = res.data.proposeOrgName;
		}
	} catch (error) {
		console.error("基本信息error", error);
	}
};
handleGetBasicInfo();

// 主要指令
const majorList = ref([
	// {
	// 	id: 1,
	// 	content: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
	// }
]);
const currentPage = ref(1);
const pageSize = ref(5);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
};
const curmajorList = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;
	const endIndex = startIndex + pageSize.value;
	return majorList.value.slice(startIndex, endIndex);
});

const majorListNum = ref(0);
const handleMajorList = async () => {
	const params = {
		currentPage: 0,
		pageSize: 999999,
		id: decreeId.value
	};
	try {
		const res = await getDecreeMainContent(params);
		console.log("主要指令", res);
		if (res.code === 200 && res.data) {
			majorList.value = res.data.content;
			majorListNum.value = res.data.numberOfElements;
		} else {
			majorList.value = [];
			majorListNum.value = 0;
		}
	} catch (error) {}
};
handleMajorList();

// 发布机构

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 eventList = ref([
	// {
	// 	time: "2025-07-31",
	// 	title: "美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
	// },
	// {
	// 	time: "2025-07-25",
	// 	title: "美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。"
	// },
	// {
	// 	time: "2025-07-21",
	// 	title: "美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口"
	// }
]);

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;
			eventList.value = res.data.newsList;
			box3TopBottomData.value = res.data.personList;
		}
	} catch (error) {
		console.error("执行机构error", error);
		box3TopTopData.value = {
			id: "",
			logo: "",
			name: "",
			eName: ""
		};
		eventList.value = [];
	}
};

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

<style lang="scss" scoped>
.introduction-wrap {
	display: flex;
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			margin-left: 14px;
			margin-top: 14px;
			height: 26px;
			line-height: 26px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
		}
		.header-btn-box {
			position: absolute;
			z-index: 9999;
			width: 325px;
			height: 64px;
			top: 14px;
			right: 82px;
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;
			gap: 5px 8px;
			white-space: nowrap;
			overflow: hidden;
			overflow-y: auto;
			padding-right: 5px;
			.btn {
				min-width: min-content;
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 28px;
				cursor: pointer;
			}
			.btnActive {
				border: 1px solid var(--color-main-active);
				color: var(--color-main-active);
				background: rgba(231, 243, 255, 1);
			}
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			height: 28px;
			display: flex;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.left {
		width: 1064px;
		.box1 {
			margin-top: 16px;
			width: 1064px;
			height: 414px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box1-main {
				display: flex;
				.box1-main-left {
					width: 395px;
					height: 332px;
					margin-left: 42px;
					img {
						width: 100%;
						// height: 100%;
					}
				}
				.box1-main-right {
					width: 590px;
					margin-left: 20px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					.item {
						height: 30px;
						display: flex;
						margin-bottom: 17px;
						.item-left {
							width: 100px;
						}
						.item-right {
							width: 470px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.tag-box {
							display: flex;
							.tag {
								height: 24px;
								line-height: 24px;
								color: rgba(22, 119, 255, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								box-sizing: border-box;
								border: 1px solid rgba(186, 224, 255, 1);
								border-radius: 4px;
								background: rgba(230, 244, 255, 1);
								padding: 0px 8px;
								margin-right: 8px;
							}
						}
						.text {
							font-weight: normal !important;
						}
					}
				}
			}
		}
		.box2 {
			margin-top: 16px;
			width: 1064px;
			height: 415px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.box2-main {
				margin-left: 22px;
				height: 280px;
				overflow: hidden;
				overflow-y: auto;
				.box2-item {
					width: 1015px;
					// height: 48px;
					margin-bottom: 8px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 2px;
					background: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					padding: 12px 0;
					&:nth-child(2n-1) {
						background: rgba(247, 248, 249, 1);
					}
					.id {
						margin-left: 15px;
						width: 24px;
						height: 24px;
						text-align: center;
						line-height: 24px;
						border-radius: 12px;
						background: #e7f3ff;
						color: #0a57a6;
					}
					.title {
						width: 1020px;
						line-height: 24px;
						margin-left: 10px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// white-space: nowrap;
					}
					.open {
						width: 16px;
						height: 16px;
						margin-top: 16px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.box2-footer {
				margin: 20px 22px;
				display: flex;
				justify-content: space-between;
				.box2-footer-left {
					height: 20px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
	}
	.right {
		width: 520px;
		margin-left: 16px;
		.box3 {
			margin-top: 16px;
			width: 520px;
			height: 845px;
			border-radius: 10px;
			box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
			background: rgba(255, 255, 255, 1);
			.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;
								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;
				}
			}
		}
	}
	.report {
		padding: 10px 150px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999999;
		width: 100%;
		height: 100%;
		background: #f7f8f9;
		.report-close {
			position: absolute;
			top: 20px;
			right: 230px;
			width: 20px;
			height: 20px;
			cursor: pointer;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.report-header {
			width: 100%;
			height: 50px;
			color: rgba(59, 65, 75, 1);
			font-family: Microsoft YaHei;
			font-style: Bold;
			font-size: 20px;
			font-weight: 700;
			line-height: 50px;
			letter-spacing: 0px;
			text-align: left;
			padding-left: 30px;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
		}
		.report-main {
			display: flex;
			height: calc(100% - 100px);
			justify-content: space-between;
			.left {
				width: 800px;
				.noContent {
					height: 100px;
					line-height: 100px;
					text-align: center;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 20px;
					font-weight: 400;
				}
			}
			.right {
				width: 800px;
				.noContent {
					height: 100px;
					line-height: 100px;
					text-align: center;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-style: Regular;
					font-size: 20px;
					font-weight: 400;
				}
			}
		}
	}
}
</style>