<template>
	<!-- 面包屑导航 -->
	<div class="breadcrumb">
		<div class="header-item">国家科技安全</div>
		<div class="header-item">></div>
		<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
		<div class="header-item">></div>
		<div class="header-item">科技智库</div>
	</div>
	<div class="tech-think-tank">
		<!-- 搜索区域 -->
		<div class="search-section">
			<!-- <el-input v-model="searchText" placeholder="搜索智库、报告或政策建议" class="search-input" size="large">
				<template #append>
					<el-button type="primary" style="background: #1677ff; color: #fff" :icon="Search">搜索</el-button>
				</template>
			</el-input> -->
			<el-input v-model="searchText" style="width: 800px; height: 100%" placeholder="搜索智库、报告或政策建议" />
			<div class="search">
				<div class="search-icon">
					<img src="@/assets/icons/search-icon.png" alt="" />
				</div>
				<div class="search-text">搜索</div>
			</div>
		</div>

		<!-- 统计数据 -->
		<div class="stats-section">
			<div class="stat-item">
				<div class="stat-number">128</div>
				<div class="stat-label">追踪智库数量</div>
			</div>
			<div class="stat-item">
				<div class="stat-number">42</div>
				<div class="stat-label">本月新增报告</div>
			</div>
			<div class="stat-item">
				<div class="stat-number">18</div>
				<div class="stat-label">重点政策建议</div>
			</div>
			<div class="stat-item">
				<div class="stat-number">12</div>
				<div class="stat-label">热点科技领域</div>
			</div>
		</div>
		<div class="home-main-header-footer-link">
			<ClickableCard text="最新动态" @click="scrollToTop('position1')" target="_blank" />
			<ClickableCard text="资讯要闻" @click="scrollToTop('position2')" target="_blank" />
			<ClickableCard text="数据总览" @click="scrollToTop('position3')" target="_blank" />
			<ClickableCard text="资源库" @click="scrollToTop('position4')" target="_blank" />
		</div>

		<!-- 智库展示区域 -->
		<div class="think-tanks-section">
			<ThinkTankCard v-for="(tank, index) in thinkTanks" :key="tank.id" :tank="tank" :index="index" @click="handleClick" />

			<div class="view-all">
				<span class="view-all-link">查看全部智库 ></span>
			</div>
		</div>

		<DivideHeader id="position1" style="margin: 30px auto" :titleText="'最新动态'"></DivideHeader>
		<!-- 主要内容区域 -->
		<div class="main-content">
			<!-- 左侧数据分布 -->
			<div class="left-section">
				<div class="section-header">
					<el-icon class="location-icon"><Location /></el-icon>
					<span class="section-title">数据分布</span>
					<div class="time-filters">
						<span :class="{ active: activeTime === '今天' }" @click="activeTime = '今天'">今天</span>
						<span :class="{ active: activeTime === '本周' }" @click="activeTime = '本周'">本周</span>
						<span :class="{ active: activeTime === '本月' }" @click="activeTime = '本月'">本月</span>
						<span :class="{ active: activeTime === '今年' }" @click="activeTime = '今年'">今年</span>
					</div>
				</div>

				<!-- 地图区域 -->
				<div class="map-container">
					<div ref="worldMapRef" class="world-map" style="width: 100%; height: 400px"></div>
				</div>
			</div>

			<!-- 右侧网络信号 -->
			<div class="right-section">
				<div class="signal-header">
					<div class="icon">
						<img src="@/assets/images/icon-warning.png" alt="" />
					</div>
					<div class="signal-title-box">
						<span class="signal-title">风险信号</span>
						<el-badge :value="5" class="signal-badge" />
					</div>
				</div>

				<div class="signal-list">
					<div v-for="signal in signals" :key="signal.id" class="signal-item">
						<div class="signal-content">
							<div class="signal-left">
								<div
									size="small"
									class="signal-tag"
									:class="{
										tag1: signal.type === 'success',
										tag2: signal.type === 'warning',
										tag3: signal.type === 'danger'
									}"
								>
									{{ signal.tag }}
								</div>
								<div class="signal-text">{{ signal.content }}</div>
							</div>
							<div class="signal-time">{{ signal.time }}</div>
						</div>
					</div>
				</div>
				<div class="box2-footer" @click="handleToMoreRiskSignal">
					<div class="icon">
						<img src="@/assets/images/more-signal.png" alt="" />
					</div>
					<div class="text">{{ "查看更多" }}</div>
				</div>
				<!-- <el-button type="primary" class="process-btn" block> 查看更多 </el-button> -->
			</div>
		</div>
		<DivideHeader id="position2" style="margin: 30px auto" :titleText="'资讯要闻'"></DivideHeader>
		<!-- 资讯要闻 -->
		<div class="center-center">
			<div class="box3">
				<div class="box3-header">
					<div class="box3-header-left">
						<div class="box3-header-icon">
							<img src="@/views/bill/billHome/assets/images/box3-header-icon.png" alt="" />
						</div>
						<div class="box3-header-title">{{ "新闻资讯" }}</div>
						<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
					</div>
				</div>
				<div class="box3-main">
					<div class="box3-item" v-for="(news, index) in newsList" :key="index">
						<div class="left">
							<img :src="news.img" alt="" />
						</div>
						<div class="right">
							<div class="right-top">
								<div class="title">{{ news.title }}</div>
								<div class="time">{{ news.from }}</div>
							</div>
							<div class="right-footer">{{ news.content }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="box4">
				<div class="box4-header">
					<div class="header-icon">
						<img src="@/views/bill/billHome/assets/images/box4-header-icon.png" alt="" />
					</div>
					<div class="header-title">{{ "社交媒体" }}</div>
				</div>
				<div class="box4-main">
					<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
						<div class="left">
							<img :src="item.img" alt="" />
						</div>
						<div class="right">
							<div class="right-top">
								<div class="name">{{ item.name }}</div>
								<div class="time">{{ item.time }}</div>
							</div>
							<div class="content">{{ item.content }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<DivideHeader id="position3" style="margin: 30px auto" :titleText="'数据总览'"></DivideHeader>
		<DataOverview />
		<DivideHeader id="position4" style="margin: 30px auto" :titleText="'资源库'"></DivideHeader>
		<ReportList />
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { Search, Location, Warning, Setting } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import ReportList from "@/views/thinkTank/components/ReportList.vue";
import { useRouter } from "vue-router";
import scrollToTop from "@/utils/scrollToTop";

import { mockThinkTankList } from "./mockData";
import { getThinkTankList } from "@/api";
import ClickableCard from "@/views/finance/components/link.vue";
import DivideHeader from "@/components/DivideHeader.vue";
import DataOverview from "./components/DataOverview.vue";
import ThinkTankCard from "./components/ThinkTankCard.vue";
import News1 from "@/views/bill/billHome/assets/images/news1.png";
import News2 from "@/views/bill/billHome/assets/images/news2.png";
import News3 from "@/views/bill/billHome/assets/images/news3.png";
import News4 from "@/views/bill/billHome/assets/images/news4.png";
import News5 from "@/views/bill/billHome/assets/images/news5.png";

import Message1 from "@/views/bill/billHome/assets/images/message-icon1.png";
import Message2 from "@/views/bill/billHome/assets/images/message-icon2.png";
import Message3 from "@/views/bill/billHome/assets/images/message-icon3.png";
const router = useRouter();

// 返回首页
const handleBackHome = () => {
	router.push({
		path: "/overview"
	});
};

const searchText = ref("");
const activeTime = ref("本月");
const worldMapRef = ref(null);

// 新闻资讯
const newsList = ref([
	{
		img: News1,
		title: "美政府停摆仍持续，拨款法案存缺陷，但两党磋商露曙光",
		content: `美国政府停摆已持续34天，距离历史上最长的停摆纪录仅差一天，参议院已先后13次尝试...`,
		from: "11-4 · 华盛顿邮报"
	},
	{
		img: News2,
		title: "美参议院通过决议，要求终止特朗普全球关税政策",
		content: `参议院以51票赞成、47票反对通过一项决议，旨在终止特朗普实施的全面关税政策，四名......`,
		from: "11-4 · 纽约时报"
	},
	{
		img: News3,
		title: "美众院通过950亿美元对外援助法案，包含对台军援",
		content: `国会众议院在4月通过了大规模对外援助法案，其中包括为“印太安全”提供资金的条款，......`,
		from: "11-3 · 洛杉矶时报"
	},
	{
		img: News4,
		title: "“大而美”法案在激烈争议中通过",
		content: `特朗普力推的大规模税收与支出法案在国会以微弱优势通过。该法案因大幅削减医疗补助和......`,
		from: "11-3 · 今日美国"
	},
	{
		img: News5,
		title: "美政府“停摆”追平历史最长纪录，民生多领域受重创",
		content: `联邦政府“停摆”进入第35天，追平历史纪录。食品救济项目资金中断，数百万低收入民......`,
		from: "11-2 ·  ​福克斯新闻网"
	}
]);

// 社交媒体
const messageList = ref([
	{
		img: Message1,
		name: "唐纳德·特朗普",
		time: "15:23 · 发布于真实社交",
		content: `埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。`
	},
	{
		img: Message2,
		name: "埃隆·马斯克",
		time: "14:49 · 发布于X",
		content: `如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。`
	},
	{
		img: Message3,
		name: "塞巴斯蒂安·马拉比",
		time: "11:05 · 发布于X",
		content: `提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。`
	}
]);
// 世界地图数据 - 各国智库数量统计
const mapData = ref([
	{ name: "United States", value: 6, itemStyle: { color: "#ff4757" } },
	{ name: "China", value: 3, itemStyle: { color: "#ffa726" } },
	{ name: "United Kingdom", value: 2, itemStyle: { color: "#42a5f5" } },
	{ name: "Germany", value: 1, itemStyle: { color: "#66bb6a" } },
	{ name: "Japan", value: 1, itemStyle: { color: "#66bb6a" } },
	{ name: "France", value: 1, itemStyle: { color: "#66bb6a" } }
]);

// 初始化世界地图
const initWorldMap = async () => {
	if (!worldMapRef.value) return;

	const chart = echarts.init(worldMapRef.value);

	// 使用可靠的世界地图数据源
	try {
		const response = await fetch("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson");
		const geoJson = await response.json();

		// 注册世界地图
		echarts.registerMap("world", geoJson);

		const option = {
			title: {
				text: "全球智库分布",
				left: "center",
				top: 20,
				textStyle: {
					color: "#333",
					fontSize: 18,
					fontWeight: "bold"
				}
			},
			tooltip: {
				trigger: "item",
				formatter: function (params) {
					if (params.seriesType === "map") {
						const data = mapData.value.find(item => item.name === params.name);
						if (data) {
							return `${params.name}<br/>智库数量: ${data.value}个`;
						}
						return `${params.name}<br/>暂无数据`;
					}
					return params.name;
				}
			},
			visualMap: {
				min: 0,
				max: 6,
				left: "left",
				top: "bottom",
				text: ["高", "低"],
				calculable: true,
				inRange: {
					color: ["#e3f2fd", "#1976d2"]
				},
				textStyle: {
					color: "#333"
				}
			},
			series: [
				{
					name: "智库数量",
					type: "map",
					map: "world",
					roam: true,
					emphasis: {
						label: {
							show: true
						}
					},
					data: [
						{ name: "United States of America", value: 6, itemStyle: { color: "#ff4757" } },
						{ name: "China", value: 3, itemStyle: { color: "#ffa726" } },
						{ name: "United Kingdom", value: 2, itemStyle: { color: "#42a5f5" } },
						{ name: "Germany", value: 1, itemStyle: { color: "#66bb6a" } },
						{ name: "Japan", value: 1, itemStyle: { color: "#66bb6a" } },
						{ name: "France", value: 1, itemStyle: { color: "#66bb6a" } }
					],
					itemStyle: {
						borderColor: "#fff",
						borderWidth: 1
					}
				}
			]
		};

		chart.setOption(option);
	} catch (error) {
		console.log("使用备用地图方案");
		// 如果外部数据源失败，使用内置的简化世界地图
		const option = {
			title: {
				text: "全球智库分布",
				left: "center",
				top: 20,
				textStyle: {
					color: "#333",
					fontSize: 18,
					fontWeight: "bold"
				}
			},
			tooltip: {
				trigger: "item",
				formatter: function (params) {
					return `${params.name}<br/>智库数量: ${params.value}个`;
				}
			},
			geo: {
				type: "map",
				map: "world",
				roam: true,
				itemStyle: {
					color: "#f0f0f0",
					borderColor: "#999",
					borderWidth: 0.5
				},
				emphasis: {
					itemStyle: {
						color: "#e0e0e0"
					}
				},
				regions: [
					{
						name: "United States",
						itemStyle: {
							color: "#ff4757"
						}
					},
					{
						name: "China",
						itemStyle: {
							color: "#ffa726"
						}
					},
					{
						name: "United Kingdom",
						itemStyle: {
							color: "#42a5f5"
						}
					}
				]
			},
			series: [
				{
					name: "智库分布",
					type: "scatter",
					coordinateSystem: "geo",
					data: [
						{ name: "美国", value: [-95, 37, 6], itemStyle: { color: "#ff4757" } },
						{ name: "中国", value: [104, 35, 3], itemStyle: { color: "#ffa726" } },
						{ name: "英国", value: [-3, 55, 2], itemStyle: { color: "#42a5f5" } },
						{ name: "德国", value: [10, 51, 1], itemStyle: { color: "#66bb6a" } },
						{ name: "日本", value: [138, 36, 1], itemStyle: { color: "#66bb6a" } },
						{ name: "法国", value: [2, 46, 1], itemStyle: { color: "#66bb6a" } }
					],
					symbolSize: function (val) {
						return Math.max(val[2] * 15, 25);
					},
					label: {
						show: true,
						formatter: function (params) {
							return params.data.name + "\n" + params.data.value[2] + "个";
						},
						position: "top",
						textStyle: {
							color: "#333",
							fontSize: 12,
							fontWeight: "bold"
						}
					},
					emphasis: {
						scale: true,
						scaleSize: 10
					}
				}
			]
		};

		chart.setOption(option);
	}

	// 响应式处理
	window.addEventListener("resize", () => {
		chart.resize();
	});
};

const signals = ref([
	{
		id: 1,
		type: "danger",
		tag: "特别重大",
		content: "兰德科技智库发布2025中美年度科技报告",
		time: "一天前"
	},
	{
		id: 2,
		type: "danger",
		tag: "特别重大",
		content: "信息技术与创新基金会发布《中国正在迅速成...",
		time: "一天前"
	},
	{
		id: 3,
		type: "warning",
		tag: "重大风险",
		content: "战略与国际研究中心发布《DeepSeek、华为、...",
		time: "一天前"
	},
	{
		id: 4,
		type: "warning",
		tag: "重大风险",
		content: "兰德科技智库发布《中国对AI的转型产业政策》",
		time: "一天前"
	},
	{
		id: 5,
		type: "success",
		tag: "一般风险",
		content: "兰德科技智库发布《中美对抗、竞争和合作...",
		time: "一天前"
	}
]);

const thinkTanks = ref([]);

const getThinkTanks = async () => {
	const { data } = await getThinkTankList();
	// thinkTanks.value = data;
	thinkTanks.value = [...mockThinkTankList];
};
const handleClick = tank => {
	// router.push({ name: "ThinkTankDetail", params: { id: tank.id } });
	const curRoute = router.resolve({ name: "ThinkTankDetail", params: { id: tank.id } });
	window.open(curRoute.href, "_blank");
};

// 查看更多风险信号
const handleToMoreRiskSignal = () => {
	const route = router.resolve("/riskSignal");
	window.open(route.href, "_blank");
};

// 查看更多新闻资讯
const handleToMoreNews = () => {
	const route = router.resolve("/newsBrief");
	window.open(route.href, "_blank");
};

// 组件挂载后初始化地图
onMounted(() => {
	getThinkTanks();
	nextTick(() => {
		initWorldMap();
	});
});
</script>

<style scoped lang="scss">
.breadcrumb {
	width: 100%;
	height: 64px;
	background: url("@/assets/images/nav-bg.png") no-repeat;
	color: #fff;
	font-family: Microsoft YaHei;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	line-height: 64px;
	box-sizing: border-box;
	padding-left: 160px;
	display: flex;
	.header-item {
		margin: 0 3px;
	}
	.back-item {
		cursor: pointer;
		&:hover {
			color: #ccc;
		}
	}
}

.tech-think-tank {
	font-family: Microsoft YaHei;
	max-width: 1650px;
	margin: 0 auto;
	margin-top: 31px;
	padding: 20px;
	background: url("@/assets/images/background.png") no-repeat;
	background-position: center -100px;
	background-size: 100% 100%;
	min-height: 100vh;
	.home-main-header-footer-link {
		display: flex;
		gap: 30px;
		padding: 30px 0;
		justify-content: center;
	}
	.center-center {
		margin-top: 21px;
		height: 450px;
		display: flex;
		.box3 {
			width: 792px;
			height: 450px;
			box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
			background: rgba(255, 255, 255, 1);
			.box3-header {
				height: 48px;
				border-bottom: 1px solid rgba(240, 242, 244, 1);
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				padding: 0 20px;
				position: relative;
				.box3-header-left {
					display: flex;
					.box3-header-icon {
						margin-top: 16px;
						width: 19px;
						height: 19px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.box3-header-title {
						margin-left: 19px;
						height: 48px;
						color: rgba(20, 89, 187, 1);
						font-family: Microsoft YaHei;
						font-size: 20px;
						font-weight: 700;
						line-height: 48px;
					}
					.more {
						width: 49px;
						height: 24px;
						position: absolute;
						top: 14px;
						right: 27px;
						color: rgba(20, 89, 187, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						cursor: pointer;
					}
				}
			}
			.box3-main {
				height: 402px;
				overflow-y: auto;
				overflow-x: hidden;
				padding-top: 6px;
				.box3-item {
					display: flex;
					height: 77px;
					width: 749px;
					margin-left: 21px;
					border-bottom: 1px solid rgba(240, 242, 244, 1);
					.left {
						width: 72px;
						height: 48px;
						margin-top: 15px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.right {
						width: 657px;
						margin-left: 20px;
						.right-top {
							width: 657px;
							display: flex;
							justify-content: space-between;
							.title {
								margin-top: 13px;
								width: 520px;
								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.time {
								flex: 1;
								text-align: right;
								height: 22px;
								margin-top: 19px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
							}
						}
						.right-footer {
							width: 657px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
		.box4 {
			margin-left: 20px;
			width: 792px;
			height: 450px;
			box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
			background: rgba(255, 255, 255, 1);
			.box4-header {
				width: 792px;
				height: 48px;
				border-bottom: 1px solid rgba(240, 242, 244, 1);
				display: flex;
				box-sizing: border-box;
				padding-left: 22px;
				position: relative;
				.header-icon {
					margin-top: 15px;
					width: 20px;
					height: 20px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.header-title {
					height: 48px;
					margin-left: 18px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 700;
					line-height: 48px;
				}
				.more {
					width: 49px;
					height: 24px;
					position: absolute;
					top: 14px;
					right: 27px;
					color: rgba(20, 89, 187, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					cursor: pointer;
				}
			}
			.box4-main {
				height: 402px;
				overflow-y: auto;
				box-sizing: border-box;
				padding-top: 8px;
				.box4-main-item {
					margin-top: 16px;
					display: flex;
					margin-left: 21px;
					.left {
						margin-top: 5px;
						width: 36px;
						height: 36px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.right {
						margin-left: 10px;
						width: 690px;
						box-sizing: border-box;
						border: 1px solid rgba(231, 243, 255, 1);
						background: rgba(246, 250, 255, 1);
						padding: 10px 15px;
						.right-top {
							display: flex;
							justify-content: space-between;
							.name {
								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
							}
							.time {
								height: 30px;
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
							}
						}
						.content {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
						}
					}
				}
			}
		}
	}
}

.search-section {
	margin: 0 auto;
	margin-bottom: 30px;
	width: 800px;
	height: 48px;
	border-radius: 10px;
	box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
	background: rgba(255, 255, 255, 1);
	box-sizing: border-box;
	padding: 1px;
	position: relative;
	.search {
		position: absolute;
		right: 1px;
		top: 2px;
		width: 120px;
		height: 44px;
		border-radius: 10px;
		background: var(--color-main-active);
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		.search-icon {
			width: 18px;
			height: 18px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.search-text {
			margin-left: 8px;
			height: 22px;
			color: #fff;
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 22px;
		}
	}
}

.search-input {
	max-width: 800px;
}

.stats-section {
	display: flex;
	justify-content: center;
	gap: 80px;
	margin-bottom: 40px;
}

.stat-item {
	text-align: center;
}

.stat-number {
	font-size: 48px;
	font-weight: bold;
	color: #1459bb;
	line-height: 1;
	margin-bottom: 8px;
}

.stat-label {
	font-size: 14px;
	color: #666;
}

.main-content {
	display: flex;
	gap: 10px;
	margin-bottom: 40px;
	height: 490px;
}

.left-section {
	flex: 2;
	background: white;
	border-radius: 2px;
	padding: 20px;
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.location-icon {
	color: #409eff;
	margin-right: 8px;
}

.section-title {
	font-weight: 500;
	margin-right: auto;
}

.time-filters {
	display: flex;
	gap: 15px;
}

.time-filters span {
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
	color: #666;
}

.time-filters span.active {
	background-color: #409eff;
	color: white;
}

.map-container {
	// height: 300px;
	background: #f0f2f5;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
}

.map-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
	position: relative;
}

.data-point {
	position: absolute;
}

.point-circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.point-circle.yellow {
	background-color: #f39c12;
}

.point-circle.red {
	background-color: #e74c3c;
}

.point-circle.blue {
	background-color: #3498db;
}

.right-section {
	flex: 1;
	background: white;
	border-radius: 2px;
	padding: 20px;
	padding-top: 0px;
}

.signal-header {
	display: flex;
	align-items: center;
	height: 48px;
	box-sizing: border-box;
	padding-right: 20px;
	border-bottom: 1px solid rgba(234, 236, 238, 1);
	.icon {
		width: 24px;
		height: 22px;
		margin-left: 18px;
		margin-top: 4px;
		img {
			width: 100%;
			height: 100%;
		}
	}
}

.signal-title-box {
	display: flex;
	background-color: #c05052;
	padding: 10px;
	color: #fff;
	margin-left: 20px;
}
.signal-title {
	font-weight: 500;
	margin-right: 8px;
}

.signal-badge {
	margin-right: auto;
}

.signal-list {
	height: 370px;
	overflow-y: auto;
}
.box2-footer {
	margin: 10px auto;
	width: 460px;
	height: 42px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	background: var(--color-main-active);
	cursor: pointer;
	.icon {
		width: 16px;
		height: 16px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.text {
		margin-left: 8px;
		color: rgba(255, 255, 255, 1);
		font-family: Microsoft YaHei;
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
	}
}

.signal-item {
	height: 47px;
	line-height: 47px;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.signal-item:last-child {
	border-bottom: none;
}

.signal-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	border-bottom: 1px solid #f0f0f0;
}

.signal-left {
	flex: 1;
	display: flex;
	gap: 6px;
	height: 47px;
	line-height: 47px;
}

.signal-tag {
	margin-top: 4px;
	margin-left: 3px;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	font-family: Microsoft YaHei;
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	box-sizing: border-box;
	padding: 6px 4px;
	text-align: center;
}

.tag1 {
	color: rgba(82, 196, 26, 1) !important;
	background: rgba(246, 255, 237, 1) !important;
}
.tag2 {
	color: rgba(250, 140, 22, 1) !important;
	background: rgba(255, 247, 230, 1) !important;
}
.tag3 {
	background: rgba(255, 241, 240);
	color: rgba(245, 34, 45, 1);
}

.signal-text {
	font-size: 14px;
	color: #333;
	line-height: 1.4;
	word-break: break-word;
	height: 47px;
	line-height: 47px;
}

.signal-time {
	font-size: 12px;
	color: #999;
	white-space: nowrap;
	flex-shrink: 0;
}

.process-btn {
	width: 100%;
}

.think-tanks-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
}

.view-all {
	text-align: center;
	width: 110px;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	padding: 0 5px;
	background: #fff;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.view-all-link {
	color: #1459bb;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	margin: 0 auto;
}

.view-all-link:hover {
	text-decoration: underline;
}

:deep(.el-input__wrapper) {
	box-shadow: none;
}

:deep(.el-input__wrapper) {
	box-shadow: none;
}
:deep(.el-input__wrapper:hover) {
	box-shadow: none !important;
}

:deep(.el-input__wrapper.is-focus) {
	box-shadow: none !important;
}
</style>