<template>
	<div class="wrap">
		<div class="top">
			<div class="box1 box">
				<div class="box-header">
					<div class="icon">
						<img src="./images/box-header-icon1.png" alt="" />
					</div>
					<div class="title">{{ "提出建议领域分布" }}</div>
					<div class="box-header-right">{{ "查看数据源 >" }}</div>
				</div>
				<div class="box-main">
					<div class="select-box">
						<el-select v-model="box1SelectYear" placeholder="选择时间" style="width: 100px">
							<el-option v-for="item in box1YearList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
					<div id="box1Chart"></div>
				</div>
			</div>
			<div class="box2 box">
				<div class="box-header">
					<div class="icon">
						<img src="./images/box-header-icon2.png" alt="" />
					</div>
					<div class="title">{{ "相关政策领域分布" }}</div>
					<div class="box-header-right">{{ "查看数据源 >" }}</div>
				</div>
				<div class="box-main">
					<div class="select-box">
						<el-select v-model="box2SelectYear" placeholder="选择时间" style="width: 100px">
							<el-option v-for="item in box2YearList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
					<div id="box2Chart">
						<div class="box2-item" v-for="(item, index) in box2Data" :key="index">
							<div class="icon" :style="{ background: item.color }"></div>
							<div class="name">{{ item.name }}</div>
							<el-progress
								:show-text="false"
								:color="item.color"
								style="width: 220px"
								stroke-width="8"
								:percentage="item.per"
							/>
							<div class="num">{{ item.value + "项" }} / {{ item.total + "项" }}</div>
							<div class="per">{{ item.per + "%" }}</div>
						</div>
						<div class="box2-item">
							<el-progress :percentage="50" />
						</div>
					</div>
				</div>
			</div>
			<div class="box3 box">
				<div class="box-header">
					<div class="icon">
						<img src="./images/box-header-icon2.png" alt="" />
					</div>
					<div class="title">{{ "热门研究方向变化趋势" }}</div>
					<div class="box-header-right">{{ "查看数据源 >" }}</div>
				</div>
				<div class="box-main">
					<div class="select-box">
						<el-select v-model="box3SelectYear" placeholder="选择时间" style="width: 100px">
							<el-option v-for="item in box3YearList" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
					<div id="box3Chart"></div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-header">
				<div class="search-box">
					<el-input placeholder="搜索政策建议" v-model="searchPolicy" 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="bottom-main">
				<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="(item, index) in areaList"
									:key="index"
									v-model="selectedAreaList"
									:label="item"
									class="filter-checkbox"
								>
									{{ item }}
								</el-checkbox>
							</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="right-main">
						<div class="right-main-item" v-for="(item, index) in policyList" :key="index">
							<div class="item-left">
								<img :src="item.img" alt="" />
							</div>
							<div class="item-right">
								<div class="title">{{ item.title }}</div>
								<div class="info">{{ item.time }} · {{ item.desc }}</div>
								<div class="tag-box">
									<div class="tag" v-for="(tag, idx) in item.tagList" :key="idx">
										{{ tag }}
									</div>
								</div>
								<div class="file-box">
									<div class="file" v-for="(file, idxx) in item.fileList" :key="idxx">
										<div class="type">{{ file.type }}</div>
										<div class="title">{{ file.title }}</div>
										<div class="more">
											<img src="./images/arrow-right.png" alt="" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="right-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>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart";

import Img1 from "./images/img1.png";
import Img2 from "./images/img2.png";
import Img3 from "./images/img3.png";
import Img4 from "./images/img4.png";

const box1Data = ref([
	{
		name: "半导体",
		value: 50,
		color: "#4096FF"
	},
	{
		name: "电子设备",
		value: 46,
		color: "#FFA39E"
	},
	{
		name: "显示技术",
		value: 40,
		color: "#ADC6FF"
	},
	{
		name: "新能源",
		value: 32,
		color: "#FFC069"
	},
	{
		name: "通信设备",
		value: 31,
		color: "#B5F5EC"
	},
	{
		name: "汽车",
		value: 30,
		color: "#B37FEB"
	},
	{
		name: "其他",
		value: 24,
		color: "#D6E4FF"
	}
]);

const box1SelectYear = ref("2025");
const box1YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	}
]);

const box2Data = ref([
	{
		name: "集成电路",
		value: 2,
		total: 10,
		per: 20,
		color: "#CE4F51"
	},
	{
		name: "人工智能",
		value: 1,
		total: 6,
		per: 17,
		color: "#055FC2"
	},
	{
		name: "通信网络",
		value: 2,
		total: 7,
		per: 26,
		color: "#13A8A8"
	},
	{
		name: "量子科技",
		value: 1,
		total: 2,
		per: 50,
		color: "#722ED1"
	},
	{
		name: "生物科技",
		value: 3,
		total: 7,
		per: 43,
		color: "#FA8C16"
	},
	{
		name: "能源",
		value: 11,
		total: 20,
		per: 55,
		color: "#69B1FF"
	}
]);

