<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 } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
import SiderTabs from "@/components/base/SiderTabs/index.vue";
const route = useRoute();

const decreeId = ref(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: decreeId.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: 0px;
			width: 160px;
			padding: 0px 16px;
		}
	}
}
</style>