<!--科技要闻-->
<template>
	<div class="content-wrapper">
		<div class="main-content">
			<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">
						<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">
						<el-option label="全部领域" value="" />
					</el-select>
					<el-select v-model="deptValue" placeholder="全部部门" class="custom-select">
						<el-option label="全部部门" value="" />
					</el-select>
					<el-select v-model="methodValue" placeholder="全部制裁手段" class="custom-select">
						<el-option label="全部制裁手段" 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">{{ item.title }}</span>
								<span class="item-date">{{ item.date }} · {{ item.type }}</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="defaultImg"
										alt=""
										class="dept-icon"
									/>
								</div>
								<span class="dept-names">{{ rank.depts.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">{{ 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="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 } from "vue";
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";

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);
const fieldValue = ref("");
const deptValue = ref("");
const methodValue = ref("");

const measureType = ref("history");
const selectedField = ref("all");
const fieldOptions = ref([{ label: "全部领域", value: "all" }]);

const dynamicList = ref([
	{
		title: "联邦参议院：通过2026财年国防授权法案",
		date: "2025年12月18日",
		type: "法案",
		content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普签署成为法律，法案...",
		tags: ["航空航天", "能源"]
	},
	{
		title: "美国FDA：针对两家中国第三方检测机构的数据完整性问题采取行动",
		date: "2025年12月18日",
		type: "法案",
		content: "FDA因发现数据伪造或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏...",
		tags: ["新材料", "生物科技"]
	},
	{
		title: "美国FCC：出台电信设备市场准入认证新规",
		date: "2025年12月18日",
		type: "法案",
		content: "将国家安全审查全面嵌入设备授权程序，对实验室资质、测试标准以及供应链设置严格限制。",
		tags: ["人工智能", "集成电路"]
	},
	{
		title: "商务部工业与安全局：对实体清单的修订",
		date: "2025年12月18日",
		type: "出口管制",
		content: "美国商务部工业与安全局公布对中国半导体出口管制措施新规则，将140家中国半导体公司列入...",
		tags: ["人工智能", "集成电路"]
	},
	{
		title: "国际贸易委员会：外国制造的半导体器件及其下游产品和组件",
		date: "2025年12月18日",
		type: "市场准入限制",
		content: "美国国际贸易委员会（ITC）投票决定对特定半导体器件及其下游计算产品和组件（Certain ...",
		tags: ["集成电路"]
	}
]);

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([
	{
		name: "商务部",
		count: 77,
		events: [
			{
				date: "2025年1月24日",
				content: "商务部发布《人工智能扩散框架》",
				tags: ["人工智能"],
				level: "red"
			},
			{
				date: "2025年2月10日",
				content: "工业与安全局出口管制指南，限制先进AI芯片及相关技术...",
				tags: ["集成电路"]
			},
			{
				date: "2025年2月15日",
				content: "商务部宣布实施美国人工智能出口项目",
				tags: ["人工智能"]
			},
			{
				date: "2025年4月10日",
				content: "针对中国产海运、钢、铝、铜矿产及制品加征关税",
				tags: ["新材料"],
				level: "yellow"
			},
			{
				date: "2025年4月15日",
				content: "工业与安全局新增实体清单，包含45家中国科技企业",
				tags: ["人工智能"],
				level: "red"
			}
		]
	},
	{
		name: "国务院",
		count: 49,
		events: [
			{
				date: "2025年1月26日",
				content: "联合声明—战略人工智能伙伴关系",
				tags: ["人工智能"],
				level: "green"
			},
			{
				date: "2025年2月1日",
				content: "商务部宣布实施美国人工智能出口项目商务部宣布实施美...",
				tags: ["人工智能"]
			},
			{
				date: "2025年2月13日",
				content: "国务院宣布终止5项美中文化交流计划，包括政策制定者...",
				tags: ["量子科技", "航空航天"],
				level: "red"
			},
			{
				date: "2025年3月8日",
				content: "国务院宣布进一步调整对中国留学生的签证政策，主要针...",
				tags: ["人工智能"]
			},
			{
				date: "2025年4月19日",
				content: "联合声明—战略人工智能伙伴关系",
				tags: ["人工智能"],
				level: "green"
			}
		]
	},
	{
		name: "财政部",
		count: 49,
		events: [
			{
				date: "2025年1月28日",
				content: "财政部执行税收抵免新规与供应链审查，终止电动汽车税...",
				tags: ["能源"],
				level: "red"
			},
			{
				date: "2025年2月11日",
				content: '将6名中国个人和10家中国实体加入"特别指定国民清单"',
				tags: ["集成电路"]
			},
			{
				date: "2025年2月27日",
				content: '向EDA巨头发出"正告函"，暂停处理对华出口3nm及以下...',
				tags: ["集成电路"],
				level: "red"
			},
			{
				date: "2025年4月10日",
				content: "财政部准备向美国9家人工智能企业投资210亿元",
				tags: ["人工智能"],
				level: "green"
			}
		]
	},
	{
		name: "贸易代表办公室",
		count: 49,
		events: [
			{
				date: "2025年1月25日",
				content: '对“中国相关船舶”进入美国港口征收“入港费”，并分...',
				tags: ["能源"],
				level: "yellow"
			},
			{
				date: "2025年2月2日",
				content: "对进口自中国的半导体产品加征关税",
				tags: ["集成电路"]
			},
			{
				date: "2025年2月20日",
				content: '向EDA巨头发出"正告函"，暂停处理对华出口3nm及以下...',
				tags: ["集成电路"]
			},
			{
				date: "2025年3月23日",
				content: "财政部准备向美国9家人工智能企业投资210亿元",
				tags: ["人工智能"],
				level: "green"
			},
			{
				date: "2025年4月21日",
				content: "财政部拟议出台《境外投资规程》，限制对华高科技投...",
				tags: ["人工智能"],
				level: "yellow"
			}
		]
	},
	{
		name: "商务部",
		count: 77,
		events: [
			{
				date: "2025年1月24日",
				content: "商务部发布《人工智能扩散框架》",
				tags: ["人工智能"],
				level: "red"
			},
			{
				date: "2025年2月10日",
				content: "工业与安全局出口管制指南，限制先进AI芯片及相关技术...",
				tags: ["集成电路"]
			},
			{
				date: "2025年2月15日",
				content: "商务部宣布实施美国人工智能出口项目",
				tags: ["人工智能"]
			},
			{
				date: "2025年4月10日",
				content: "针对中国产海运、钢、铝、铜矿产及制品加征关税",
				tags: ["新材料"],
				level: "yellow"
			},
			{
				date: "2025年4月15日",
				content: "工业与安全局新增实体清单，包含45家中国科技企业",
				tags: ["人工智能"],
				level: "red"
			}
		]
	}
]);

