<template>
	<div class="introduction-wrap">
		<div class="left">
			<div class="box1" v-loading="box1Params.loading">
				<AnalysisBox title="提出背景" :showAllBtn="false">
					<template #header-btn>
						<div class="header-btn-box">
							<div class="btn" :class="{ btnActive: box1Params.active === 1 }" @click="handleClickBox1Btn(1)">涉华背景</div>
							<div class="btn" :class="{ btnActive: box1Params.active === 2 }" @click="handleClickBox1Btn(2)">全部背景</div>
						</div>
					</template>
					<div class="box1-container">
						<el-empty v-if="!backgroundList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
						<div class="box1-main">
							<div class="box1-item" v-for="(item, index) in backgroundList" :key="index">
								<div class="id">{{ index + 1 }}</div>
								<div class="title text-align-justify">{{ item.content }}</div>
								<!-- <div class="open">
									<img src="./assets/images/open-icon.png" alt="" />
								</div> -->
							</div>
						</div>
						<div class="box-footer">
							<div class="box-footer-left">{{ `共 ${box1Params.total} 项` }}</div>
							<div class="box-footer-right">
								<el-pagination :page-size="box1Params.size" @current-change="handleGetBackground" :current-page="box1Params.page"
									background layout="prev, pager, next" :total="box1Params.total" />
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
			<div class="box2" v-loading="box2Params.loading">
				<AnalysisBox title="法律依据" :showAllBtn="false">
					<el-empty v-if="!box2Params.list?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
					<div class="box2-main">
						<div class="custom-collapse">
							<el-collapse v-model="box2Params.active">
								<el-collapse-item v-for="(item, index) in box2Params.list" :key="item.billId" :name="item.billId">
									<template #icon>
										<el-icon v-if="box2Params.active.includes(item.billId)">
											<ArrowDownBold />
										</el-icon>
										<el-icon v-else>
											<ArrowUpBold />
										</el-icon>
									</template>
									<template #title>
										<div class="custom-collapse-title">
											<div class="custom-collapse-index">{{ index + 1 }}</div>
											<div class="custom-collapse-name one-line-ellipsis">
												<span class="text-click-hover" @click.stop="handleClickBull(item)">{{ item.title }}</span>
											</div>
										</div>
									</template>
									<div class="custom-collapse-content">
										{{ item.content }}
									</div>
								</el-collapse-item>
							</el-collapse>
						</div>
					</div>
					<div class="box-footer" style="padding: 0 18px 16px;">
						<div class="box-footer-left">{{ `共 ${box2Params.total} 项` }}</div>
						<div class="box-footer-right">
							<el-pagination :page-size="box2Params.size" @current-change="handleGetLaws" :current-page="box2Params.page"
								background layout="prev, pager, next" :total="box2Params.total" />
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="right">
			<div class="box3">
				<AnalysisBox title="前序政令" :showAllBtn="false">
					<el-empty v-if="!prevList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
					<div class="box3-bottom-main">
						<el-timeline>
							<el-timeline-item v-for="(item, index) in prevList" :key="index">
								<div>
									<div class="time-line-top">
										<div class="time-line-date">{{ item.postDate }}</div>
										<div class="time-line-icon">
											<img style="width: 100%; height: 100%;" :src="item.orgImage || DefaultIcon1" alt="">
										</div>
										<div class="time-line-name text-click-hover" @click="handleToInstitution(item)">{{ item.proposeOrgName }}</div>
									</div>
									<div class="timeline-content" @click="handleClickDecree(item)">{{ item.describe }}</div>
								</div>
							</el-timeline-item>
						</el-timeline>
					</div>
				</AnalysisBox>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, computed, reactive } from "vue";
import { useRoute } from "vue-router";
import { getDecreeBackground, getDecreeDepend, getDecreePrev } from "@/api/decree/background";
import router from "@/router";

import DefaultIcon1 from "@/assets/icons/default-icon1.png";

const route = useRoute();

