<!--科技要闻-->
<template>
	<div class="content-wrapper">
		<div class="main-content" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
			<div class="cards-mask">
				<div class="cards-container" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }">
					<div v-for="(card, index) in cardList" :key="index" class="government-card" @click="handleCardClick(card)">
						<div class="card-bg" :style="{ backgroundImage: `url(${card.icon || defaultIcon})` }"></div>
						<div class="card-header">
							<span class="card-title">{{ card.title }}</span>
							<img :src="card.icon || defaultIcon" class="card-icon" alt="" />
						</div>
						<div class="card-body">
							<div v-for="(stat, sIndex) in card.stats" :key="sIndex" class="stat-item">
								<span class="stat-label">{{ stat.label }}</span>
								<span class="stat-value">{{ stat.value }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<img :src="leftBtn" alt="" class="left-btn" @click="prev" :class="{ disabled: currentIndex === 0 }" />
			<img
				:src="rightBtn"
				alt=""
				class="right-btn"
				@click="next"
				:class="{ disabled: currentIndex >= cardList.length - 5 }"
			/>
		</div>
		<div class="main-charts">
			<div class="charts-title">
				<div class="title-left">
					<img :src="icon1" alt="" />
					<span>美对华制裁措施数量趋势</span>
				</div>
				<div class="title-right">
					<el-select
						v-model="fieldValue"
						placeholder="全部领域"
						class="custom-select"
						@change="getUSChinaSanctionTrendData"
					>
						<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<el-select
						v-model="deptValue"
						placeholder="全部部门"
						class="custom-select"
						@change="getUSChinaSanctionTrendData"
					>
						<el-option label="全部部门" value="" />
						<el-option
							v-for="item in departmentList"
							:key="item.departId"
							:label="item.departName"
							:value="item.departId"
						/>
					</el-select>
					<el-select
						v-model="methodValue"
						placeholder="全部制裁手段"
						class="custom-select"
						@change="getUSChinaSanctionTrendData"
					>
						<el-option v-for="item in methodOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>
			<div class="charts-content">
				<div ref="chartRef" class="chart-container"></div>
			</div>
		</div>
		<div class="main-text">
			<div class="text-item">
				<div class="text-item-title">
					<img :src="icon2" alt="" />
					<span>美政府部门打压遏制最新动态</span>
				</div>
				<div class="text-item-content">
					<div v-for="(item, index) in dynamicList" :key="index" class="dynamic-item">
						<img :src="defaultImg" alt="" class="item-icon" />
						<div class="item-right">
							<div class="dynamic-item-header">
								<span class="item-title" @click="handleNewsClick(item)">{{ item.title }}</span>
								<span class="item-date">{{ item.date }} · {{ item.orgName }}</span>
							</div>
							<el-tooltip
								effect="dark"
								:content="item.content"
								popper-class="common-prompt-popper"
								placement="top"
								:show-after="500"
							>
								<div class="dynamic-item-body">
									{{ item.content }}
								</div>
							</el-tooltip>
							<div class="dynamic-item-tags">
								<span v-for="(tag, tIndex) in item.tags" :key="tIndex" class="tag" :class="getTagClass(tag)">
									{{ tag }}
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="text-item">
				<div class="text-item-title">
					<img :src="icon3" alt="" />
					<span>美政府部门联合制裁排行</span>
				</div>
				<div class="text-item-contentOther">
					<div v-for="(rank, index) in rankingList" :key="index" class="ranking-card">
						<div class="ranking-header">
							<div class="header-left">
								<div class="dept-icons">
									<img
										v-for="(dept, dIndex) in rank.depts"
										:key="dIndex"
										:src="dept.icon || defaultImg"
										alt=""
										class="dept-icon"
									/>
								</div>
								<span class="dept-names">{{ rank.depts.map(d => d.name).join(" / ") }}</span>
							</div>
							<div class="header-right">
								<span class="joint-count">{{ rank.count }}次联合制裁</span>
							</div>
						</div>
						<div class="ranking-body">
							<div v-for="(item, iIndex) in rank.items" :key="iIndex" class="ranking-item">
								<div class="item-left">
									<span class="item-type" :class="item.type === '法案' ? 'type-bill' : 'type-order'">{{
										item.type
									}}</span>
									<el-tooltip
										effect="dark"
										:content="item.title"
										popper-class="common-prompt-popper"
										placement="top"
										:show-after="500"
									>
										<span
											class="item-title"
											:class="{ clickable: item.type === '政令' }"
											@click="handleJointRankItemClick(item)"
											>{{ item.title }}</span
										>
									</el-tooltip>
								</div>
								<span class="item-date">{{ item.date }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main-bottom">
			<div class="bottom-item">
				<div class="bottom-item-title">
					<img :src="icon4" alt="" />
					<span>美政府部门对我打压遏制时间线</span>
				</div>
				<div class="bottom-item-select">
					<div class="select-btn" :class="{ active: measureType === 'history' }" @click="measureType = 'history'">
						历史举措
					</div>
					<div class="select-btn" :class="{ active: measureType === 'future' }" @click="measureType = 'future'">
						未来举措
					</div>
					<el-select v-model="selectedField" placeholder="全部领域" class="field-select">
						<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>
			<div class="bottom-content">
				<div class="timeline-container">
					<div class="timeline-list">
						<div v-for="(dept, index) in filteredTimelineList" :key="index" class="dept-row">
							<div class="dept-info">
								<img :src="dept.icon || defaultImg" alt="" class="dept-icon" />
								<div class="dept-text">
									<div class="dept-name">{{ dept.name }}</div>
									<div class="dept-count">{{ dept.count }}次</div>
								</div>
							</div>
							<div class="events-container">
								<div v-for="(event, eIndex) in dept.events" :key="eIndex" class="event-card">
									<div class="card-top-line" :class="getLineColorClass(event.level)"></div>
									<div class="event-header">
										<div class="event-date">{{ event.date }}</div>
										<div v-if="event.level" class="traffic-light">
											<div class="light" :class="{ active: event.level === 'green', green: true }"></div>
											<div class="light" :class="{ active: event.level === 'yellow', yellow: true }"></div>
											<div class="light" :class="{ active: event.level === 'red', red: true }"></div>
										</div>
									</div>
									<el-tooltip
										effect="dark"
										:content="event.content"
										popper-class="common-prompt-popper"
										placement="top"
										:show-after="500"
									>
										<div class="event-content">{{ event.content }}</div>
									</el-tooltip>
									<div class="event-tags">
										<span
											v-for="(tag, tIndex) in event.tags"
											:key="tIndex"
											class="tag"
											:class="getTagClass(tag)"
										>
											{{ tag }}
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="timelineBar" :style="{ backgroundImage: `url(${timelineBg})` }">
						<div ref="sliderChartRef" style="width: 100%; height: 100%; touch-action: none"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed, inject, watch, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import * as echarts from "echarts";
import defaultIcon from "../../assets/defaultIcon.png";
import leftBtn from "../../assets/left-btn.png";
import rightBtn from "../../assets/right-btn.png";
import icon1 from "../../assets/icon1.png";
import icon2 from "../../assets/icon2.png";
import icon3 from "../../assets/icon3.png";
import icon4 from "../../assets/icon4.png";
import timelineBg from "../../assets/timeline.png";
import defaultImg from "../../../../assets/images/default-icon2.png";
// 传递接口
import {
	getAllGovernmentList,
	getUSChinaSanctionTrend,
	getUSGovernmentLatestDynamic,
	getUSGovernmentJointSanctionRank,
	getUSGovernmentSanctionHistory,
	getDepartmentList
} from "@/api/allGovernment.js";

const router = useRouter();
const activeDate = inject("activeDate");

// 根据时间范围映射月份数
const monthNum = computed(() => {
	switch (activeDate.value) {
		case "week":
			return 1;
		case "three_month":
			return 3;
		case "six_month":
			return 6;
		case "year":
			return 12;
		default:
			return 12;
	}
});

// 全政府-美政府部门对我打压遏制时间线
const loadingHistory = ref(false);
const getUSGovernmentSanctionHistoryData = async () => {
	loadingHistory.value = true;
	try {
		const res = await getUSGovernmentSanctionHistory({
			currentPage: 1,
			pageSize: 1000
		});
		if (res.code === 200 && res.data && res.data.content) {
			const rawList = res.data.content;

			const orgMap = {};
			if (governmentList.value && governmentList.value.length) {
				governmentList.value.forEach(g => {
					if (g.departId) {
						orgMap[g.departId] = g.title;
					}
				});
			}

			const grouped = {};
			rawList.forEach(item => {
				// 尝试获取部门名称
				let deptName = "未知部门";
				if (item.orgName) {
					deptName = item.orgName;
				} else if (item.orgId && orgMap[item.orgId]) {
					deptName = orgMap[item.orgId];
				} else if (item.orgId) {
					if (item.orgId === "241") deptName = "商务部工业与安全局";
					else if (item.orgId === "203") deptName = "海外资产控制办公室";
					else deptName = "部门 " + item.orgId;
				}

				if (!grouped[deptName]) {
					grouped[deptName] = {
						name: deptName,
						icon: item.orgLogoUrl,
						count: 0,
						events: []
					};
				}
				grouped[deptName].count++;

				grouped[deptName].events.push({
					date: item.postDate ? item.postDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : "",
					content: item.name || item.summary,
					tags: item.techDomainList ? item.techDomainList.slice(0, 2) : [],
					level: getLevelByCount(item.cnEntityCount)
				});
			});
			timelineList.value = Object.values(grouped);
			initSlider();
		}
	} catch (error) {
		console.error("获取制裁历程失败:", error);
	} finally {
		loadingHistory.value = false;
	}
};

// 辅助函数：根据受影响实体数量生成level
const getLevelByCount = count => {
	const c = count || 0;
	if (c === 0) return "green"; // 0 或空 绿色
	if (c <= 10) return "yellow"; // 1-10 黄色
	return "red"; // >10 红色
};

// 全政府-美政府部门联合制裁排行
const loadingJointRank = ref(false);
const getUSGovernmentJointSanctionRankData = async () => {
	loadingJointRank.value = true;
	try {
		const res = await getUSGovernmentJointSanctionRank();
		if (res.code === 200 && res.data) {
			rankingList.value = res.data.map(item => ({
				depts: (item.organizations || item.org || []).map(o => ({
					name: o.orgName,
					icon: o.logoUrl ? o.logoUrl.trim() : ""
				})),
				count: item.jointCount,
				items: (item.sanctions || []).map(s => ({
					id: s.orderId,
					type: s.typeName || "其他",
					title: s.name,
					date: s.postDate ? s.postDate.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : ""
				}))
			}));
		}
	} catch (error) {
		console.error("获取美政府部门联合制裁排行失败:", error);
	} finally {
		loadingJointRank.value = false;
	}
};

// 全政府-美政府部门打压遏制最新动态
const loadingLatestDynamic = ref(false);
const getUSGovernmentLatestDynamicData = async () => {
	loadingLatestDynamic.value = true;
	try {
		const res = await getUSGovernmentLatestDynamic();
		if (res.code === 200 && res.data) {
			dynamicList.value = res.data.map(item => ({
				title: item.orgName ? `${item.orgName}：${item.title}` : item.title,
				date: item.time ? item.time.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$1年$2月$3日") : "",
				type: item.sanTypeName || "",
				content: item.content || item.title,
				tags: item.industrylist || [],
				id: item.id,
				orgName: item.orgName || ""
			}));
		}
	} catch (error) {
		console.error("获取美政府部门打压遏制最新动态失败:", error);
	} finally {
		loadingLatestDynamic.value = false;
	}
};
// 点击科技要闻-跳转详情页
const handleNewsClick = item => {
	if (!item || !item.id) return;
	// 打开新标签页
	const { href } = router.resolve({
		path: "/newsAnalysis",
		query: {
			newsId: item.id
		}
	});
	window.open(href, "_blank");
};

// 点击联合制裁项-如果是政令则跳转详情
const handleJointRankItemClick = item => {
	if (item.type === "政令" && item.id) {
		const { href } = router.resolve({
			path: "/decreeLayout/overview/introduction",
			query: {
				id: item.id
			}
		});
		window.open(href, "_blank");
	}
};

// 全政府-获取美对华制裁措施数量趋势
const usChinaSanctionTrend = ref([]);
const loadingTrend = ref(false);
const getUSChinaSanctionTrendData = async () => {
	loadingTrend.value = true;
	try {
		const params = {
			monthNum: monthNum.value
		};
		if (fieldValue.value) {
			params.field = fieldValue.value;
		}
		if (deptValue.value) {
			params.orgId = deptValue.value;
		}
		if (methodValue.value) {
			params.sanType = methodValue.value;
		}
		const res = await getUSChinaSanctionTrend(params);
		if (res.code === 200 && res.data) {
			usChinaSanctionTrend.value = res.data;
			// 更新图表
			let xAxisData = [];
			let seriesData = [];

			if (activeDate.value === "week") {
				// 近一个月：按天展示
				xAxisData = res.data.map(item => {
					const month = item.month.toString().padStart(2, "0");
					const day = item.day.toString().padStart(2, "0");
					return `${item.year}-${month}-${day}`;
				});
				seriesData = res.data.map(item => item.sanctionCount);
			} else {
				// 近三个月、半年、一年：按月展示，需要聚合天数数据
				const monthlyMap = {};
				res.data.forEach(item => {
					const key = `${item.year}-${item.month.toString().padStart(2, "0")}`;
					if (!monthlyMap[key]) {
						monthlyMap[key] = 0;
					}
					monthlyMap[key] += item.sanctionCount;
				});
				// 排序键值确保时间轴顺序正确
				xAxisData = Object.keys(monthlyMap).sort();
				seriesData = xAxisData.map(key => monthlyMap[key]);
			}
			initChart(xAxisData, seriesData);
		}
	} catch (error) {
		console.error("获取美对华制裁措施数量趋势失败:", error);
	} finally {
		loadingTrend.value = false;
	}
};
// 全政府-获取部门数据
const departmentList = ref([]);
const loadingDepartment = ref(false);
const getDepartmentListData = async () => {
	loadingDepartment.value = true;
	try {
		const res = await getDepartmentList();
		if (res.code === 200 && res.data) {
			departmentList.value = res.data;
		}
	} catch (error) {
		console.error("获取部门数据失败:", error);
	} finally {
		loadingDepartment.value = false;
	}
};

// 全政府-获取美国政府部门制裁数据
const governmentList = ref([]);
const loadingGovernment = ref(false);
const getGovernmentList = async () => {
	loadingGovernment.value = true;
	try {
		const res = await getAllGovernmentList({
			monthNum: monthNum.value
		});
		if (res.code === 200 && res.data) {
			governmentList.value = res.data;
			// 如果后端返回了数据，则更新 cardList
			if (Array.isArray(res.data) && res.data.length > 0) {
				cardList.value = res.data.map(item => {
					const stats = [];
					if (item.parliament) {
						// 议会类型
						if (item.billCount) {
							stats.push({
								label: "法案(提出)",
								value: (item.billCount.proposedBillCount || 0) + "项"
							});
							stats.push({
								label: "法案(通过)",
								value: (item.billCount.passedBillCount || 0) + "项"
							});
						}
					} else {
						// 非议会类型
						// 1. 处理制裁清单
						if (item.sanctionCountList && item.sanctionCountList.length > 0) {
							item.sanctionCountList.forEach(sanction => {
								stats.push({
									label: sanction.nameZh || sanction.name,
									value: (sanction.postCount || 0) + "次"
								});
							});
						}
						// 2. 处理政令
						stats.push({
							label: "政令",
							value: (item.administrativeOrderCount || 0) + "项"
						});
					}

					return {
						title: item.departName || "未知部门",
						icon: defaultIcon, // 暂时使用默认图标
						stats: stats,
						departId: item.departId
					};
				});
				startAutoPlay();
			}
		}
	} catch (error) {
		console.error("获取美国政府部门制裁数据失败:", error);
	} finally {
		loadingGovernment.value = false;
	}
};
// 跳转到机构页面
const handleCardClick = card => {
	if (!card || !card.departId) return;
	// 打开新标签页
	const { href } = router.resolve({
		path: "/institution",
		query: {
			id: card.departId
		}
	});
	window.open(href, "_blank");
};

const cardList = ref([
	{
		title: "联邦参议院",
		stats: [
			{ label: "法案(提出)", value: "132项" },
			{ label: "法案(通过)", value: "9项" }
		]
	},
	{
		title: "联邦众议院",
		stats: [
			{ label: "法案(提出)", value: "215项" },
			{ label: "法案(通过)", value: "15项" }
		]
	},
	{
		title: "商务部",
		stats: [
			{ label: "232调查", value: "11次" },
			{ label: "政令", value: "29项" }
		]
	},
	{
		title: "财政部",
		stats: [
			{ label: "232调查", value: "9次" },
			{ label: "涉军企业清单", value: "3次" },
			{ label: "政令", value: "15项" }
		]
	},
	{
		title: "贸易代表办公室",
		stats: [
			{ label: "301调查", value: "4次" },
			{ label: "政令", value: "21项" }
		]
	},
	{
		title: "司法部",
		stats: [
			{ label: "起诉案例", value: "18宗" },
			{ label: "法律制裁", value: "5项" }
		]
	},
	{
		title: "国土安全部",
		stats: [
			{ label: "实体清单", value: "42家" },
			{ label: "限制进口", value: "12项" }
		]
	},
	{
		title: "联邦调查局",
		stats: [
			{ label: "技术调查", value: "33次" },
			{ label: "安全审查", value: "27项" }
		]
	}
]);

const currentIndex = ref(0);
let autoTimer = null;

const startAutoPlay = () => {
	currentIndex.value = 0;
	stopAutoPlay();
	if (cardList.value.length > 5) {
		autoTimer = setInterval(() => {
			next();
		}, 3000);
	}
};

const stopAutoPlay = () => {
	if (autoTimer) {
		clearInterval(autoTimer);
		autoTimer = null;
	}
};
const fieldValue = ref("");
const deptValue = ref("");
const methodValue = ref("");

const measureType = ref("history");
const selectedField = ref("");
const fieldOptions = ref([
	{ label: "全部领域", value: "" },
	{ label: "人工智能", value: "1" },
	{ label: "生物科技", value: "2" },
	{ label: "新一代信息技术", value: "3" },
	{ label: "量子科技", value: "4" },
	{ label: "新能源", value: "5" },
	{ label: "集成电路", value: "6" },
	{ label: "海洋", value: "7" },
	{ label: "先进制造", value: "8" },
	{ label: "新材料", value: "9" },
	{ label: "航空航天", value: "10" },
	{ label: "深海", value: "11" },
	{ label: "极地", value: "12" },
	{ label: "太空", value: "13" },
	{ label: "核", value: "14" }
]);

const methodOptions = ref([
	{ label: "全部制裁手段", value: "" },
	{ label: "法案", value: "-1" },
	{ label: "行政令", value: "-2" }
]);

const dynamicList = ref([]);

const getColorName = tag => {
	const tagColorMap = {
		航空航天: "blue",
		生物科技: "blue",
		集成电路: "blue",
		能源: "green",
		新材料: "green",
		人工智能: "red"
	};

	if (tagColorMap[tag]) return tagColorMap[tag];

	const colors = ["blue", "green", "red", "orange", "purple", "cyan"];
	let hash = 0;
	for (let i = 0; i < tag.length; i++) {
		hash = tag.charCodeAt(i) + ((hash << 5) - hash);
	}
	return colors[Math.abs(hash) % colors.length];
};

const getTagClass = tag => {
	return `tag-${getColorName(tag)}`;
};

const getLineColorClass = level => {
	if (level) {
		return `line-${level}`;
	}
	return `line-default`;
};

const dateRange = ref([0, 0]);

const filteredTimelineList = computed(() => {
	if (!dateRange.value || dateRange.value[0] === 0) return timelineList.value;
	const [start, end] = dateRange.value;
	return timelineList.value.map(dept => {
		const events = dept.events.filter(e => {
			const t = parseDate(e.date);
			return t >= start && t <= end;
		});
		return { ...dept, events };
	});
});

const timelineList = ref([]);

const rankingList = ref([]);

const chartRef = ref(null);
let myChart = null;

const sliderChartRef = ref(null);
let sliderChart = null;

const parseDate = str => {
	const match = str.match(/(\d+)年(\d+)月(\d+)日/);
	if (match) return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3])).getTime();
	return new Date().getTime();
};