const rankingList = ref([
	{
		depts: ["商务部", "财政部", "国务院"],
		count: 4,
		items: [
			{ type: "法案", title: "大而美法案", date: "2025年12月21日" },
			{ type: "政令", title: "调整互惠关税范围及建立贸易与安全协议执行程序", date: "2025年12月12日" },
			{ type: "政令", title: "综合对外投资国家安全法案", date: "2025年12月7日" },
			{ type: "政令", title: "推动美国人工智能技术栈的出口", date: "2025年12月4日" }
		]
	},
	{
		depts: ["国务院", "食品药品监督管理局", "商务部"],
		count: 2,
		items: [
			{ type: "法案", title: "生物安全法案", date: "2025年12月14日" },
			{ type: "政令", title: "调整关税：针对中华人民共和国合成阿片类药物供应链", date: "2025年11月24日" }
		]
	},
	{
		depts: ["商务部", "联邦通信委员会"],
		count: 2,
		items: [
			{ type: "政令", title: "保护抖音的同时保护国家安全", date: "2025年11月9日" },
			{ type: "政令", title: "赢得 6G 竞赛", date: "2025年10月27日" }
		]
	},
	{
		depts: ["贸易代表办公室", "商务部"],
		count: 2,
		items: [{ type: "政令", title: "第301条关于中国针对海事、物流和造船业以争取主导地位的行动", date: "2025年10月24日" }]
	}
]);

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 = () => {
	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: [
				"2024-12",
				"2025-1",
				"2025-2",
				"2025-3",
				"2025-4",
				"2025-5",
				"2025-6",
				"2025-7",
				"2025-8",
				"2025-9",
				"2025-10",
				"2025-11"
			],
			axisLine: {
				lineStyle: {
					color: "#f0f0f0"
				}
			},
			axisLabel: {
				color: "#999",
				fontSize: 12
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {
			type: "value",
			min: 0,
			max: 100,
			interval: 20,
			axisLine: {
				show: false
			},
			axisLabel: {
				color: "#999",
				fontSize: 12
			},
			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "#f0f0f0"
				}
			}
		},
		series: [
			{
				data: [45, 52, 62, 62, 62, 65, 52, 75, 75, 75, 82, 92],
				type: "line",
				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);
};

onMounted(() => {
	initChart();
	initSlider();
	window.addEventListener("resize", () => {
		myChart && myChart.resize();
		sliderChart && sliderChart.resize();
	});
});

const next = () => {
	if (currentIndex.value < cardList.value.length - 5) {
		currentIndex.value++;
	}
};

const prev = () => {
	if (currentIndex.value > 0) {
		currentIndex.value--;
	}
};
</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 {
					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;
						.dynamic-item-header {
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							.item-title {
								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;
								max-width: 500px;
							}
							.item-date {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								color: rgb(95, 101, 108);
							}
						}
						.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;
							white-space: nowrap;
							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);
								}
							}
						}
					}
				}
			}
			.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;
									&.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;
								}
							}
							.item-date {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								color: rgb(95, 101, 108);
								margin-left: 16px;
							}
						}
					}
				}
			}
		}
	}
	.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-y: 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 {
								display: none;
							}
							
							.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;
									// margin-bottom: auto;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}
								
								.event-tags {
									display: flex;
									gap: 8px;
									flex-wrap: wrap;
									margin-top: 4px;
									
									.tag {
										padding: 2px 8px;
										border-radius: 4px;
										font-size: 14px;
										font-weight: 400;
										font-family: "Microsoft YaHei";
										line-height: 20px;
										border: 1px solid;
										
										&.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>
