<template>
	<div class="wrap">
		<div class="main-header">
			<div class="search-box">
				<el-input placeholder="搜索智库报告" v-model="searchReport" style="width: 270px" />
				<div class="icon">
					<img src="./images/search-icon.png" alt="" />
				</div>
			</div>
			<div class="select-box">
				<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px">
					<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
		</div>
		<div class="main-content">
			<div class="left">
				<div class="select-box">
					<div class="select-box-header">
						<div class="icon"></div>
						<div class="title">{{ "地区筛选" }}</div>
					</div>
					<div class="select-main">
						<div class="checkbox-group">
							<el-checkbox
								v-for="region in filters.regions"
								:key="region.id"
								v-model="activeFilters.regions"
								:label="region.id"
								class="filter-checkbox"
							>
								{{ region.name }}
							</el-checkbox>
						</div>
					</div>
				</div>
				<div class="select-box">
					<div class="select-box-header">
						<div class="icon"></div>
						<div class="title">{{ "智库类型" }}</div>
					</div>
					<div class="select-main select-main1">
						<div class="checkbox-group">
							<el-checkbox
								v-for="type in filters.types"
								:key="type.id"
								v-model="activeFilters.types"
								:label="type.id"
								class="filter-checkbox"
							>
								{{ type.name }}
							</el-checkbox>
						</div>
					</div>
				</div>
				<div class="select-box">
					<div class="select-box-header">
						<div class="icon"></div>
						<div class="title">{{ "研究领域" }}</div>
					</div>
					<div class="select-main">
						<div class="checkbox-group">
							<el-checkbox
								v-for="research in filters.researches"
								:key="research.id"
								v-model="activeFilters.researches"
								:label="research.id"
								class="filter-checkbox"
							>
								{{ research.name }}
							</el-checkbox>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="card-box">
					<div class="footer-card" v-for="(item, index) in curFooterList" :key="index">
						<div class="footer-card-top">
							<img :src="item.img" alt="" />
						</div>
						<div class="footer-card-title">
							{{ item.title }}
						</div>
						<div class="footer-card-footer">
							<div class="time">{{ item.time }}</div>
							<div class="from">{{ item.from }}</div>
						</div>
					</div>
				</div>
				<div class="right-footer">
					<div class="info">
						{{ `共1059篇智库报告` }}
					</div>
					<div class="page-box">
						<el-pagination :page-size="12" background layout="prev, pager, next" :total="120" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import Img1 from "./images/img1.png";
import Img2 from "./images/img2.png";
import Img3 from "./images/img3.png";
import Img4 from "./images/img4.png";
import Img5 from "./images/img5.png";
import Img6 from "./images/img6.png";
import Img7 from "./images/img7.png";
import Img8 from "./images/img8.png";
import Img9 from "./images/img9.png";
import Img10 from "./images/img10.png";
import Img11 from "./images/img11.png";
import Img12 from "./images/img12.png";

const activeFilters = reactive({
	regions: ["north_america"],
	types: ["gov"],
	researches: ["全部领域"]
});

const filters = reactive({
	regions: [
		{ id: "north_america", name: "北美" },
		{ id: "europe", name: "欧洲" },
		{ id: "asia", name: "亚洲" },
		{ id: "other", name: "其他地区" }
	],
	types: [
		{ id: "gov", name: "政府背景" },
		{ id: "university", name: "高校附属" },
		{ id: "independent", name: "独立智库" },
		{ id: "corporate", name: "企业视景" }
	],
	researches: [
		{
			id: "全部领域",
			name: "全部领域"
		},
		{
			id: "人工智能",
			name: "人工智能"
		},
		{
			id: "通信网络",
			name: "通信网络"
		},
		{
			id: "量子科技",
			name: "量子科技"
		},
		{
			id: "能源",
			name: "能源"
		},
		{
			id: "生物技术",
			name: "生物技术"
		},

		{
			id: "新材料",
			name: "新材料"
		},
		{
			id: "海洋",
			name: "海洋"
		}
	]
});

