<template>
	<!-- 面包屑导航 -->
	<div class="breadcrumb">
		<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
		<span>科技智库 </span>
	</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>
		</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="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">
					<el-icon class="signal-icon"><Warning /></el-icon>
					<span class="signal-title">风险信号</span>
					<el-badge :value="5" class="signal-badge" />
					<span class="more-link">更多 ></span>
				</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">
								<el-tag :type="signal.type" size="small" class="signal-tag">{{ signal.tag }}</el-tag>
								<div class="signal-text">{{ signal.content }}</div>
							</div>
							<div class="signal-time">{{ signal.time }}</div>
						</div>
					</div>
				</div>

				<el-button type="primary" class="process-btn" block>
					<el-icon><Setting /></el-icon>
					风险处理
				</el-button>
			</div>
		</div>

		<!-- 智库展示区域 -->
		<div class="think-tanks-section">
			<div v-for="tank in thinkTanks" :key="tank.id" class="think-tank-card" @click="handleClick(tank)">
				<div class="tank-header">
					<div class="tank-logo">
						<el-image :src="$withFallbackImage(tank.logo, tank.id)" :alt="tank.name" />
					</div>
					<div class="tank-country">{{ tank.country }}</div>
				</div>
				<div class="tank-name">{{ tank.name }}</div>
				<div class="tank-description" :title="tank.describe">{{ tank.describe }}</div>
				<div class="tank-tags">
					<el-tag v-for="tag in tank.tags" :key="tag" type="primary" size="small">
						{{ tag }}
					</el-tag>
				</div>
			</div>

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

		<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 "@/components/ReportList.vue";
import { useRouter } from "vue-router";
import rand from "@/assets/images/rand.png";
import brookings from "@/assets/images/brookings.png";
import mit from "@/assets/images/mit.png";
import itif from "@/assets/images/itif.png";
import mckinsley from "@/assets/images/mckinsey.png";
import { getThinkTankList } from "@/api";

const router = useRouter();

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

// 世界地图数据 - 各国智库数量统计
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;
};
const handleClick = tank => {
	router.push({ name: "ThinkTankDetail", params: { id: tank.id } });
};

// 组件挂载后初始化地图
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;
}

.tech-think-tank {
	max-width: 1400px;
	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;
}

.search-section {
	margin-bottom: 30px;
	display: flex;
	justify-content: center;
}

.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;
}

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

.signal-icon {
	color: #f56c6c;
	margin-right: 2px;
}

.signal-title {
	font-weight: 500;
	margin-right: 8px;
}

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

.more-link {
	color: #409eff;
	font-size: 14px;
	cursor: pointer;
}

.signal-list {
	margin-bottom: 40px;
	height: 330px;
	overflow-y: auto;
}

.signal-item {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #f0f0f0;
}

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

.signal-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

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

.signal-tag {
	align-self: flex-start;
}

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

.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;
}

.think-tank-card {
	background: white;
	border-radius: 8px;
	padding: 12px;
	border: 1px solid #e4e7ed;
	width: 220px;
	// height: 180px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	cursor: pointer;
}

.tank-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.tank-logo {
	width: 60px;
	height: 60px;
	background: #f0f0f0;
	border-radius: 8px;
	margin-right: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	.el-image {
		width: 100%;
		height: 100%;
		border-radius: 8px;
		object-fit: contain;
	}
}

.tank-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tank-country {
	background: #f0f0f0;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	color: #666;
}

.tank-name {
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 10px;
	color: #333;
}

.tank-description {
	font-size: 12px;
	color: #666;
	flex: 1;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	margin-bottom: 5px;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.tank-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
}

.view-all {
	text-align: center;
	width: 180px;
	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;
}
</style>