<template>
	<div class="wrapper">
		<div class="header">
			<div class="search-box">
				<div class="left">
					<div class="icon">
						<img src="./assets/images/search-icon1.png" alt="" />
					</div>
					<el-input :border="false" style="width: 900px; height: 100%" />
				</div>
				<div class="right">
					<img src="./assets/images/ai-icon.png" alt="" />
				</div>
			</div>
			<div class="tab-box">
				<div class="tab-left">
					<div class="tab" :class="{ tabActive: item.isActive }" v-for="(item, index) in tabList" :key="index">
						{{ item.name }}
					</div>
				</div>
				<div class="tab-right">
					<div class="text">{{ "全部国家" }}</div>
					<div class="icon">
						<img src="./assets/images/down.png" alt="" />
					</div>
				</div>
			</div>
			<div class="tag-box">
				<div class="tag" v-for="(item, index) in tagList" :key="index">{{ item.name }}</div>
			</div>
			<div class="info-box">
				<div class="info-left">
					<div class="text-box">
						搜索结果<span class="text-1">{{ "356" }}</span
						>条
					</div>
					<div class="text-box">
						搜索关键词：<span class="text-2">{{ "金融" }}</span>
					</div>
					<div class="text-box">
						当前领域：<span class="text-2">{{ "科技法案" }}</span>
					</div>
				</div>
				<div class="info-right">
					<el-select v-model="selectTime" placeholder="选择时间" style="width: 125px">
						<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<el-select v-model="selectRelation" placeholder="选择相关度" style="width: 125px">
						<el-option v-for="item in relationList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>
			<div class="summary-box">
				<div class="summary-header">
					<img src="./assets/images/summary-icon.png" alt="" />
				</div>
				<div class="summary-content">
					{{
						`       美国众议院共和党人正在起草一项新提案，以限制美国对中国的投资。此前，参议院已将其纳入国防政策立法中。知情人士向Semafor透露，众议院工作人员希望在11月7日前就该提案达成共识，并将财政部的反馈纳入由肯塔基州共和党众议员安迪·巴尔提出的配套提案中（尽管政府停摆可能推迟这一时间表）。随后，众议员将利用该文本与参议员就最终《国防授权法案》的内容进行协商。此前一届国会中，类似的尝试因北卡罗来纳州前众议员帕特里克·麦克亨利的反对而失败，但本届国会中，“所有人都在共同努力”。知情人士补充说，领导人并不担心此举会剥夺特朗普在周四与中国领导人习近平会谈时的谈判筹码，因为财政部已开始实施类似的指导方针。`
					}}
				</div>
			</div>
			<div class="header-right">
				<div class="header-right-header">{{ "关联检索" }}</div>
				<div class="header-right-main">
					<div class="header-right-main-item" v-for="(item, index) in relatedSearchList" :key="index">
						<div class="icon">
							<img src="./assets/images/search-icon2.png" alt="" />
						</div>
						<div class="text">{{ item }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="item" v-for="(item, index) in searchResults" :key="index">
				<div class="item-left" v-if="item.img">
					<img :src="item.img" alt="">
				</div>
				<div class="item-right">
					<div class="title" v-html="renderContent(item.title)"></div>
					<div class="content" v-html="renderContent(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 class="footer">
			<el-pagination background layout="prev, pager, next" :total="96" />
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";

import Img1 from './assets/images/img1.png'
import Img2 from './assets/images/img2.png'
import Img3 from './assets/images/img3.png'

const selectTime = ref("全部时间");
const selectRelation = ref("相关度优先");

const tabList = ref([
	{
		name: "法案",
		isActive: true
	},
	{
		name: "政令",
		isActive: false
	},
	{
		name: "科技智库",
		isActive: false
	},
	{
		name: "企业",
		isActive: false
	},
	{
		name: "出口管制",
		isActive: false
	},
	{
		name: "市场准入",
		isActive: false
	},
	{
		name: "投融资限制",
		isActive: false
	},
	{
		name: "重要人物",
		isActive: false
	}
]);

const tagList = ref([
	{
		name: "人工智能"
	},
	{
		name: "集成电路"
	},
	{
		name: "通信网络"
	},
	{
		name: "量子科技"
	},
	{
		name: "能源"
	},
	{
		name: "生物科技"
	},
	{
		name: "航空航天"
	},
	{
		name: "海洋"
	},
	{
		name: "新材料"
	},
	{
		name: "先进制造"
	}
]);

const timeList = ref([
	{
		label: "全部时间",
		value: "全部时间"
	},
	{
		label: "2025年",
		value: "2025年"
	},
	{
		label: "2024年",
		value: "2024年"
	}
]);

const relationList = ref([
	{
		label: "相关度优先",
		value: "相关度优先"
	},
	{
		label: "相关度优先1",
		value: "相关度优先1"
	},
	{
		label: "相关度优先2",
		value: "相关度优先2"
	}
]);

// 关联检索
const relatedSearchList = ref([
	"金融制度是如何建立的？",
	"金融有什么用？",
	"如何办理金融贷款？",
	"2025年美国金融法案发布情况",
	"中国如何应对金融制裁",
	"中国金融制度建立历史"
]);

const searchResults = ref([
	{
		img: Img1,
		title: "美元 “上链”！美国联邦金融稳定币监管法案正式生效",
		content:
			"《指导与建立美国稳定币国家创新法案》落地，要求稳定币发行方以 1:1 比例储备美元现金、短期美债等高度流动资产，建立联邦与州双轨监管体系。",
		time: "通过日期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: Img2,
		title: "划清监管边界！美国数字资产分类法案众议院高票通过",
		content:
			"《数字资产市场清晰法案》按去中心化属性划分资产类别，明确 “数字商品” 归 CFTC 监管、“数字资产证” 归 SEC 监管。创设 “金融成熟链机制”。",
		time: "通过日期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: null,
		title: "划清监管边界！美国数字资产分类法案众议院高票通过",
		content:
			"《数字资产市场清晰法案》按去中心化属性划分资产类别，明确 “数字商品” 归 CFTC 监管、“数字资产证” 归 SEC 监管。创设 “金融成熟链机制”。",
		time: "通过日期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: null,
		title: "划清监管边界！美国数字资产分类法案众议院高票通过",
		content:
			"《数字资产市场清晰法案》按去中心化属性划分资产类别，明确 “数字商品” 归 CFTC 监管、“数字资产证” 归 SEC 监管。创设 “金融成熟链机制”。",
		time: "通过日期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: null,
		title: "严管金融稳定币发行！美国《STABLE 法案》推进审议",
		content:
			"法案禁止未授权发行稳定币，违规者将面临每日最高 10 万美元罚款，同时禁止发行方支付利息。要求发行方开展月度审计并公开储备报告，严防关联方资金占用。",
		time: "通过日期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: null,
		title: "严管金融稳定币发行！美国《STABLE 法案》推进审议",
		content:
			"法案禁止未授权发行稳定币，违规者将面临每日最高 10 万美元罚款，同时禁止发行方支付利息。要求发行方开展月度审计并公开储备报告，严防关联方资金占用。",
		time: "通过日期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: null,
		title: "拒绝政府数字货币！美国众议院通过反 CBDC 监控法案",
		content:
			"《反 CBDC 监控国家法案》以保护金融隐私为核心，拟永久禁止美联储发行数字美元，禁止其向个人直接或间接发行 CBDC，也不得将 CBDC 用于货币政策工具或开展相关。",
		time: "通过日期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: null,
		title: "拒绝政府数字货币！美国众议院通过反 CBDC 监控法案",
		content:
			"《反 CBDC 监控国家法案》以保护金融隐私为核心，拟永久禁止美联储发行数字美元，禁止其向个人直接或间接发行 CBDC，也不得将 CBDC 用于货币政策工具或开展相关。",
		time: "通过日期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: null,
		title: "拒绝政府数字货币！美国众议院通过反 CBDC 监控法案",
		content:
			"《反 CBDC 监控国家法案》以保护金融隐私为核心，拟永久禁止美联储发行数字美元，禁止其向个人直接或间接发行 CBDC，也不得将 CBDC 用于货币政策工具或开展相关。",
		time: "通过日期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	},
	{
		img: Img3,
		title: "主流加密货币定调！美国 FIT-21 法案确立 “数字商品” 属性",
		content:
			"《21 世纪金融创新与技术法案》明确比特币、以太坊等主流加密货币归类为 “数字商品”，适用 CFTC 监管框架。建立 SEC 与 CFTC 跨机构协调机制并要求联合发布分类...",
		time: "通过日期：2025-10- 05",
		tag: {
			name: "科技法案",
			status: 3
		}
	}
]);

const renderContent = str => {
	if (str.includes("金融")) {
		return str.replace(/金融/g, '<span style="color: #CE4F51">金融</span>');
	}
	return str;
};
</script>

<style lang="scss" scoped>
: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;
}
.wrapper {
	width: 100%;
	height: calc(100vh - 96px);
	background: url("../assets/images/background.png") no-repeat;
	background-size: 100% 100%;
	.header {
		margin-top: 24px;
		position: relative;
		.header-right {
			position: absolute;
			width: 360px;
			top: 134px;
			left: 1300px;
			.header-right-header {
				height: 30px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 700;
				line-height: 30px;
				letter-spacing: 0px;
				text-align: left;
			}
			.header-right-main {
				margin-top: 24px;
				height: 300px;
				.header-right-main-item {
					width: 360px;
					height: 40px;
					border-radius: 20px;
					background: rgba(247, 248, 249, 1);
					display: flex;
					gap: 8px;
					margin-bottom: 8px;
					cursor: pointer;
					&:hover {
						background: rgb(234, 234, 234);
					}
					.icon {
						width: 16px;
						height: 16px;
						img {
							width: 100%;
							height: 100%;
						}
						margin-left: 16px;
						margin-top: 12px;
					}
					.text {
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 38px;
						color: rgba(59, 65, 75, 1);
					}
				}
			}
		}
		.search-box {
			display: flex;
			.left {
				margin-left: 240px;
				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);
				display: flex;
				&:hover {
					border: 1px solid var(--color-main-active);
				}
				.icon {
					width: 20px;
					height: 20px;
					margin-top: 14px;
					margin-left: 16px;
					margin-right: 10px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
			.right {
				margin-left: 2px;
				margin-top: -16px;
				width: 80px;
				height: 80px;
				cursor: pointer;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		.tab-box {
			margin-top: 12px;
			height: 48px;
			display: flex;
			margin-left: 257px;
			align-items: center;
			.tab-left {
				width: 726px;
				height: 48px;
				display: flex;
				gap: 32px;
				.tab {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 400;
					line-height: 48px;
					box-sizing: border-box;
					border-bottom: 3px solid transparent;
					cursor: pointer;
					&:hover {
						color: var(--color-main-active);
					}
				}
				.tabActive {
					color: var(--color-main-active);
					font-size: 18px;
					font-weight: 700;
					border-bottom: 3px solid var(--color-main-active);
				}
			}
			.tab-right {
				margin-left: 74px;
				width: 120px;
				height: 32px;
				box-sizing: border-box;
				border: 1px solid var(--color-main-active);
				border-radius: 20px;
				background: rgba(231, 243, 255, 1);
				display: flex;
				justify-content: center;
				gap: 8px;
				.text {
					margin-top: 4px;
					height: 24px;
					color: rgba(5, 95, 194, 1);
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 700;
					line-height: 24px;
				}
				.icon {
					margin-top: 3px;
					width: 8px;
					height: 5px;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.tag-box {
			margin-top: 16px;
			width: 908px;
			height: 32px;
			display: flex;
			gap: 12px;
			margin-left: 256px;
			.tag {
				height: 32px;
				line-height: 30px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				padding: 0 10px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
			}
		}
		.info-box {
			margin-top: 16px;
			margin-left: 257px;
			width: 920px;
			height: 32px;
			display: flex;
			justify-content: space-between;
			.info-left {
				display: flex;
				gap: 24px;
				.text-box {
					height: 32px;
					line-height: 32px;
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					color: rgba(59, 65, 75, 1);
					.text-1 {
						color: var(--color-main-active);
						font-weight: 700;
						font-size: 20px;
						margin: 0 5px;
					}
					.text-2 {
						color: var(--color-main-active);
						font-size: 18px;
						margin: 0 5px;
					}
				}
			}
			.info-right {
				display: flex;
				gap: 13px;
			}
		}
		.summary-box {
			width: 960px;
			height: 260px;
			margin-left: 240px;
			margin-top: 36px;
			box-sizing: border-box;
			border: 1px solid rgba(231, 243, 255, 1);
			border-radius: 10px;
			background: linear-gradient(180deg, rgba(246, 250, 255, 1), rgba(246, 250, 255, 0) 100%);
			.summary-header {
				width: 135px;
				height: 32px;
				margin-top: 16px;
				margin-left: 24px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.summary-content {
				width: 912px;
				height: 180px;
				margin: 16px auto;
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 30px;
				letter-spacing: 0px;
				text-align: justify;
				color: rgba(59, 65, 75, 1);
			}
		}
	}
	.main {
		width: 913px;
		height: 1464px;
		margin-top: 36px;
		margin-left: 264px;
		.item {
			width: 913px;
			height: 132px;
			margin-bottom: 16px;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
			display: flex;
			.item-left {
				width: 170px;
				height: 115px;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.item-right {
				// width: 731px;
				flex: 1;
				margin-left: 12px;

				.title {
					height: 24px;
					width: 731px;
					overflow: hidden;
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;
				}
				.content {
					margin-top: 10px;
					height: 48px;
					font-family: Microsoft YaHei;
					font-size: 16px;
					color: rgba(59, 65, 75, 1);
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: left;
				}
				.item-right-footer {
					display: flex;
					.time {
						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;
						box-sizing: border-box;
						padding: 0 8px;
						border-radius: 4px;
					}
					.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);
					}
				}
			}
		}
	}
	.footer {
		width: 913px;
		margin-left: 264px;
		height: 107px;
		box-sizing: border-box;
		padding-top: 10px;
		display: flex;
		justify-content: center;
	}
}
</style>