const box2SelectYear = ref("2025");
const box2YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	}
]);

const box3Data = ref({
	title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
	data: [
		{
			name: "人工智能",
			value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87]
		},
		{
			name: "集成电路",
			value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22]
		},
		{
			name: "量子科技",
			value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3]
		}
	]
});

const box3SelectYear = ref("2025");
const box3YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	}
]);

const searchPolicy = ref("");

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

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

const areaList = ref(["人工智能", "半导体/芯片", "能源与气候", "国际关系", "经济政策", "国防与安全"]);
const selectedAreaList = ref(["人工智能", "半导体/芯片"]);

const policyList = ref([
	{
		img: Img1,
		title: "创建并定制针对人工智能技术的验证、确认与评估技术。",
		time: "2025年6月26日",
		desc: "保持美国在人工智能与机器学习领域的优势",
		tagList: ["人工智能", "集成电路"],
		fileList: [
			{
				type: "法案",
				title: "2024《芯片科学法案》"
			},
			{
				type: "法案",
				title: "2024《芯片科学法案》"
			}
		]
	},
	{
		img: Img1,
		title: "为运用人工智能的新作战概念建立开发、测试与评估流程。",
		time: "2025年6月26日",
		desc: "保持美国在人工智能与机器学习领域的优势",
		tagList: ["人工智能", "集成电路"],
		fileList: [
			{
				type: "法案",
				title: "2024《芯片科学法案》"
			},
			{
				type: "法案",
				title: "2024《芯片科学法案》"
			}
		]
	},
	{
		img: Img1,
		title: "通过制定和维护一个前瞻性的人工智能发展路线图来管理预期，该路线图应阐明国防部在近期（一至两年）、中期（三至五年）和远期（六至十年）部署人工智能的现实目标",
		time: "2025年6月26日",
		desc: "保持美国在人工智能与机器学习领域的优势",
		tagList: ["人工智能", "集成电路"],
		fileList: [
			{
				type: "法案",
				title: "2024《芯片科学法案》"
			},
			{
				type: "政令",
				title: "2025《关于优化美军作战决策结构的建议》"
			}
		]
	},
	{
		img: Img2,
		title: "考虑采取更全面的方法来打击全球供应链中强迫劳动使用的选项。",
		time: "2025年3月15日",
		desc: " 美国贸易执法是否发挥了作用，能否做得更多？",
		tagList: ["人工智能", "集成电路"],
		fileList: [
			{
				type: "法案",
				title: "2024《维吾尔强迫劳动预防法》"
			}
		]
	},
	{
		img: Img2,
		title: "与利益相关者共同收集证据，为关于贸易执法的公共讨论提供信息。",
		time: "2025年3月15日",
		desc: "美国贸易执法是否发挥了作用，能否做得更多？",
		tagList: ["人工智能", "集成电路"],
		fileList: [
			{
				type: "法案",
				title: "2024《维吾尔强迫劳动预防法》"
			}
		]
	},
	{
		img: Img2,
		title: "推动清洁能源生产供内用，化石燃料重新配置出口。",
		time: "2025年6月26日",
		desc: "美国贸易执法是否发挥了作用，能否做得更多？",
		tagList: ["人工智能", "集成电路"],
		fileList: [
			{
				type: "法案",
				title: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				title: "2024《重塑美国人口结构法案》"
			}
		]
	},
	{
		img: Img2,
		title: "允许OPT的国际学生出国旅行并持多次入境签证重新进入美国。",
		time: "2025年6月26日",
		desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
		tagList: ["人工智能", "集成电路"],
		fileList: [
			{
				type: "法案",
				title: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				title: "2025《开放人才法案》"
			}
		]
	},
	{
		img: Img3,
		title: "增加中国公民可获得的 H-1B 签证数量。",
		time: "2025年6月26日",
		desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
		tagList: ["人工智能", "集成电路"],
		fileList: [
			{
				type: "法案",
				title: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				title: "2025《GENIUS法案》"
			}
		]
	},
	{
		img: Img3,
		title: "通过就业偏好类别增加绿卡的数量。",
		time: "2025年6月26日",
		desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
		tagList: ["人工智能", "集成电路"],
		fileList: [
			{
				type: "法案",
				title: "2024《重塑美国人口结构法案》"
			},
			{
				type: "法案",
				title: "2025《开放人才法案》"
			}
		]
	},
	{
		img: Img4,
		title: "推动清洁能源生产供内用，化石燃料重新配置出口。",
		time: "2025年6月26日",
		desc: "美国传统能源产业的未来：是走向终结还是持续发展？",
		tagList: ["人工智能", "集成电路"],
		fileList: [
			{
				type: "法案",
				title: "2024《能源法案》"
			}
		]
	}
]);

