<template>
	<div class="wrapper">
		<div class="header">
			<!-- <span>首页 </span>> <span>综合检索 </span> -->
			<div class="header-item">首页</div>
			<div class="header-item">></div>
			<div class="header-item">综合检索</div>
		</div>
		<div class="main">
			<div class="main-header">
				<div class="title">{{ "一站式信息智能检索子系统" }}</div>
				<div class="desc">{{ "汇聚全球科技政策、企业动态与管制清单的权威信息检索与分析平台" }}</div>
				<div class="search">
					<div class="search-left">
						<el-input placeholder="搜索关键词" style="width: 700px; height: 100%" />
						<div class="btn1" @click="handleToChat">
							<div class="icon">
								<img src="./assets/images/ai-icon.png" alt="" />
							</div>
							<div class="text">{{ "智能问答" }}</div>
						</div>
						<div class="btn2" @click="handleToSearchResults">
							<div class="icon">
								<img src="./assets/images/search-icon.png" alt="" />
							</div>
							<div class="text">{{ "全文搜索" }}</div>
						</div>
					</div>
					<div class="search-right">{{ "高级检索" }}</div>
				</div>
				<div class="info">
					<div class="item" v-for="(item, index) in headerInfoList" :key="index">
						<div class="num">{{ item.num }}</div>
						<div class="name">{{ item.name }}</div>
					</div>
				</div>
			</div>
			<div class="main-main">
				<div class="main-main-top">
					<div class="box1">
						<div class="box-header">
							<div class="icon">
								<img src="./assets/images/box-header-icon.png" alt="" />
							</div>
							<div class="title">{{ "热点科技动向" }}</div>
							<div class="box-header-right">{{ "换一批" }}</div>
						</div>
						<div class="box1-main">
							<div class="box1-item" v-for="(item, index) in box1List" :key="index">
								<div class="title">{{ item.title }}</div>
								<div class="tag-box">
									<div
										class="tag"
										v-for="(val, idx) in box1List[index].tagList"
										:key="idx"
										:class="{ tag1: val.status === 1, tag2: val.status === 2, tag3: val.status === 3 }"
									>
										{{ val.name }}
									</div>
								</div>
								<div class="time">{{ item.time }}</div>
							</div>
						</div>
					</div>
					<div class="box2">
						<div class="box-header">
							<div class="icon">
								<img src="./assets/images/box-header-icon.png" alt="" />
							</div>
							<div class="title">{{ "热点科技安全话题" }}</div>
						</div>
						<div class="box2-main" id="box2Chart"></div>
					</div>
				</div>
				<div class="main-main-footer">
					<div class="box3">
						<div class="box-header">
							<div class="icon">
								<img src="./assets/images/box-header-icon.png" alt="" />
							</div>
							<div class="title">{{ "智能推荐" }}</div>
						</div>
						<div class="box3-main">
							<div class="box3-item" v-for="(item, index) in box3List" :key="index">
								<div class="item-left">
									<img :src="item.img" alt="" />
								</div>
								<div class="item-right">
									<div class="title">{{ item.title }}</div>
									<div class="content">{{ item.content }}</div>
									<div class="item-right-footer">
										<div class="time">{{ item.time }}</div>
										<div
											class="tag"
											:class="{
												tag1: item.tag.status === 1,
												tag2: item.tag.status === 2,
												tag3: item.tag.status === 3
											}"
										>
											{{ item.tag.name }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="main-main-footer-footer">
						<div class="footer-left">{{ "共12894条法案" }}</div>
						<div class="footer-right">
							<el-pagination background layout="prev, pager, next" :total="96" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import router from "@/router/index";
import getWordCloudChart from "./utils/wordCloud";
import setChart from "@/utils/setChart";

import Img1 from "./assets/images/box3-img1.png";
import Img2 from "./assets/images/box3-img2.png";
import Img3 from "./assets/images/box3-img3.png";
import Img4 from "./assets/images/box3-img4.png";
import Img5 from "./assets/images/box3-img5.png";

const headerInfoList = ref([
	{
		name: "美国",
		num: 36447
	},
	{
		name: "欧盟",
		num: 14433
	},
	{
		name: "日本",
		num: 1986
	},
	{
		name: "韩国",
		num: 341
	},
	{
		name: "其他",
		num: 12548
	}
]);

const box1List = ref([
	{
		title: "openAI 推出 AI 搜索浏览器 Atlas，直接挑战谷歌 Chrome 的主导地位",
		tagList: [{ name: "人工智能", status: 1 }],
		time: "2024年12月"
	},
	{
		title: "2025 年 11 月 6 日，2025 年世界互联网大会领先科技奖在浙江乌镇揭晓，清华大学、中国科学院计算技术...",
		tagList: [{ name: "互联网", status: 2 }],
		time: "2024年12月"
	},
	{
		title: "上海交通大学建成中国首条光子芯片中试线，推出实用化大规模高速可编程光量子计算芯片。",
		tagList: [{ name: "芯片", status: 1 }],
		time: "2024年12月"
	},
	{
		title: "ALTO Robotics 公司的协作式移动机器人运用模块化结构，专为深度人机协作场景设计，能够显著提升生产...",
		tagList: [{ name: "机器人", status: 3 }],
		time: "2024年12月"
	},
	{
		title: "国际氢能燃料电池协会发布《AI 技术在氢能领域的应用研究》成果，总结 AI + 氢能实践并给出推动氢能产...",
		tagList: [
			{ name: "燃料电池", status: 3 },
			{ name: "AI", status: 2 }
		],
		time: "2024年12月"
	},
	{
		title: "百度推出 “剧本驱动多模协同的高拟真数字人技术”，提升数字人直播内容质量和交互能力。",
		tagList: [
			{ name: "数字人", status: 2 },
			{ name: "稳定币", status: 1 }
		],
		time: "2024年12月"
	},
	{
		title: "中国科学院微小卫星创新研究院的 “千帆星座卫星规模化研制” 项目，展示着星座商用步伐的提速。",
		tagList: [
			{ name: "中科院", status: 3 },
			{ name: "卫星", status: 2 }
		],
		time: "2024年12月"
	},
	{
		title: "RAER Therapeutics 公司利用创新开发平台，针对各类已知罕见病展开研究，为全球罕见病患者带来新希望。",
		tagList: [{ name: "罕见病", status: 2 }],
		time: "2024年12月"
	}
]);

const box2Data = ref([
	{ name: "限制中国获取能源技术", value: 100 },
	{ name: "未实现赤字控制目标", value: 66 },
	{ name: "关注核聚变能源研究", value: 77 },
	{ name: "抵制外国人才争夺", value: 35 },
	{ name: "进行可再生能源税收减免", value: 88 },
	{ name: "评估中美现代化技术", value: 57 },
	{ name: "应对中国制造2025战略", value: 72 },
	{ name: "实施能源税收延期", value: 18 },
	{ name: "限制采购中国产电池", value: 34 },
	{ name: "加强美国在核能领域得到领导力", value: 16 },
	{ name: "发展替代燃料", value: 72 },
	{ name: "发展风能", value: 58 },
	{ name: "发展太阳能", value: 24 },
	{ name: "施加额外能源出口限制", value: 33 },
	{ name: "评估中美能源技术", value: 47 },
	{ name: "禁止资助中国能源项目", value: 32 },
	{ name: "不得向中国机构提供援助", value: 62 },
	{ name: "开展先进生物能源计划", value: 51 },
	{ name: "减少燃料对外依赖", value: 81 },
	{ name: "加强供应链风险管理", value: 73 }
]);

const box3List = ref([
	{
		img: Img1,
		title: "美元 “上链”！美国联邦金融稳定币监管法案正式生效",
		content:
			"《指导与建立美国稳定币国家创新法案》落地，要求稳定币发行方以 1:1 比例储备美元现金、短期美债等高度流动资产，建立联邦与州双轨监管体系。",
		time: "创建时期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: Img2,
		title: "蓝天航空材料有限公司 (Blue Sky Aviation Materials Co., Ltd)",
		content:
			"专业从事航空航天材料研发、生产和销售的高科技企业，主要产品包括航空发动机叶片、结构胶等关键航空材料，产品广泛应用于国内外主流航空公司。",
		time: "创建时期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: Img3,
		title: "拒绝政府数字货币！美国众议院通过反 CBDC 监控法案",
		content:
			"《反 CBDC 监控国家法案》以保护金融隐私为核心，拟永久禁止美联储发行数字美元，禁止其向个人直接或间接发行 CBDC，也不得将 CBDC 用于货币政策工具或开展相关...",
		time: "创建时期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: Img4,
		title: "降低机构入场门槛！SEC 撤销银行加密托管负债要求",
		content:
			"美国 SEC 出台新规，撤销银行参与加密资产托管的相关负债限制，简化合规流程。这一调整为银行等传统金融机构进入加密市场扫清关键障碍，有望吸引更多机构资金流入...",
		time: "创建时期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: Img5,
		title: "皮特・阿吉拉尔（Pete Aguilar）",
		content: "所属州：内华达州、出生年月：1982年、现任状态：现任、发起法案数量：11项",
		time: "出生日期：1986-04-21",
		tag: {
			name: "重要人物",
			status: 2
		}
	}
]);

// 点击智能问答，进入智能问答页
const handleToChat = () => {
	router.push({
		path: "/chat"
	});
};

// 点击全文搜索，进入搜索结果页
const handleToSearchResults = () => {
	router.push({
		path: "/searchResults"
	});
};

onMounted(() => {
	const box2Chart = getWordCloudChart(box2Data.value);
	setChart(box2Chart, "box2Chart");
});
</script>

<style lang="scss" scoped>
.wrapper {
	.box-header {
		position: relative;
		height: 48px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(234, 236, 238, 1);
		.icon {
			width: 19px;
			height: 19px;
			margin-left: 21px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.title {
			margin-left: 20px;
			height: 26px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			letter-spacing: 0px;
			text-align: left;
		}
		.box-header-right {
			position: absolute;
			top: 12px;
			right: 27px;
			height: 24px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: right;
		}
	}
	.header {
		height: 64px;
		color: #fff;
		font-family: Microsoft YaHei;
		font-size: 20px;
		font-weight: 700;
		line-height: 26px;
		line-height: 64px;
		background: url("./assets/images/header-bg.png");
		box-sizing: border-box;
		padding-left: 160px;
		display: flex;
		.header-item {
			margin: 0 3px;
		}
		.back-item {
			cursor: pointer;
			&:hover {
				color: #ccc;
			}
		}
	}
	.main {
		width: 100%;
		height: calc(100vh - 160px);
		background: url("./assets/images/background.png") no-repeat;
		background-size: 100% 100%;
		.main-header {
			height: 491px;
			.title {
				margin-top: 80px;
				height: 66px;
				color: rgba(34, 41, 52, 1);
				font-family: Microsoft YaHei;
				font-size: 50px;
				font-weight: 700;
				line-height: 66px;
				text-align: center;
			}
			.desc {
				height: 24px;
				margin-top: 16px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 18px;
				font-weight: 400;
				line-height: 24px;
				text-align: center;
			}
			.search {
				margin-top: 80px;
				height: 48px;
				display: flex;
				justify-content: center;
				gap: 16px;
				.search-left {
					width: 960px;
					height: 48px;
					box-sizing: border-box;
					border: 1px solid rgba(255, 255, 255, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 0.65);
					position: relative;
					.btn1 {
						position: absolute;
						top: 3px;
						right: 131px;
						width: 120px;
						height: 42px;
						box-sizing: border-box;
						border: 1px solid rgba(5, 95, 194, 1);
						border-radius: 8px;
						background: rgba(255, 255, 255, 1);
						display: flex;
						justify-content: center;
						gap: 8px;
						cursor: pointer;
						.icon {
							margin-top: 12px;
							width: 20px;
							height: 13px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							margin-top: 9px;
							width: 72px;
							height: 24px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 400;
							line-height: 24px;
							text-align: center;
						}
					}
					.btn2 {
						position: absolute;
						top: 3px;
						right: 3px;
						width: 120px;
						height: 42px;
						border-radius: 8px;
						background: var(--color-main-active);
						display: flex;
						justify-content: center;
						gap: 8px;
						cursor: pointer;

						.icon {
							margin-top: 10px;
							width: 22px;
							height: 22px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.text {
							margin-top: 9px;
							width: 72px;
							height: 24px;
							color: #fff;
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 400;
							line-height: 24px;
							text-align: center;
						}
					}
				}
				.search-right {
					height: 48px;
					color: rgba(5, 95, 194, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 48px;
				}
			}
			.info {
				margin-top: 40px;
				height: 60px;
				display: flex;
				justify-content: center;
				gap: 42px;
				.item {
					padding: 0 8px;
					.num {
						height: 22px;
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 36px;
						font-weight: 700;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: center;
					}
					.name {
						margin-top: 14px;
						height: 24px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: center;
					}
				}
			}
		}
		.main-main {
			.main-main-top {
				display: flex;
				gap: 16px;
				justify-content: center;
				.box1 {
					width: 1064px;
					height: 450px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);
					.box1-main {
						.box1-item {
							width: 1016px;
							margin-left: 24px;
							height: 46px;
							display: flex;
							align-items: center;
							border-bottom: 1px solid rgba(240, 242, 244, 1);
							.title {
								width: 768px;
								height: 46px;
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 46px;
								letter-spacing: 0px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.tag-box {
								width: 150px;
								display: flex;
								justify-content: flex-end;
								align-items: center;
								gap: 12px;
								.tag {
									max-width: 75px;
									height: 24px;
									line-height: 24px;
									padding: 0 8px;
									text-align: center;
									box-sizing: border-box;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									border-radius: 4px;
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
								}
								.tag1 {
									border: 1px solid rgba(255, 204, 199, 1);
									background: rgba(255, 241, 240, 1);
									color: rgba(255, 77, 79, 1);
								}
								.tag2 {
									color: rgba(250, 173, 20, 1);
									border: 1px solid rgba(255, 241, 184, 1);
									background: rgba(255, 251, 230, 1);
								}
								.tag3 {
									color: rgba(22, 119, 255, 1);
									border: 1px solid rgba(186, 224, 255, 1);
									background: rgba(230, 244, 255, 1);
								}
							}
							.time {
								margin-left: 2px;
								width: 100px;
								height: 22px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;
								line-height: 22px;
								letter-spacing: 0px;
								text-align: right;
							}
						}
					}
				}
				.box2 {
					width: 520px;
					height: 450px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);
					.box2-main {
						height: 390px;
					}
				}
			}
			.main-main-footer {
				margin-top: 16px;
				.box3 {
					margin: 0 auto;
					width: 1600px;
					height: 695px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					background: rgba(255, 255, 255, 1);
					.box3-main {
						padding-top: 8px;
						.box3-item {
							margin-left: 24px;
							height: 122px;
							border-bottom: 1px solid rgba(234, 236, 238, 1);
							display: flex;
							.item-left {
								width: 135px;
								height: 90px;
								margin-top: 16px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.item-right {
								margin-left: 16px;
								margin-top: 16px;
								.title {
									height: 26px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 20px;
									font-weight: 700;
									line-height: 26px;
									letter-spacing: 0px;
									text-align: left;
								}
								.content {
									margin-top: 8px;
									width: 1236px;
									height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
								}
								.item-right-footer {
									display: flex;
									margin-top: 9px;
									.time {
										width: 152px;
										height: 22px;
										color: rgba(132, 136, 142, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 22px;
										letter-spacing: 0px;
										text-align: left;
									}
									.tag {
										margin-left: 16px;
										height: 24px;
										line-height: 24px;
										padding: 0 8px;
										text-align: center;
										box-sizing: border-box;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										border-radius: 4px;
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
									}
									.tag1 {
										border: 1px solid rgba(255, 204, 199, 1);
										background: rgba(255, 241, 240, 1);
										color: rgba(255, 77, 79, 1);
									}
									.tag2 {
										color: rgba(250, 173, 20, 1);
										border: 1px solid rgba(255, 241, 184, 1);
										background: rgba(255, 251, 230, 1);
									}
									.tag3 {
										color: rgba(22, 119, 255, 1);
										border: 1px solid rgba(186, 224, 255, 1);
										background: rgba(230, 244, 255, 1);
									}
								}
							}
						}
					}
				}
				.main-main-footer-footer {
					width: 1600px;
					margin: 0 auto;
					height: 95px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.footer-left {
						height: 20px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 20px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}
		}
	}
}

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