<template>
	<div class="wrap">
		<div class="left">
			<div class="box1">
				<div class="box-header">
					<div class="header-left"></div>
					<div class="title">政策建议落实情况</div>
					<div class="header-right">
						<div class="icon">
							<img src="@/assets/icons/box-header-icon2.png" alt="" />
						</div>
						<div class="icon">
							<img src="@/assets/icons/box-header-icon3.png" alt="" />
						</div>
					</div>
				</div>
				<div class="box1-main">
					<div class="box1-item" v-for="(item, index) in box1Data" :key="index">
						<div class="left">
							{{ item.id }}
						</div>
						<div class="center">
							<div class="title">{{ item.title }}</div>
							<div class="tag-box">
								<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">
									{{ val }}
								</div>
							</div>
							<div class="file-box">
								<div class="file-item" v-for="(vall, idxx) in item.fileList" :key="idxx">
									<div class="file-item-left">{{ vall.type }}</div>
									<div class="file-item-center">{{ vall.name }}</div>
									<div class="file-item-right">
										<img src="@/assets/images/icon-right-circle.png" alt="" />
									</div>
								</div>
							</div>
						</div>
						<div class="right">
							<div class="text">
								{{ "查看智库原文" }}
							</div>
							<div class="icon">
								<img src="@/assets/icons/open.png" alt="" />
							</div>
						</div>
					</div>
				</div>
				<div class="box1-footer">
					<div class="info">
						{{ `共105项调查` }}
					</div>
					<div class="page-box">
						<el-pagination :page-size="10" background layout="prev, pager, next" :total="120" />
					</div>
				</div>
			</div>
		</div>

		<div class="box2">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">相关政策动态</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="box2-main">
				<div class="box2-item" v-for="(item, index) in box2Data" :key="index">
					<div class="box2-item-left">
						<div class="point">
							<img src="@/assets/images/dot.png" alt="" />
						</div>
						<div class="line" v-if="index < 5"></div>
					</div>
					<div class="box2-item-center">
						<div class="title">{{ item.title }}</div>
						<div class="content">{{ item.content }}</div>
					</div>
					<div class="box2-item-right">
						<div class="time">{{ item.time }}</div>
						<div class="img-box">
							<img :src="item.img" alt="" />
						</div>
					</div>
				</div>
			</div>
			<div class="box2-footer">
				<div class="text">{{ "查看更多" }}</div>
				<div class="icon">
					<img src="@/assets/images/icon-double-down.png" alt="" />
				</div>
			</div>
		</div>
	</div>
</template>

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

// 政策建议落实情况
const box1Data = ref([
	{
		id: 1,
		title: "示例标题1",
		tagList: ["人才交流", "移民政策"],
		fileList: [
			{
				type: "法案",
				name: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				name: "2025《开放人才法案》"
			}
		]
	},
	{
		id: 2,
		title: "示例标题2",
		tagList: ["人才交流", "移民政策"],
		fileList: [
			{
				type: "法案",
				name: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				name: "2025《开放人才法案》"
			}
		]
	},
	{
		id: 3,
		title: "示例标题3",
		tagList: ["人才交流", "移民政策"],
		fileList: [
			{
				type: "法案",
				name: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				name: "2025《开放人才法案》"
			}
		]
	},
	{
		id: 4,
		title: "示例标题4",
		tagList: ["人才交流", "移民政策"],
		fileList: [
			{
				type: "法案",
				name: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				name: "2025《开放人才法案》"
			}
		]
	},
	{
		id: 5,
		title: "示例标题5",
		tagList: ["人才交流", "移民政策"],
		fileList: [
			{
				type: "法案",
				name: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				name: "2025《开放人才法案》"
			}
		]
	},
	{
		id: 6,
		title: "示例标题6",
		tagList: ["人才交流", "移民政策"],
		fileList: [
			{
				type: "法案",
				name: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				name: "2025《开放人才法案》"
			}
		]
	},
	{
		id: 7,
		title: "示例标题7",
		tagList: ["人才交流", "移民政策"],
		fileList: [
			{
				type: "法案",
				name: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				name: "2025《开放人才法案》"
			}
		]
	},
	{
		id: 8,
		title: "示例标题8",
		tagList: ["人才交流", "移民政策"],
		fileList: [
			{
				type: "法案",
				name: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				name: "2025《开放人才法案》"
			}
		]
	},
	{
		id: 9,
		title: "示例标题9",
		tagList: ["人才交流", "移民政策"],
		fileList: [
			{
				type: "法案",
				name: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				name: "2025《开放人才法案》"
			}
		]
	},
	{
		id: 10,
		title: "示例标题10",
		tagList: ["人才交流", "移民政策"],
		fileList: [
			{
				type: "法案",
				name: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				name: "2025《开放人才法案》"
			}
		]
	}
]);

