<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, index) in box1YearList"
								:key="index"
								:label="item.label"
								:value="item.value"
								@click="handleGetThinkPolicyIndustry()"
							/>
						</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"
								@click="handleGetThinkPolicyIndustryTotal()"
							/>
						</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.industry }}</div>
							<el-progress
								:show-text="false"
								:color="box2ColorList[index]"
								style="width: 170px"
								stroke-width="8"
								:percentage="item.percent"
							/>
							<div class="num">{{ item.amount + "项" }} / {{ item.totalAmount + "项" }}</div>
							<div class="per">{{ item.percent + "%" }}</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"
								@click="handleGetThinkPolicyIndustryChange()"
							/>
						</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" @click="handleGetThinkPolicy()">
						<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<el-select v-model="sort" placeholder="发布时间" style="width: 120px; margin-left: 8px">
						<el-option @click="handleGetThinkPolicy()" :key="true" label="正序" :value="true" />
						<el-option @click="handleGetThinkPolicy()" :key="false" label="倒序" :value="false" />
					</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> -->
								<el-checkbox
									style="width: 180px"
									v-for="research in areaList"
									:key="research.id"
									v-model="selectedAreaList"
									:label="research.id"
									class="filter-checkbox"
								>
									{{ research.name }}
								</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.imageUrl" alt="" />
							</div>
							<div class="item-right">
								<div class="title">{{ item.name }}</div>
								<div class="info">{{ item.times }} · {{ item.content }}</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.relationBillsList" :key="idxx">
										<div class="type">法案</div>
										<div class="title">{{ file.billName }}</div>
										<div class="more">
											<img src="./images/arrow-right.png" alt="" />
										</div>
									</div>
									<div class="file" v-for="(file, idxx) in item.relationAdList" :key="idxx">
										<div class="type">政令</div>
										<div class="title">{{ file.adName }}</div>
										<div class="more">
											<img src="./images/arrow-right.png" alt="" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="right-footer">
						<div class="info">共{{ total }}项调查</div>
						<div class="page-box">
							<el-pagination
								:page-size="12"
								background
								layout="prev, pager, next"
								:total="total"
								@current-change="handleCurrentChange"
								:current-page="currentPage"
							/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart";
import {
	getThinkPolicyIndustry,
	getThinkPolicyIndustryTotal,
	getThinkPolicyIndustryChange,
	getHylyList,
	getThinkPolicy
} from "@/api/thinkTank/overview";

import { useRouter } from "vue-router";

const router = useRouter();
// 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 handleGetThinkPolicyIndustry = async () => {
	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			year: box1SelectYear.value
		};
		const res = await getThinkPolicyIndustry(parmas);
		console.log("提出建议领域分布", res);
		if (res.code === 200 && res.data) {
			let data = [];
			res.data.map(item => {
				data.push({
					name: item.industry,
					value: item.amount,
					percent: item.percent
				});
			});
			box1Data.value = data;
			const box1Chart = getPieChart(box1Data.value);
			setChart(box1Chart, "box1Chart");
		}
	} catch (error) {
		console.error("获取提出建议领域分布error", error);
	}
};

// 相关政策领域分布
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 box2ColorList = ref(["#CE4F51", "#055FC2", "#13A8A8", "#722ED1", "#FA8C16", "#69B1FF"]);
const box2SelectYear = ref("2025");
const box2YearList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	}
]);

const handleGetThinkPolicyIndustryTotal = async () => {
	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			year: box2SelectYear.value
		};
		const res = await getThinkPolicyIndustryTotal(parmas);
		console.log("相关政策领域分布", res);
		if (res.code === 200 && res.data) {
			box2Data.value = res.data;
		}
	} catch (error) {
		console.error("获取相关政策领域分布error", error);
	}
};
// 热门研究方向变化趋势
const box3Data = ref({
	// title: ["2024-Q1", "2024-Q2", "2024-Q3", "2024-Q4"],
	// data: [
	// 	{
	// 		name: "新能源",
	// 		value: [1,3,4,6]
	// 	},
	// 	{
	// 		name: "人工智能",
	// 		value: [1,3,4,2]
	// 	},
	// ...
	// ]
});

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

