<template>
	<div class="detail-wrap">
		<div class="left box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">最新动态</div>
				<div class="check-box"><el-checkbox v-model="isCrelated" label="只看涉华动态" /></div>
				<div class="header-btn-box">
					<div class="btn" :class="{ btnActive: dynamicsName === '机构动态' }" @click="handleClickBtn('机构动态')">
						{{ "机构动态" }}
					</div>
					<div class="btn" :class="{ btnActive: dynamicsName === '主官动态' }" @click="handleClickBtn('主官动态')">
						{{ "主官动态" }}
					</div>
				</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="left-main">
				<div class="left-main-item" v-for="(item, index) in curList" :key="index">
					<div class="line" v-if="index !== curList.length - 1"></div>
					<div class="time">{{ item.time }}</div>
					<div class="icon">
						<img :src="item.logoUrl ? item.logoUrl : DefaultIcon2" alt="" />
					</div>
					<div class="info">
						<div class="header">
							<div class="title">{{ item.title }}</div>
							<div
								class="type"
								v-if="item.type"
								:class="{
									type1: item.type.status === 2,
									type2: item.type.status === 3,
									type3: item.type.status === 4
								}"
							>
								{{ item.type.name }}
							</div>
						</div>
						<div class="content">{{ item.content }}</div>
						<div class="tag-box">
							<div class="tag" v-for="(val, idx) in item.industryList" :key="idx">{{ val }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="left-footer">
				<div class="info">
					{{ `共有${totalNum}项动态` }}
				</div>
				<div class="page-box">
					<el-pagination
						background
						layout="prev, pager, next"
						@current-change="handleCurrentChange"
						:pageSize="pageSize"
						:current-page="currentPage"
						:total="totalNum"
					/>
				</div>
			</div>
		</div>
		<div class="right box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">基本信息</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="right-main">
				<div class="img-box">
					<img :src="basicInfo.image" alt="" />
				</div>
				<div class="info-box">
					<div class="info-item">
						<div class="info-item-left">{{ "成立时间：" }}</div>
						<div class="info-item-right">{{ basicInfo.shijian }}</div>
					</div>
					<div class="info-item">
						<div class="info-item-left">{{ "总部地址：" }}</div>
						<div class="info-item-right">{{ basicInfo.dizhi }}</div>
					</div>
					<div class="info-item">
						<div class="info-item-left">{{ "主要职责：" }}</div>
						<div class="info-item-right">{{ basicInfo.zhize }}</div>
					</div>
					<div class="info-item">
						<div class="info-item-left">{{ "下属机构：" }}</div>
						<el-popover
							v-if="basicInfo.xiashujigou.length > 72"
							effect="dark"
							:width="400"
							:content="basicInfo.xiashujigou"
							placement="top"
						>
							<template #reference>
								<div class="info-item-right">{{ basicInfo.xiashujigou }}</div>
							</template>
						</el-popover>
						<div v-else class="info-item-right">{{ basicInfo.xiashujigou }}</div>
					</div>
					<div class="info-item">
						<div class="info-item-left">{{ "制裁手段：" }}</div>
						<div class="info-item-right">{{ basicInfo.zhicaishouduan }}</div>
					</div>
				</div>
				<div class="user-box">
					<div class="user-header">
						{{ "关键人物：" }}
					</div>
					<div class="user-content">
						<div class="user-item" v-for="(item, index) in keyUser" :key="index">
							<div class="user-item-left">
								<img :src="item.avatarUrl ? item.avatarUrl : DefaultIcon1" alt="" />
							</div>
							<div class="user-item-right">
								<div class="name">{{ item.name }}</div>
								<div class="position">{{ item.position }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted,watch } from "vue";
import { useRoute } from "vue-router";

import Img from "./assets/images/img.png";
import User1 from "./assets/images/user1.png";
import User2 from "./assets/images/user2.png";
import User3 from "./assets/images/user3.png";
import User4 from "./assets/images/user4.png";
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import { getGovOrgBasicInfo, getGovOrgLatestDynamics, getGovOrgKeyPerson } from "@/api/institution/index";

const route = useRoute();

// 基本信息
const basicInfo = ref({
	image: Img,
	shijian: "1948年",
	dizhi: "华盛顿特区宪法大道1401号赫伯特·C·胡佛大楼 ",
	zhize: "国际贸易、进出口管制、经济数据统计及专利商标管理",
	xiashujigou: "工业与安全局、国际贸易管理局、专利商标局等",
	zhicaishouduan: "实体清单、军事最终用户清单、​​“301条款”关税、​​“232条款”关税、特别指定国民清单"
});
const handleGetBasicInfo = async () => {
	const params = {
		id: route.query.id
	};
	try {
		const res = await getGovOrgBasicInfo(params);
		console.log("基本信息", res);
		if (res.code === 200 && res.data) {
			basicInfo.value.image = res.data.logoUrl;
			basicInfo.value.shijian = res.data.establishmentDate;
			basicInfo.value.dizhi = res.data.address;
			basicInfo.value.zhize = res.data.orgIntroduction;
			basicInfo.value.xiashujigou = res.data.branchOrglist.toString();
			basicInfo.value.zhicaishouduan = res.data.taglist.toString();
		}
	} catch (error) {}
};

// 关键人物
const keyUser = ref([
	// {
	// 	name: "霍华德·卢特尼克",
	// 	avatarUrl: User1,
	// 	position: "部长"
	// },
	// {
	// 	name: "保罗·达巴尔",
	// 	avatarUrl: User2,
	// 	position: "副部长"
	// },
]);
const handleGetKeyUser = async () => {
	const params = {
		orgId: route.query.id
	};
	try {
		const res = await getGovOrgKeyPerson(params);
		console.log("关键人物", res);
		keyUser.value = res.data;
	} catch (error) {}
};
handleGetKeyUser();
// const curList = ref([
// 	{
// 		title: "美国商务部：宣布对华全面加征100%关税",
// 		time: "2025 10月10日",
// 		content:
// 			"特朗普宣布自11月1日起对所有中国进口商品加征100%额外关税，叠加现有关税后总水平可达130%或更高。同时宣布将对“所有关键美国制造软件”实施严格的出口管制。",
// 		type: {
// 			name: "行政令",
// 			status: 2
// 		},
// 		tagList: ["人工智能"]
// 	},
// 	{
// 		title: "美国商务部：BIS更新“实体清单”",
// 		time: "2025 10月4日",
// 		content:
// 			"美国商务部工业与安全局公布对中国半导体出口管制措施新规则，将140家中国半导体公司列入“实体清单”，分别是136家中国实体和4家海外关联企业。",
// 		type: {
// 			name: "实体清单",
// 			status: 4
// 		},
// 		tagList: ["集成电路"]
// 	},
// 	{
// 		title: "美国商务部：​出台“50%穿透规则”（关联方规则）",
// 		time: "2025 9月29日",
// 		content:
// 			"规定凡被列入“实体清单”或“军事最终用户清单”的企业，其直接或间接持股超过50%的子公司将自动受到同等出口管制限制。此规则极大地扩大了制裁范围，且未设过渡期。",
// 		type: {
// 			name: "行政令",
// 			status: 2
// 		},
// 		tagList: ["生物科技"]
// 	},
// 	{
// 		title: "美国商务部：对华港口设备加征高额关税",
// 		time: "2025 9月21日",
// 		content:
// 			"美国贸易代表办公室（USTR）公告，作为“301条款”行动的一部分，对特定中国制造的港口设备加征额外关税，其中船到岸起重机（STS）和集装箱底盘车及零部件均加征100%关税，于11月9日生效。",
// 		type: {
// 			name: "301调查",
// 			status: 3
// 		},
// 		tagList: ["先进制造"]
// 	},
// 	{
// 		title: "美国商务部：BIS更新“实体清单”",
// 		time: "2025 9月15日",
// 		content:
// 			"美国商务部工业和安全局宣布更新《出口管理条例》（EAR），并发布两项最终规则，将25家中国企业及其相关实体列入实体清单。",
// 		type: {
// 			name: "实体清单",
// 			status: 4
// 		},
// 		tagList: ["集成电路"]
// 	},
// 	{
// 		title: "美国商务部：BIS更新“实体清单”",
// 		time: "2025 9月15日",
// 		content:
// 			"美国商务部工业和安全局宣布更新《出口管理条例》（EAR），并发布两项最终规则，将25家中国企业及其相关实体列入实体清单。",
// 		type: {
// 			name: "实体清单",
// 			status: 4
// 		},
// 		tagList: ["集成电路"]
// 	},

// ]);
const dynamicsName = ref("机构动态");
const isCrelated = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
};
const latestDynamicsList = ref([]);
const totalNum = ref(0);
const curList = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;
	const endIndex = startIndex + pageSize.value;
	return latestDynamicsList.value.slice(startIndex, endIndex);
});
const handleClickBtn = name => {
	dynamicsName.value = name;
	handleGetLatestDynamics()
};