onMounted(() => {
	const box1Chart = getPieChart(box1Data.value);
	setChart(box1Chart, "box1Chart");
	let box3Chart = getMultiLineChart(
		box3Data.value.title,
		box3Data.value.data[0].value,
		box3Data.value.data[1].value,
		box3Data.value.data[2].value
	);
	setChart(box3Chart, "box3Chart");
});
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	height: 100%;
	.top {
		height: 420px;
		width: 1600px;
		margin: 24px 0;
		display: flex;
		gap: 16px;
		.box {
			width: 520px;
			height: 420px;
			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);
			.box-header {
				width: 520px;
				height: 48px;
				border-bottom: 1px solid rgba(234, 236, 238, 1);
				display: flex;
				position: relative;
				.icon {
					width: 20px;
					height: 20px;
					margin-top: 15px;
					margin-left: 22px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.title {
					margin-top: 11px;
					margin-left: 18px;
					height: 26px;
					color: rgba(5, 95, 194, 1);
					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: rgba(5, 95, 194, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: right;
				}
			}
			.box-main {
				height: 360px;
				position: relative;
				overflow: hidden;
				#box1Chart {
					height: 360px;
				}
				#box2Chart {
					width: 470px;
					margin: 0 auto;
					margin-top: 50px;
					height: 300px;
					.box2-item {
						height: 30px;
						margin-top: 20px;
						display: flex;
						align-items: center;
						.icon {
							width: 12px;
							height: 12px;
							border-radius: 6px;
						}
						.name {
							width: 80px;
							margin-left: 7px;
							margin-right: 23px;
							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;
						}
						.num {
							width: 80px;
							margin-left: 10px;
							height: 22px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							text-align: right;
						}
						.per {
							margin-left: 5px;
							height: 22px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
				#box3Chart {
					height: 360px;
				}
				.select-box {
					position: absolute;
					z-index: 999;
					top: 13px;
					right: 33px;
					width: 100px;
					height: 28px;
				}
			}
		}
	}
	.bottom {
		width: 1600px;
		.bottom-header {
			height: 48px;
			display: flex;
			justify-content: space-between;
			.search-box {
				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-right: 5px;
			}
		}
		.bottom-main {
			display: flex;
			justify-content: space-between;
			.left {
				width: 300px;
				height: 483px;
				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);
				.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: 20px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
					}
					.select-main {
						margin-left: 25px;
						width: 160px;
					}
					.select-main1 {
						width: 100px;
					}
				}
			}
			.right {
				width: 1284px;
				height: 1670px;
				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);
				.right-main {
					margin: 17px auto;
					width: 1209px;
					height: 1540px;
					.right-main-item {
						height: 154px;
						box-sizing: border-box;
						padding-top: 8px;
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						display: flex;
						.item-left {
							width: 57px;
							height: 77px;
							margin-top: 3px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.item-right {
							margin-left: 15px;
							.title {
								// 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;
							}
							.info {
								margin-top: 7px;
								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: left;
							}
							.tag-box {
								margin-top: 7px;
								display: flex;
								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;
									line-height: 20px;
								}
							}
							.file-box {
								margin-top: 7px;
								display: flex;
								gap: 8px;
								.file {
									height: 32px;
									padding: 0 8px;
									display: flex;
									justify-content: center;
									align-items: center;
									gap: 8px;
									border-radius: 4px;
									background: rgba(246, 250, 255, 1);
									.type {
										height: 22px;
										padding: 0 4px;
										border-radius: 4px;
										background: rgba(231, 243, 255, 1);
										color: rgba(5, 95, 194, 1);
										font-family: Microsoft YaHei;
										font-size: 14px;
										font-weight: 400;
										line-height: 22px;
									}
									.title {
										height: 24px;
										color: rgba(5, 95, 194, 1);
										font-family: Microsoft YaHei;
										font-size: 16px;
										font-weight: 400;
										line-height: 24px;
									}
									.more {
										width: 20px;
										height: 20px;
										img {
											width: 100%;
											height: 100%;
										}
									}
								}
							}
						}
					}
				}
				.right-footer {
					margin: 0 auto;
					width: 1209px;
					height: 96px;
					display: flex;
					justify-content: space-between;
					.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;
					}
				}
			}
		}
	}
}
</style>