const handleGetThinkPolicyIndustryChange = async () => {
	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			year: box3SelectYear.value
		};
		const res = await getThinkPolicyIndustryChange(parmas);
		console.log("热门研究方向变化趋势", res);
		if (res.code === 200 && res.data) {
			// 提取所有季度信息
			const quarters = res.data.map(item => item.yearQuarter);
			quarters.sort(); // 按时间排序

			// 提取所有行业名称
			const industries = new Set();
			res.data.forEach(item => {
				item.industryList.forEach(industry => {
					industries.add(industry.industry);
				});
			});

			// 构建前端数据结构
			const frontendData = {
				title: quarters,
				data: []
			};
			industries.forEach(industry => {
				const industryData = {
					name: industry,
					value: quarters.map(quarter => {
						const quarterData = res.data.find(q => q.yearQuarter === quarter);
						const industryAmount = quarterData?.industryList.find(i => i.industry === industry)?.amount || 0;
						return industryAmount;
					})
				};
				frontendData.data.push(industryData);
			});
			box3Data.value = frontendData;
			let box3Chart = getMultiLineChart(
				box3Data.value.title,
				box3Data.value.data[0].value,
				box3Data.value.data[1].value,
				box3Data.value.data[2].value
			);
			setChart(box3Chart, "box3Chart");
		}
	} catch (error) {
		console.error("获取热门研究方向变化趋势error", error);
	}
};
// 搜索政策建议
const searchPolicy = ref("");

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

const selectedYear = ref(1);

// 科技领域
const areaList = ref([]);
const selectedAreaList = ref([]);

//获取科技领域
const handleGetHylyList = async () => {
	try {
		const res = await getHylyList();
		console.log("智库研究类型信息", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data;
		}
	} catch (error) {
		console.error("获取研究类型error", error);
	}
};
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《关于优化美军作战决策结构的建议》"
	// 		}
	// 	]
	// },

]);

//获取当前时间x年前的日期
function getDateYearsAgo(years) {
	// 获取当前日期
	const currentDate = new Date();
	// 计算指定年数之前的日期
	const pastDate = new Date(currentDate.getFullYear() - years, currentDate.getMonth(), currentDate.getDate());
	// 格式化日期为 "YYYY-MM-DD" 的形式
	const year = pastDate.getFullYear();
	const month = String(pastDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
	const day = String(pastDate.getDate()).padStart(2, "0");
	return `${year}-${month}-${day}`;
}

const total = ref(0);
const sort = ref(true);
const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
	currentPage.value = page;
	handleGetThinkPolicy();
};

const handleGetThinkPolicy = async () => {
	try {
		const parmas = {
			id: router.currentRoute._value.params.id,
			startDate: getDateYearsAgo(selectedYear.value),
			sortFun: sort.value,
			currentPage: currentPage.value,
			pageSize: 10,
			researchTypeIds: selectedAreaList.value.join(',')
		};
		const res = await getThinkPolicy(parmas);
		console.log("智库政策", res);
		if (res.code === 200 && res.data) {
			policyList.value = res.data.content;
			total.value = res.data.totalElements;
		}
	} catch (error) {
		console.error("获取智库政策error", error);
	}
};

watch(
	() => selectedAreaList.value,
	val => {
		handleGetThinkPolicy();
	}
);

onMounted(() => {
	handleGetThinkPolicyIndustry();
	handleGetThinkPolicyIndustryTotal();
	handleGetThinkPolicyIndustryChange();
	handleGetHylyList();
	handleGetThinkPolicy();
});
</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;
					overflow: hidden;
					overflow-y: auto;

					.box2-item {
						height: 30px;
						margin-top: 20px;
						display: flex;
						align-items: center;

						.icon {
							width: 12px;
							height: 12px;
							border-radius: 6px;
						}

						.name {
							width: 120px;
							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: 100px;
							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: 800px;
				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: 26px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
							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>