// 相关政策动态
const box2Data = ref([
	{
		title: "这是示例标题a",
		content: "这是示例内容",
		time: "2025-08-30",
		img: 1
	},
	{
		title: "这是示例标题a",
		content: "这是示例内容",
		time: "2025-08-30",
		img: 1
	},
	{
		title: "这是示例标题a",
		content: "这是示例内容",
		time: "2025-08-30",
		img: 1
	},
	{
		title: "这是示例标题a",
		content: "这是示例内容",
		time: "2025-08-30",
		img: 1
	},
	{
		title: "这是示例标题a",
		content: "这是示例内容",
		time: "2025-08-30",
		img: 1
	},
	{
		title: "这是示例标题a",
		content: "这是示例内容",
		time: "2025-08-30",
		img: 1
	}
]);
</script>

<style lang="scss" scoped>
.wrap {
	display: flex;
	justify-content: center;
	gap: 16px;
	.box-header {
		width: 100%;
		height: 50px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: var(--color-main-active);
		}
		.title {
			margin-left: 14px;
			margin-top: 14px;
			height: 26px;
			line-height: 26px;
			color: var(--color-main-active);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
		}
		.header-btn-box {
			position: absolute;
			top: 15px;
			right: 83px;
			display: flex;
			justify-content: flex-end;
			gap: 8px;
			.btn {
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 28px;
			}
			.btnActive {
				color: var(--color-main-active);
				border: 1px solid var(--color-main-active);
			}
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.left {
		height: 1442px;
		.box1 {
			margin-top: 16px;
			width: 1104px;
			height: 1405px;
			margin-bottom: 16px;
			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 {
				width: 1056px;
				height: 1280px;
				margin: 0 auto;
				.box1-item {
					height: 128px;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					display: flex;
					position: relative;
					.left {
						width: 28px;
						height: 28px;
						border-radius: 14px;
						background: rgba(231, 243, 255, 1);
						margin-left: 16px;
						margin-top: 16px;
						text-align: center;
						line-height: 28px;
						color: var(--color-main-active);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						letter-spacing: 0px;
					}
					.center {
						margin-left: 18px;
						.title {
							margin-top: 16px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
						.tag-box {
							display: flex;
							margin-top: 7px;
							gap: 8px;
							.tag {
								height: 22px;
								padding: 0 8px;
								box-sizing: border-box;
								border: 1px solid rgba(230, 231, 232, 1);
								border-radius: 4px;
								background: rgba(247, 248, 249, 1);
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-size: 14px;
								font-weight: 400;

								letter-spacing: 0px;
								text-align: left;
							}
						}
						.file-box {
							margin-top: 7px;
							display: flex;
							gap: 8px;
							.file-item {
								height: 32px;
								padding: 0 8px;
								border-radius: 4px;
								background: rgba(246, 250, 255, 1);
								display: flex;
								align-items: center;
								.file-item-left {
									height: 22px;
									padding: 0 4px;
									border-radius: 4px;
									background: rgba(231, 243, 255, 1);
									line-height: 22px;
									text-align: center;
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-size: 14px;
									font-weight: 400;
									letter-spacing: 0px;
									text-align: left;
								}
								.file-item-center {
									margin-left: 12px;
									color: var(--color-main-active);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
								}
								.file-item-right {
									margin-left: 12px;
									width: 20px;
									height: 20px;
									img {
										width: 100%;
										height: 100%;
									}
								}
							}
						}
					}
					.right {
						position: absolute;
						top: 16px;
						right: 11px;
						display: flex;
						height: 24px;
						justify-content: flex-end;
						align-items: center;
						gap: 9px;
						.text {
							height: 24px;
							font-family: Microsoft YaHei;
							font-size: 16px;
							color: var(--color-main-active);
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: right;
						}
						.icon {
							width: 16px;
							height: 16px;
							img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
			.box1-footer {
				height: 50px;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 20px;
				.info {
					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;
				}
			}
		}
	}

	.box2 {
		margin-top: 16px;
		width: 480px;
		height: 790px;
		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 {
			margin: 0 auto;
			margin-top: 15px;
			width: 459px;
			height: 654px;
			.box2-item {
				height: 109px;
				display: flex;
				.box2-item-left {
					.point {
						margin-left: 14px;
						width: 10px;
						height: 10px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.line {
						width: 2px;
						height: 109px;
						background: #ccc;
						margin-left: 18px;
					}
				}
				.box2-item-center {
					margin-left: 11px;
					.title {
						width: 314px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 1px;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.content {
						width: 314px;
						height: 48px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: justify;
						overflow: hidden;
					}
				}
				.box2-item-right {
					margin-left: 18px;
					.time {
						height: 22px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: right;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.img-box {
						margin-top: 14px;
						width: 78px;
						height: 50px;
						border-radius: 2px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.box2-footer {
			margin: 10px auto;
			width: 108px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			cursor: pointer;
			&:hover {
				background: var(--color-bg-hover);
			}
			.text {
				color: var(--color-main-active);
				height: 22px;
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				letter-spacing: 0px;
			}
			.icon {
				width: 16px;
				height: 16px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>