const timelineAllData = computed(() => {
	let all = [];
	rankingList.value.forEach(rank => {
		all = all.concat(rank.items);
	});
	dynamicList.value.forEach(item => {
		all.push({ title: item.title, date: item.date, type: item.type });
	});
	return all.sort((a, b) => parseDate(b.date) - parseDate(a.date));
});

const initSlider = () => {
	if (!sliderChartRef.value) return;
	sliderChart = echarts.init(sliderChartRef.value);

	const dates = timelineAllData.value.map(item => parseDate(item.date));

	// 设定总范围：2010年1月1日 - 当前年份年底
	const currentYear = new Date().getFullYear();
	const rangeMin = new Date(2018, 0, 1).getTime();
	const rangeMax = new Date(currentYear, 11, 31).getTime();

	// 设定默认选中范围：2025-01-01 到 2025-04-25
	const defaultStart = new Date(2025, 0, 1).getTime();
	const defaultEnd = new Date(2025, 3, 25).getTime();

	// 初始化 dateRange 为默认选中范围
	dateRange.value = [defaultStart, defaultEnd];

	const option = {
		grid: {
			top: 0,
			bottom: 0,
			left: 20,
			right: 20
		},
		xAxis: {
			type: "time",
			min: rangeMin,
			max: rangeMax,
			axisLabel: { show: false },
			axisTick: { show: false },
			axisLine: { show: false },
			splitLine: { show: false }
		},
		yAxis: { show: false },
		dataZoom: [
			{
				type: "slider",
				xAxisIndex: 0,
				filterMode: "weakFilter",
				height: "100%",
				top: 0,
				bottom: 0,
				left: 20,
				right: 20,
				// 默认选中范围
				startValue: defaultStart,
				endValue: defaultEnd,
				backgroundColor: "transparent",
				borderColor: "transparent",
				fillerColor: "rgba(246, 250, 255, 1)",
				dataBackground: {
					lineStyle: { color: "transparent" },
					areaStyle: { color: "transparent" }
				},
				selectedDataBackground: {
					lineStyle: { color: "transparent" },
					areaStyle: { color: "transparent" }
				},
				labelFormatter: value => {
					const date = new Date(value);
					const y = date.getFullYear();
					const m = (date.getMonth() + 1).toString().padStart(2, "0");
					const d = date.getDate().toString().padStart(2, "0");
					return `${y}-${m}-${d}`;
				},
				textStyle: {
					color: "#5F656C",
					fontSize: 12
				},
				// 解决 passive event 警告的关键配置
				preventDefaultMouseMove: false
			}
		],
		series: [
			{
				type: "scatter",
				data: dates.map(d => [d, 0]),
				symbolSize: 5,
				itemStyle: { color: "transparent" }
			}
		]
	};

	sliderChart.setOption(option);

	sliderChart.on("dataZoom", () => {
		const opt = sliderChart.getOption();
		if (opt.dataZoom && opt.dataZoom[0]) {
			const start = opt.dataZoom[0].startValue;
			const end = opt.dataZoom[0].endValue;
			if (start && end) {
				dateRange.value = [start, end];
			}
		}
	});
};