const handleGetLatestDynamics = async () => {
	const params = {
		orgId: route.query.id,
		cRelated: isCrelated.value ? "Y" : "N",
		dynamicsType: dynamicsName.value === "机构动态" ? "org" : "person",
		currentPage: 1,
		pageSize: 9999999
	};
	try {
		const res = await getGovOrgLatestDynamics(params);
		console.log("最新动态", res);
		if (res.code === 200 && res.data) {
			latestDynamicsList.value = res.data.content;
			totalNum.value = res.data.totalElements;
		}
	} catch (error) {}
};

watch(
	() => isCrelated.value,
	val => {
		handleGetLatestDynamics()
	}

)

onMounted(() => {
	handleGetLatestDynamics();
	handleGetBasicInfo();
});
</script>

<style lang="scss" scoped>
.detail-wrap {
	display: flex;
	gap: 16px;
	padding-bottom: 30px;
	.box {
		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);
	}
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 20px;
			width: 8px;
			height: 16px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			margin-left: 14px;
			margin-top: 16px;
			height: 24px;
			line-height: 24px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 18px;
			font-weight: 700;
		}
		.check-box {
			position: absolute;
			top: 15px;
			right: 275px;
		}
		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 91px;
			display: flex;
			.btn {
				margin-left: 8px;
				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);
				text-align: center;
				line-height: 28px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				cursor: pointer;
			}
			.btnActive {
				border: 1px solid var(--color-main-active);
				background: rgba(246, 250, 255, 1);
				color: var(--color-main-active);
			}
		}
		.header-info {
			height: 22px;
			position: absolute;
			right: 84px;
			top: 17px;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 3px;
				width: 14px;
				height: 14px;
				margin-right: 8px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				height: 22px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
			}
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.left {
		width: 1064px;
		max-height: 1683px;
		.left-main {
			border-top: 1px solid rgba(234, 236, 238, 1);
			max-height: 1551px;
			min-height: 660px;
			.left-main-item {
				display: flex;
				margin-top: 16px;
				gap: 18px;
				margin-left: 10px;
				height: 130px;
				position: relative;
				.line {
					background: #e6e7e8;
					width: 2px;
					height: 122px;
					position: absolute;
					top: 24px;
					left: 104px;
				}
				.time {
					width: 75px;
					color: rgba(5, 95, 194, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 1px;
					text-align: right;
				}
				.icon {
					width: 24px;
					height: 24px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.info {
					width: 900px;
					.header {
						height: 26px;
						display: flex;
						justify-content: space-between;
						.title {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}
						.type {
							height: 28px;
							padding: 0 8px;
							border-radius: 20px;
							line-height: 28px;
						}
						.type1 {
							background: rgba(232, 189, 11, 0.1);
							color: rgba(232, 189, 11, 1);
						}
						.type2 {
							background: rgba(255, 149, 77, 0.1);
							color: rgba(255, 149, 77, 1);
						}
						.type3 {
							background: rgba(206, 79, 81, 0.1);
							color: rgba(206, 79, 81, 1);
						}
					}
					.content {
						height: 100px;
						overflow: hidden;
						margin-top: 8px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 4; /* 控制显示的行数 */
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.tag-box {
						margin-top: 9px;
						display: flex;
						gap: 8px;
						.tag {
							height: 28px;
							padding: 0 8px;
							line-height: 28px;
							border-radius: 4px;
							background: rgba(231, 243, 255, 1);
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
						}
					}
				}
			}
		}
		.left-footer {
			margin-top: 10px;
			height: 65px;
			border-top: 1px solid rgba(234, 236, 238, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
		}
	}
	.right {
		width: 520px;
		height: 800px;
		.right-main {
			width: 469px;
			height: 728px;
			margin: 3px auto;
			.img-box {
				width: 469px;
				height: 240px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.info-box {
				margin-top: 14px;
				padding-bottom: 28px;
				border-bottom: 1px solid rgba(234, 236, 238, 1);
				.info-item {
					display: flex;
					margin-top: 12px;
					.info-item-left {
						width: 88px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 1px;
						text-align: left;
					}
					.info-item-right {
						width: 356px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						max-height: 72px;
						overflow: hidden;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}
			.user-box {
				padding-top: 19px;
				.user-header {
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 1px;
					text-align: left;
				}
				.user-content {
					height: 120px;
					margin-top: 19px;
					display: flex;
					flex-wrap: wrap;
					gap: 16px 20px;
					justify-content: flex-start;
					overflow: hidden;
					overflow-y: auto;
					.user-item {
						width: 200px;
						height: 49px;
						display: flex;
						gap: 8px;
						.user-item-left {
							width: 48px;
							height: 48px;
							border-radius: 24px;
							overflow: hidden;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.user-item-right {
							.name {
								width: 142px;

								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.position {
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}
				}
			}
		}
	}
}
</style>