const decodeMaybeBase64NumericId = (raw) => {
	if (raw == null) return "";
	let s0 = String(raw).trim();
	if (!s0) return "";
	if (s0.includes("%")) {
		try {
			const decodedOnce = decodeURIComponent(s0);
			if (decodedOnce) s0 = String(decodedOnce).trim();
		} catch (_) { }
	}
	if (/^\d+$/.test(s0)) return s0;
	if (/^[A-Za-z0-9+/_-]+={0,2}$/.test(s0)) {
		try {
			const normalized = s0.replace(/-/g, "+").replace(/_/g, "/");
			const padded = normalized + "===".slice((normalized.length + 3) % 4);
			const decoded = atob(padded);
			const decodedStr = (() => {
				try { return decodeURIComponent(decoded); } catch (_) { return decoded; }
			})();
			if (/^\d+$/.test(String(decodedStr).trim())) return String(decodedStr).trim();
		} catch (_) { }
	}
	return s0;
};
const decreeId = computed(() => decodeMaybeBase64NumericId(route.query.id));

// 提出背景

const backgroundList = ref([]);
const box1Params = reactive({
	loading: false,
	size: 5,
	page: 1,
	total: 0,
	active: 1,
})
const handleClickBox1Btn = btn => {
	box1Params.active = btn;
	handleGetBackground()
};
const handleGetBackground = async (page = 1) => {
	box1Params.page = page;
	box1Params.loading = true;
	try {
		const res = await getDecreeBackground({
			cRelated: box1Params.active == 1,
			currentPage: box1Params.page - 1,
			pageSize: box1Params.size,
			id: decreeId.value
		});
		console.log("提出背景", res);
		if (res.code === 200 && res.data) {
			box1Params.total = res.data.numberOfElements;
			backgroundList.value = res.data.content;
		} else {
			box1Params.total = 0;
			backgroundList.value = [];
		}
	} catch (error) {
		box1Params.total = 0;
		backgroundList.value = [];
	}
	box1Params.loading = false;
};

// 前序政令
const prevList = ref([]);
const handleGetPrev = async () => {
	try {
		const res = await getDecreePrev({ id: decreeId.value });
		console.log("前序政令", res);
		if (res.code === 200 && res.data) {
			prevList.value = res.data;
		} else {
			prevList.value = [];
		}
	} catch (error) {
		prevList.value = [];
	}
};
// 跳转行政机构主页
const handleToInstitution = item => {
	window.sessionStorage.setItem("curTabName", item.proposeOrgName);
	const curRoute = router.resolve({
		path: "/institution",
		query: {
			id: item.orgId
		}
	});
	window.open(curRoute.href, "_blank");
};
// 跳转科技政令详情页
const handleClickDecree = item => {
	const route = router.resolve({
		path: "/decreeLayout",
		query: {
			id: item.id
		}
	});
	window.open(route.href, "_blank");
};

// 法律依据
const box2Params = reactive({
	loading: false,
	size: 5,
	page: 1,
	total: 0,
	active: [],
	list: [],
})
const handleGetLaws = async (page = 1) => {
	box2Params.page = page;
	box2Params.loading = true;
	try {
		const res = await getDecreeDepend({
			id: decreeId.value,
			currentPage: box2Params.page - 1,
			pageSize: box2Params.size,
		});
		console.log("法律依据", res);
		if (res.code === 200 && res.data) {
			box2Params.list = res.data;
			box2Params.total = 0
		} else {
			box2Params.list = [];
			box2Params.total = 0
		}
	} catch (error) {
		box2Params.list = [];
		box2Params.total = 0
	}
	box2Params.loading = false;
};
// 跳转科技法案详情页
const handleClickBull = decree => {
	window.sessionStorage.setItem("curTabName", decree.title);
	const route = router.resolve({
		path: "/billLayout",
		query: {
			billId: decree.billId
		}
	});
	window.open(route.href, "_blank");
};

onMounted(() => {
	handleGetBackground();
	handleGetLaws();
	handleGetPrev();
});
</script>