const initChart = (xAxisData = [], seriesData = []) => {
	if (!chartRef.value) return;
	myChart = echarts.init(chartRef.value);
	const option = {
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(255, 255, 255, 0.9)",
			borderColor: "#2f79c4",
			textStyle: {
				color: "#666"
			},
			formatter: function (params) {
				return `<div style="padding: 3px 6px;">
					<div style="font-weight: bold; margin-bottom: 4px;">${params[0].name}</div>
					<div>数量：<span style="color: #2f79c4; font-weight: bold;">${params[0].value}</span></div>
				</div>`;
			}
		},
		grid: {
			top: "5%",
			left: "1%",
			right: "2%",
			bottom: "5%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: xAxisData,
			axisLine: {
				lineStyle: {
					color: "#f0f0f0"
				}
			},
			axisLabel: {
				color: "#999",
				fontSize: 12
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {
			type: "value",
			min: 0,
			minInterval: 1, // 保证最小间隔为1，避免小数
			axisLine: {
				show: false
			},
			axisLabel: {
				color: "#999",
				fontSize: 12
			},
			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "#f0f0f0"
				}
			}
		},
		series: [
			{
				data: seriesData,
				type: "line",
				smooth: false,
				symbol: "circle",
				symbolSize: 8,
				itemStyle: {
					color: "#fff",
					borderColor: "#2f79c4",
					borderWidth: 2
				},
				lineStyle: {
					color: "#2f79c4",
					width: 2
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "rgba(47, 121, 196, 0.2)"
						},
						{
							offset: 1,
							color: "rgba(47, 121, 196, 0)"
						}
					])
				}
			}
		]
	};
	myChart.setOption(option);
};