const curFooterList = ref([
	{
		title: "中国对AI的转型产业政策",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img1
	},
	{
		title: "中美对抗、竞争和合作跨越人工智能通用领域...",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img2
	},
	{
		title: "中国、智慧城市和中东：地区和美国的选择",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img3
	},
	{
		title: "中国对AI的转型产业政策",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img4
	},
	{
		title: "中美经济竞争：复杂经济和地缘政治关系中的...",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img5
	},
	{
		title: "中国、智慧城市和中东：留给地区和美国的选择",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img6
	},
	{
		title: "中国对AI的转型产业政策",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img7
	},
	{
		title: "中美对抗、竞争和合作跨越人工智能通用领域...",
		time: "2025年6月26日",
		from: "",
		img: Img8
	},
	{
		title: "中国、智慧城市和中东：地区和美国的选择",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img9
	},
	{
		title: "中国对AI的转型产业政策",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img10
	},
	{
		title: "中美对抗、竞争和合作跨越人工智能通用领域...",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img11
	},
	{
		title: "中国、智慧城市和中东：地区和美国的选择",
		time: "2025年6月26日",
		from: "兰德科技智库",
		img: Img12
	}
]);

const yearList = ref([
	{
		label: "近一年发布",
		value: "近一年发布"
	},
	{
		label: "近两年发布",
		value: "近两年发布"
	},
	{
		label: "近三年发布",
		value: "近三年发布"
	}
]);

const selectedYear = ref("近一年发布");

</script>

<style lang="scss" scoped>
.main-header {
	height: 64px;
	display: flex;
	justify-content: space-between;
	.search-box {
		margin-top: 16px;
		display: flex;
		width: 300px;
		height: 32px;
		box-sizing: border-box;
		border: 1px solid rgba(230, 231, 232, 1);
		border-radius: 4px;
		background: rgba(255, 255, 255, 1);
		.icon {
			width: 16px;
			height: 16px;
			margin: 8px 7px;
			cursor: pointer;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.select-box {
		margin-top: 16px;
		margin-right: 5px;
	}
}
.main-content {
	display: flex;
	gap: 16px;
	.left {
		width: 300px;
		height: 806px;
		box-sizing: border-box;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
		background: rgba(255, 255, 255, 1);
		position: relative;
		.select-box {
			margin-top: 21px;
			.select-box-header {
				display: flex;
				gap: 17px;
				.icon {
					margin-top: 4px;
					width: 8px;
					height: 16px;
					background: var(--color-main-active);
					border-radius: 0 4px 4px 0;
				}
				.title {
					height: 24px;
					color: var(--color-main-active);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 1px;
					text-align: left;
				}
			}
			.select-main {
				margin-left: 25px;
			}
			.select-main1 {
				width: 100px;
			}
		}
	}
	.right {
		width: 1284px;
		height: 1377px;
		.card-box {
			width: 1284px;
			height: 1248px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.footer-card {
				width: 418px;
				height: 300px;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				background: rgba(255, 255, 255, 1);
				.footer-card-top {
					width: 384px;
					height: 206px;
					margin: 0 auto;
					margin-top: 15px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.footer-card-title {
					margin: 0 auto;
					margin-top: 13px;
					width: 376px;
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 700;
					line-height: 24px;
				}
				.footer-card-footer {
					margin: 0 auto;
					margin-top: 5px;
					width: 376px;
					height: 22px;
					display: flex;
					justify-content: space-between;
					color: rgba(95, 101, 108, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
				}
			}
		}
		.right-footer {
			margin-top: 43px;
			display: flex;
			justify-content: space-between;
			.info {
				height: 19px;
				color: rgba(132, 136, 142, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 18px;
				letter-spacing: 0px;
				text-align: left;
			}
		}
	}
}
</style>