<template>
	<div class="decree-overview-wrap">
		<div class="main">
			<div class="left">
				<SiderTabs :siderList="siderList" @clickSiderItem="handleClickLeftSiderBtn" />
			</div>
			<router-view />
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import SiderTabs from "@/components/base/SiderTabs/index.vue";
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;
};
// rawId 用于路由展示（允许加密），decreeId 用于接口调用（只用明文数字）
const rawId = computed(() => (route.query.id == null ? "" : String(route.query.id)));
const decreeId = computed(() => decodeMaybeBase64NumericId(route.query.id));

const siderList = ref([
	{
		name: "政令简介",
		active: true,
		path: "/decreeLayout/overview/introduction"
	},
	{
		name: "政令背景",
		active: false,
		path: "/decreeLayout/overview/background"
	},
	{
		name: "政令举措",
		active: false,
		path: "/decreeLayout/overview/measures"
	},
]);

const siderBtnActive = ref("政令简介");

const handleClickLeftSiderBtn = node => {
	siderBtnActive.value = node.name;
	siderList.value.forEach(item => {
		if (item.name === node.name) {
			item.active = true;
		} else {
			item.active = false;
		}
	});
	router.push({
		path: node.path,
		query: {
			id: rawId.value
		}
	});
};

onMounted(() => {
	siderList.value.forEach(item => {
		if (item.path === route.path) {
			siderBtnActive.value = item.name;
			item.active = true;
		} else {
			item.active = false;
		}
	});
});
</script>

<style lang="scss" scoped>
.decree-overview-wrap {
	width: 100%;
	overflow: hidden;
	background: rgba(247, 248, 249, 1);
	.main {
		position: relative;
		width: 1600px;
		margin: 0 auto;

		.left {
			position: absolute;
			left: -160px;
			top: 25px;
			width: 160px;
			padding: 0px 16px;
		}
	}
}
</style>