// 监听时间范围变化，重新获取趋势数据
watch(
	() => activeDate.value,
	() => {
		getUSChinaSanctionTrendData();
		getGovernmentList();
	}
);

onMounted(() => {
	initChart();
	initSlider();
	getGovernmentList();
	getUSChinaSanctionTrendData();
	getUSGovernmentLatestDynamicData();
	getUSGovernmentJointSanctionRankData();
	getUSGovernmentSanctionHistoryData();
	getDepartmentListData();
	startAutoPlay();
	window.addEventListener("resize", () => {
		myChart && myChart.resize();
		sliderChart && sliderChart.resize();
	});
});

onUnmounted(() => {
	stopAutoPlay();
});

const next = () => {
	let arr = [...cardList.value];
	if (currentIndex.value < cardList.value.length - 5) {
		currentIndex.value++;
	} else {
		cardList.value = [...cardList.value, ...arr];
		currentIndex.value++;
		// currentIndex.value = 0;
	}
};

const prev = () => {
	if (currentIndex.value > 0) {
		currentIndex.value--;
	} else {
		currentIndex.value = Math.max(0, cardList.value.length - 5);
	}
};
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1666px;
	height: 2132px;

	.main-content {
		width: 100%;
		position: relative;
		margin-bottom: 16px;

		.cards-mask {
			width: 100%;
			overflow: hidden; // 仅在这里隐藏超出部分，不影响外层的按钮
		}

		.cards-container {
			display: flex;
			gap: 16px;
			transition: transform 0.5s ease; // 平滑过渡动画
			width: max-content; // 确保容器宽度由内容撑开
		}

		.government-card {
			width: 307px;
			height: 178px;
			padding: 16px 26px;
			box-sizing: border-box;
			border-radius: 10px;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			border: 1px solid rgba(255, 255, 255, 0.1);
			box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
			cursor: pointer;

			.card-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-size: 358px 358px;
				background-repeat: no-repeat;
				background-position: center;
				filter: blur(20px);
				z-index: 0;
				opacity: 0.8;
				background-color: rgba(5, 33, 77, 0.7); // 调整为更明显的深蓝色

				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, rgba(5, 33, 77, 1) 0%, rgba(5, 33, 77, 0) 50%, rgba(5, 33, 77, 1) 100%);
				}
			}

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 9px;
				position: relative;
				z-index: 1;

				.card-title {
					font-family: "YouSheBiaoTiHei";
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					color: rgba(255, 255, 255, 1);
					text-shadow: 0 0 30px rgba(255, 255, 255, 1);
				}

				.card-icon {
					width: 36px; // 假设大小
					height: 36px;
				}
			}

			.card-body {
				position: relative;
				z-index: 1;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.stat-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 30px;

					.stat-label,
					.stat-value {
						font-family: "Microsoft YaHei";
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						color: rgba(255, 255, 255, 0.8);
					}
				}
			}
		}

		.left-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 50%;
			left: -33px;
			transform: translateY(-50%);
			cursor: pointer;
			z-index: 10;
			transition: opacity 0.3s;

			&.disabled {
				opacity: 0.3;
				cursor: not-allowed;
			}
		}

		.right-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 50%;
			right: -33px;
			transform: translateY(-50%);
			cursor: pointer;
			z-index: 10;
			transition: opacity 0.3s;

			&.disabled {
				opacity: 0.3;
				cursor: not-allowed;
			}
		}
	}

	.main-charts {
		width: 1601px;
		height: 500px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.65);
		box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
		display: flex;
		flex-direction: column;
		margin-bottom: 22px;

		.charts-title {
			width: 100%;
			height: 48px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 17px;
			padding-right: 35px;
			box-sizing: border-box;
			background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);

			.title-left {
				display: flex;
				align-items: center;

				img {
					width: 18px;
					height: 18px;
					margin-right: 14px;
				}

				span {
					font-family: YouSheBiaoTiHei;
					font-size: 24px;
					font-weight: 400;
					line-height: 24px;
					color: rgb(5, 95, 194);
				}
			}

			.title-right {
				display: flex;
				height: 48px;
				align-items: end;
				gap: 12px;
				padding-right: 17px;

				.custom-select {
					width: 160px;

					:deep(.el-input) {
						height: 32px;

						.el-input__wrapper {
							background-color: #fff;
							box-shadow: 0 0 0 1px #dcdfe6 inset;
							border-radius: 4px;
							padding: 0 12px;
							height: 32px;

							&:hover {
								box-shadow: 0 0 0 1px #c0c4cc inset;
							}

							&.is-focus {
								box-shadow: 0 0 0 1px #409eff inset;
							}
						}

						.el-input__inner {
							font-family: "Microsoft YaHei";
							font-size: 16px;
							font-weight: 400;
							color: rgb(95, 101, 108);
							height: 32px;
							line-height: 24px;

							&::placeholder {
								color: rgb(95, 101, 108);
							}
						}
					}
				}
			}
		}

		.charts-content {
			flex: 1;
			width: 100%;
			padding: 20px 40px 20px 40px;
			box-sizing: border-box;

			.chart-container {
				width: 100%;
				height: 100%;
			}
		}
	}

	.main-text {
		width: 1601px;
		height: 700px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;

		.text-item {
			width: 792px;
			height: 700px;
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 0.65);
			box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);

			.text-item-title {
				width: 100%;
				height: 48px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-left: 17px;
				box-sizing: border-box;
				background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);

				img {
					width: 18px;
					height: 18px;
					margin-right: 14px;
				}

				span {
					font-family: YouSheBiaoTiHei;
					font-size: 24px;
					font-weight: 400;
					line-height: 24px;
					color: rgb(5, 95, 194);
				}
			}

			.text-item-content {
				width: 100%;
				height: 652px;
				padding: 6px 27px 22px 27px;
				box-sizing: border-box;
				overflow-y: auto;

				.dynamic-item {
					width: 100%;
					display: flex;
					padding: 16px 0;
					border-bottom: 1px solid rgba(0, 0, 0, 0.05);

					&:last-child {
						border-bottom: none;
					}

					.item-icon {
						width: 24px;
						height: 24px;
						margin-right: 12px;
						margin-top: 3px;
					}

					.item-right {
						flex: 1;
						min-width: 0;

						.dynamic-item-header {
							display: flex;
							justify-content: space-between;
							align-items: flex-start;

							.item-title {
								cursor: pointer;
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 700;
								line-height: 30px;
								color: rgb(59, 65, 75);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								flex: 1;
								min-width: 0;
								margin-right: 12px;
							}

							.item-date {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								color: rgb(95, 101, 108);
								flex-shrink: 0;
								white-space: nowrap;
							}
						}

						.dynamic-item-body {
							font-family: "Microsoft YaHei";
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							color: rgb(95, 101, 108);
							margin-top: 0; // 紧贴标题行
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							cursor: pointer;
						}

						.dynamic-item-tags {
							display: flex;
							gap: 8px;
							margin-top: 5px;

							.tag {
								padding: 2px 8px;
								border-radius: 4px;
								font-family: "Microsoft YaHei";
								font-size: 14px;
								font-weight: 400;
								line-height: 20px;

								&.tag-blue {
									color: #2f79c4;
									background: rgba(47, 121, 196, 0.1);
									border: 1px solid rgba(47, 121, 196, 0.3);
								}

								&.tag-green {
									color: #52c41a;
									background: rgba(82, 196, 26, 0.1);
									border: 1px solid rgba(82, 196, 26, 0.3);
								}

								&.tag-red {
									color: #fa541c;
									background: rgba(250, 84, 28, 0.1);
									border: 1px solid rgba(250, 84, 28, 0.3);
								}

								&.tag-orange {
									color: #fa8c16;
									background: rgba(250, 140, 22, 0.1);
									border: 1px solid rgba(250, 140, 22, 0.3);
								}

								&.tag-purple {
									color: #722ed1;
									background: rgba(114, 46, 209, 0.1);
									border: 1px solid rgba(114, 46, 209, 0.3);
								}

								&.tag-cyan {
									color: #13c2c2;
									background: rgba(19, 194, 194, 0.1);
									border: 1px solid rgba(19, 194, 194, 0.3);
								}
							}
						}
					}
				}
			}

			.text-item-contentOther {
				width: 100%;
				height: 652px;
				padding: 10px 30px 22px 27px;
				box-sizing: border-box;
				overflow-y: auto;

				.ranking-card {
					width: 100%;
					border-radius: 10px;
					border: 1px solid rgb(234, 236, 238);
					padding: 12px 24px;
					margin-bottom: 12px;
					box-sizing: border-box;

					&:last-child {
						margin-bottom: 0;
					}

					.ranking-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 12px;

						.header-left {
							display: flex;
							align-items: center;

							.dept-icons {
								display: flex;
								margin-right: 12px;

								.dept-icon {
									width: 24px;
									height: 24px;
									margin-right: -8px; // 图标叠加效果

									&:last-child {
										margin-right: 0;
									}
								}
							}

							.dept-names {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								color: rgb(59, 65, 75);
							}
						}

						.header-right {
							.joint-count {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								color: rgb(59, 65, 75);
							}
						}
					}

					.ranking-body {
						display: flex;
						flex-direction: column;
						gap: 8px;

						.ranking-item {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.item-left {
								display: flex;
								align-items: center;
								flex: 1;
								overflow: hidden;

								.item-type {
									padding: 2px 8px;
									border-radius: 4px;
									font-family: "Microsoft YaHei";
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
									margin-right: 13px;
									white-space: nowrap;
									flex-shrink: 0;

									&.type-bill {
										color: #2f79c4;
										background: rgba(47, 121, 196, 0.1);
										// border: 1px solid rgba(47, 121, 196, 0.3);
									}

									&.type-order {
										color: #2f79c4;
										background: rgba(47, 121, 196, 0.1);
										// border: 1px solid rgba(47, 121, 196, 0.3);
									}
								}

								.item-title {
									font-family: "Microsoft YaHei";
									font-size: 16px;
									font-weight: 400;
									line-height: 30px;
									color: rgb(59, 65, 75);
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									cursor: pointer;

									&.clickable {
										&:hover {
											color: #055fc2;
											text-decoration: underline;
										}
									}
								}
							}

							.item-date {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								color: rgb(95, 101, 108);
								margin-left: 16px;
							}
						}
					}
				}
			}
		}

		.text-item:last-child {
			padding-bottom: 22px;
		}
	}

	.main-bottom {
		width: 100%;
		height: 700px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.65);
		box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);

		.bottom-item {
			width: 100%;
			height: 48px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 17px;
			padding-right: 35px;
			box-sizing: border-box;
			background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);

			.bottom-item-title {
				display: flex;
				align-items: center;

				img {
					width: 18px;
					height: 18px;
					margin-right: 14px;
				}

				span {
					font-family: YouSheBiaoTiHei;
					font-size: 24px;
					font-weight: 400;
					line-height: 24px;
					color: rgb(5, 95, 194);
				}
			}

			.bottom-item-select {
				display: flex;
				height: 48px;
				align-items: end;
				gap: 8px;

				.select-btn {
					padding: 4px 16px;
					border-radius: 4px;
					border: 1px solid rgb(230, 231, 232);
					font-family: "Microsoft YaHei";
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					color: rgb(95, 101, 108);
					cursor: pointer;
					background-color: #fff;

					// transition: all 0.3s;
					&.active {
						color: rgb(5, 95, 194);
						border-color: rgb(5, 95, 194);
						background-color: rgba(231, 243, 255, 1);
					}
				}

				.field-select {
					width: 160px;

					:deep(.el-input) {
						.el-input__wrapper {
							height: 32px;
							padding: 0 12px;
							box-sizing: border-box;
							background-color: transparent;
							border-radius: 4px;

							.el-input__inner {
								height: 32px;
								line-height: 32px;
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								color: rgb(95, 101, 108);

								&::placeholder {
									color: rgb(95, 101, 108);
								}
							}
						}
					}
				}
			}
		}

		.bottom-content {
			width: 100%;
			height: calc(100% - 48px);
			padding: 14px 23px 19px 23px;
			box-sizing: border-box;

			.timeline-container {
				width: 100%;
				height: 100%;
				border-radius: 4px;
				padding: 8px 8px 8px 8px;
				background-color: rgb(247, 248, 249);
				border: 1px solid rgb(234, 236, 238);
				display: flex;
				flex-direction: column;

				.timeline-list {
					flex: 1;
					overflow: auto;
					padding-right: 8px;
					padding-bottom: 8px;

					.dept-row {
						display: flex;
						margin-bottom: 8px;

						&:last-child {
							margin-bottom: 0;
						}

						.dept-info {
							width: 200px;
							flex-shrink: 0;
							display: flex;
							align-items: center;
							background-color: #fff;
							border-radius: 4px;
							margin-right: 8px;
							padding: 12px 16px;
							box-sizing: border-box;
							height: 130px;

							.dept-icon {
								width: 48px;
								height: 50px;
								margin-right: 8px;
							}

							.dept-text {
								.dept-name {
									font-family: "Microsoft YaHei";
									font-size: 18px;
									font-weight: 700;
									color: rgb(59, 65, 75);
									line-height: 24px;
								}

								.dept-count {
									font-family: "Microsoft YaHei";
									font-size: 16px;
									font-weight: 400;
									color: rgb(59, 65, 75);
									line-height: 24px;
								}
							}
						}

						.events-container {
							flex: 1;
							display: flex;
							align-items: center;
							gap: 8px;
							overflow-x: auto;

							// 启用滚动条
							&::-webkit-scrollbar {
								height: 6px;
								/* 横向滚动条高度 */
								display: block;
							}

							&::-webkit-scrollbar-thumb {
								background: rgba(0, 0, 0, 0.2);
								border-radius: 3px;
							}

							&::-webkit-scrollbar-track {
								background: transparent;
							}

							scrollbar-width: thin;
							scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
							padding-bottom: 4px; // 给滚动条留出空间

							.event-card {
								min-width: 240px;
								max-width: 240px;
								height: 130px;
								background-color: #fff;
								border-radius: 4px;
								padding: 12px;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								position: relative;
								overflow: hidden;
								flex-shrink: 0;

								.card-top-line {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 3px;

									&.line-blue {
										background-color: #2f79c4;
									}

									&.line-green {
										background-color: rgb(33, 129, 57);
									}

									&.line-red {
										background-color: rgb(206, 79, 81);
									}

									&.line-orange {
										background-color: #fa8c16;
									}

									&.line-yellow {
										background-color: rgb(232, 189, 11);
									}

									&.line-purple {
										background-color: #722ed1;
									}

									&.line-cyan {
										background-color: #13c2c2;
									}

									&.line-default {
										background-color: rgb(234, 236, 238);
									}
								}

								.event-header {
									display: flex;
									justify-content: space-between;
									align-items: center;

									.event-date {
										font-family: "Microsoft YaHei";
										font-size: 16px;
										font-weight: 700;
										color: rgb(59, 65, 75);
										line-height: 30px;
									}

									.traffic-light {
										display: flex;
										gap: 2px;
										background-color: rgb(247, 248, 249);
										padding: 2px 2px;
										border-radius: 20px;

										.light {
											width: 8px;
											height: 8px;
											border-radius: 50%;
											background-color: rgb(234, 236, 238);

											&.green.active {
												background-color: rgb(33, 129, 57);
											}

											&.yellow.active {
												background-color: rgb(232, 189, 11);
											}

											&.red.active {
												background-color: rgb(206, 79, 81);
											}
										}
									}
								}

								.event-content {
									font-family: "Microsoft YaHei";
									font-size: 16px;
									font-weight: 400;
									color: rgb(59, 65, 75);
									line-height: 24px;
									min-height: 48px; // 强制最小高度为两行 (24px * 2)
									height: 48px; // 固定高度为两行
									// margin-bottom: auto;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}

								.event-tags {
									display: flex;
									gap: 8px;
									margin-top: 4px;
									white-space: nowrap;

									.tag {
										padding: 0 8px;
										height: 22px;
										line-height: 20px;
										border-radius: 4px;
										font-size: 14px;
										font-weight: 400;
										font-family: "Microsoft YaHei";
										border: 1px solid;
										flex-shrink: 0;
										display: flex;
										align-items: center;

										&.tag-blue {
											color: rgba(9, 88, 217, 1);
											background: rgba(230, 244, 255, 1);
											border-color: rgba(186, 224, 255, 1);
										}

										&.tag-green {
											color: rgba(56, 158, 13, 1);
											background: rgba(246, 255, 237, 1);
											border-color: rgba(217, 247, 190, 1);
										}

										&.tag-red {
											color: rgba(245, 34, 45, 1);
											background: rgba(255, 241, 240, 1);
											border-color: rgba(255, 163, 158, 1);
										}

										&.tag-orange {
											color: rgba(250, 140, 22, 1);
											background: rgba(255, 247, 230, 1);
											border-color: rgba(255, 213, 145, 1);
										}

										&.tag-purple {
											color: rgba(114, 46, 209, 1);
											background: rgba(249, 240, 255, 1);
											border-color: rgba(211, 173, 247, 1);
										}

										&.tag-cyan {
											color: rgba(19, 194, 194, 1);
											background: rgba(230, 255, 251, 1);
											border-color: rgba(135, 232, 222, 1);
										}
									}
								}
							}
						}
					}
				}

				.timelineBar {
					width: 100%;
					height: 552px;
					overflow-y: auto;

					&::-webkit-scrollbar {
						display: none;
					}
				}

				.timelineBar {
					width: 100%;
					height: 51px;
					background-color: rgba(255, 255, 255, 1);
					background-size: 100% 20px;
					background-repeat: no-repeat;
					background-position: center;
				}
			}
		}
	}
}
</style>

<style lang="scss">
.common-prompt-popper.el-popper {
	padding: 8px 16px !important;
	border-radius: 10px !important;
	background-color: rgb(59, 65, 75) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: "Microsoft YaHei" !important;
	line-height: 30px !important;
	color: #fff !important;
	border: none !important;

	.el-popper__arrow::before {
		background-color: rgb(59, 65, 75) !important;
		border-color: rgb(59, 65, 75) !important;
	}
}
</style>