<style lang="scss" scoped>
.introduction-wrap {
	display: flex;
	width: 1600px;
	padding: 16px 0;
	gap: 16px;

	.left {
		width: 20px;
		flex: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;

		.box1 {
			.header-btn-box {
				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;
					cursor: pointer;
				}

				.btnActive {
					border: 1px solid var(--color-main-active);
					color: var(--color-main-active);
					background: rgba(231, 243, 255, 1);
				}
			}

			.box1-container {
				display: flex;
				flex-direction: column;
				padding: 16px;
			}

			.box1-main {
				width: 100%;
				padding: 0 6px;

				.box1-item {
					width: 100%;
					min-height: 48px;
					font-family: Microsoft YaHei;
					font-size: var(--font-size-base);
					color: rgb(59, 65, 75);
					box-sizing: border-box;
					background: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					padding: 18px 16px;

					.id {
						margin-right: 16px;
						width: 24px;
						height: 24px;
						text-align: center;
						background: #e7f3ff;
						color: #0a57a6;
						font-size: 15px;
						line-height: 24px;
						border-radius: 50%;
					}

					.title {
						width: 20px;
						flex: auto;
						line-height: 30px;
					}

					.open {
						width: 16px;
						height: 16px;
						margin: 0 16px;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.box1-item:nth-child(odd) {
					background-color: rgba(247, 248, 249, 1);
				}
			}
		}

		.box2 {
			.box2-main {
				padding: 10px 24px 16px;

				.custom-collapse {
					padding-left: 32px;

					:deep(.el-collapse),
					:deep(.el-collapse-item__wrap) {
						border: none !important;
					}

					:deep(.el-collapse-item__header) {
						border-bottom: 1px solid rgba(234, 236, 238, 1);
						min-height: 50px;
						line-height: 50px;
					}

					:deep(.el-collapse-item__content) {
						padding-bottom: 16px;
					}

					.custom-collapse-title {
						position: relative;

						.custom-collapse-index {
							font-family: Microsoft YaHei;
							font-size: var(--font-size-base);
							position: absolute;
							top: 13px;
							left: -32px;
							width: 24px;
							height: 24px;
							line-height: 24px;
							text-align: center;
							border-radius: 50%;
							background: #e7f3ff;
							color: #0a57a6;
						}

						.custom-collapse-name {
							padding-left: 6px;
							font-weight: 600;
							font-size: 18px;
							color: var(--el-collapse-header-text-color);
						}
					}

					.custom-collapse-content {
						margin-top: 8px;
						font-family: Microsoft YaHei;
						font-size: var(--font-size-base);
						color: rgb(59, 65, 75);
					}
				}
			}
		}
	}

	.right {
		width: 520px;

		.box3 {

			.box3-bottom-main {
				width: 100%;
				padding-right: 30px;
				margin-top: 14px;

				.time-line-top {
					display: flex;
					align-items: center;
					margin-bottom: 10px;

					.time-line-date {
						color: rgba(5, 95, 194, 1);
						flex: auto;
						font-weight: bold;
						font-size: 16px;
					}

					.time-line-icon {
						width: 20px;
						height: 20px;
						margin-right: 6px;
						overflow: hidden;
						border-radius: 50%;
						font-size: 0px;
					}

					.time-line-name {
						color: rgba(59, 65, 75, 1);
						font-size: 15px;
					}
				}

				:deep(.el-timeline) {
					padding: 8px 0px 0px 25px !important;
				}

				:deep(.el-timeline-item__node) {
					border: 4px solid var(--color-main-active) !important;
					background-color: #fff;
				}

				:deep(.el-timeline-item) {
					padding-bottom: 12px !important;
				}

				:deep(.el-timeline-item__timestamp) {
					color: var(--color-main-active) !important;
					font-family: Microsoft YaHei !important;
					font-size: 16px !important;
					font-weight: 600 !important;
					padding-top: 0px !important;
				}

				.timeline-content {
					color: var(--text-primary-65-color);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 26px;
					cursor: pointer;
				}
			}
		}
	}
}

.box-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;

	.box-footer-left {
		height: 20px;
		color: rgba(132, 136, 142, 1);
		font-family: Microsoft YaHei;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
	}
}
</style>