<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 v-model="keyword" :border="false" style="width: 900px; height: 100%" @keyup.enter="handleSearch" />
				</div>
				<div class="right" @click="handleSearch">
					<img src="./assets/images/ai-icon.png" alt="" />
				</div>
			</div>
			<div class="tab-box">
				<div class="tab-left">
					<div
						class="tab"
						:class="{ tabActive: activeTabId === item.id }"
						v-for="(item, index) in tabList"
						:key="index"
						@click="handleClickTab(item.name, item.id)"
					>
						{{ 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"
					:class="{ tagActive: item.selected }"
					@click="handleClickDomains(item)"
					v-for="item in domains"
					:key="item.id"
				>
					{{ item.name }}
				</div>
			</div>
			<div class="info-box">
				<div class="info-left">
					<div class="text-box">
						搜索结果<span class="text-1">{{ totalNum }}</span
						>条
					</div>
					<div class="text-box">
						搜索关键词：<span class="text-2">{{ keyword }}</span>
					</div>
					<div class="text-box">
						当前领域：<span class="text-2">{{ curArea }}</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" @click="handleToPage(item)">
				<div class="item-left" v-if="item.img">
					<img :src="item?.img" alt="" />
				</div>
				<div class="item-right">
					<div class="title" v-html="item?.title"></div>
					<div class="content" v-html="item?.description"></div>
					<div class="item-right-footer">
						<div class="time">{{ item?.date }}</div>
						<div class="tag tag3">
							{{ item?.typeStr }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<el-pagination
				@current-change="handleChangeCurrentPage"
				:size="pageSize"
				:current-page="currentPage"
				background
				layout="prev, pager, next"
				:total="totalNum"
			/>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { search } from "@/api/comprehensiveSearch/index";

import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import { ElMessage } from "element-plus";

const route = useRoute();

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

const keyword = ref("出口");

const tabList = ref([
	{
		name: "法案",
		id: 1
	},
	{
		name: "政令",
		id: 2
	},
	{
		name: "智库",
		id: 3
	},
	{
		name: "智库报告",
		id: 4
	},
	{
		name: "实体清单",
		id: 5
	},
	{
		name: "人物",
		id: 6
	},
	{
		name: "机构",
		id: 7
	},
	{
		name: "新闻",
		id: 8
	},
	{
		name: "社媒",
		id: 9
	}
]);

const activeTabId = ref(0);
const curArea = ref("");

const handleClickTab = (name, id) => {
	activeTabId.value = id;
	curArea.value = name;
	domains.value = [];
	selectedDomains.value = [];
	handleSearch();
};

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([]);

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

const pageSize = ref(10);
const currentPage = ref(1);
const totalNum = ref(0);

const handleChangeCurrentPage = page => {
	currentPage.value = page;
	handleSearch();
};

const domains = ref([
	{
		name: "",
		id: ""
	}
]);

const selectedDomains = ref([]);

const handleClickDomains = domain => {
	domain.selected = !domain.selected;
	selectedDomains.value = domains.value
		.filter(item => {
			return item.selected;
		})
		.map(item => item.name);
	console.log("selectedDomains", selectedDomains.value);
	handleSearch();
};

const handleSearch = async () => {
	let params;
	if (activeTabId.value) {
		params = {
			size: pageSize.value,
			page: currentPage.value,
			keyword: keyword.value, // "出口"
			type: activeTabId.value,
			domains: selectedDomains.value
		};
	} else {
		params = {
			size: pageSize.value,
			page: currentPage.value,
			keyword: keyword.value, // "出口"
			domains: selectedDomains.value
		};
	}
	try {
		const res = await search(params);
		console.log("综合搜索结果", res);
		if (res.code === 200 && res.data) {
			if (!selectedDomains.value.length) {
				domains.value = Object.entries(res.data.aggregations).map(([name, id]) => ({
					name,
					id,
					selected: false
				}));
			}
			searchResults.value = res.data.records;
			totalNum.value = res.data.total;
			if (totalNum.value) {
				ElMessage.success(`共计搜索到${totalNum.value}条结果`);
			} else {
				ElMessage.warning(`共计搜索到${totalNum.value}条结果`);
			}
		} else {
			ElMessage.warning("当前条件共搜索到0条结果！");
		}
	} catch (error) {}
};

const handleToPage = item => {
	let curRoute;
	switch (item.typeStr) {
		case "法案":
			curRoute = router.resolve({
				path: "/decreeLayout",
				query: {
					id: id
				}
			});
			break;
		case "政令":
			curRoute = router.resolve({
				path: "/decreeLayout",
				query: {
					id: item.id
				}
			});
			break;
		case "智库":
			curRoute = router.resolve({
				name: "ReportDetail",
				params: {
					id: item.id
				}
			});
			break;
		case "智库报告":
			curRoute = router.resolve({
				name: "ReportDetail",
				params: {
					id: item.id
				}
			});
			break;
		case "实体清单":
			curRoute = router.resolve({
				path: "/exportControl/singleSanction",
				query: {
					id: item.id
				}
			});
			break;
		// case "人物":
		// 	curRoute = router.resolve({
		// 		path: "/decreeLayout",
		// 		query: {
		// 			id: id
		// 		}
		// 	});
		// 	break;
		case "机构":
			curRoute = router.resolve({
				path: "/institution",
				query: {
					id: item.id
				}
			});
			break;
		case "新闻":
			curRoute = router.resolve({
				path: "/newsAnalysis",
				query: {
					newsId: item.id
				}
			});
			break;
		// case "社媒":
		// 	curRoute = router.resolve({
		// 		path: "/decreeLayout",
		// 		query: {
		// 			id: id
		// 		}
		// 	});
		// 	break;
	}

	window.open(curRoute.href, "_blank");
};

onMounted(() => {
	if (route.query && route.query.searchText) {
		keyword.value = route.query.searchText;
	}
	if (route.query && route.query.areaName) {
		curArea.value = route.query.areaName;
		switch (curArea.value) {
			case "法案":
				activeTabId.value = 1;
				break;
			case "政令":
				activeTabId.value = 2;
				break;
			case "智库":
				activeTabId.value = 3;
				break;
			case "智库报告":
				activeTabId.value = 4;
				break;
			case "社媒":
				activeTabId.value = 9;
				break;
			case "人物":
				activeTabId.value = 6;
				break;
			case "机构":
				activeTabId.value = 7;
				break;
			case "新闻":
				activeTabId.value = 8;
				break;
			default:
				activeTabId.value = 5;
		}
	}
	handleSearch();
});
</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;
			min-height: 32px;
			max-height: 64px;
			display: flex;
			flex-wrap: wrap;
			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;
				cursor: pointer;
			}
			.tagActive {
				color: var(--color-main-active);
				border: 1px solid var(--color-main-active);
				background: rgba(231, 243, 255, 1);
			}
		}
		.info-box {
			margin-top: 26px;
			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: 26px;
			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;
			min-height: 108px;
			max-height: 148px;
			padding-bottom: 24px;
			padding-top: 16px;
			border-bottom: 1px solid rgba(234, 236, 238, 1);
			display: flex;
			cursor: pointer;
			&:hover {
				background: var(--color-bg-hover);
			}
			.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;
					min-height: 0;
					max-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;
					overflow: hidden;
				}
				.item-right-footer {
					margin-top: 10px;
					display: flex;
					.time {
						height: 24px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 24px;
						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;
	}
}

:deep(.el-input__inner) {
	color: rgba(59, 65, 75, 1);
	font-family: Microsoft YaHei;
	font-style: Regular;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
}
</style>