<template>
	<div class="decree-overview-wrap">
		<div class="left">
			<div
				class="sider-btn"
				:class="{ siderBtnActive: siderBtnActive === item.name }"
				@click="handleClickLeftSiderBtn(item)"
				v-for="(item, index) in siderList"
				:key="index"
			>
				<div class="btn-text">{{ item.name }}</div>
				<div class="btn-icon">
					<el-icon v-if="siderBtnActive === item.name" color="#fff"><CaretRight /></el-icon>
				</div>
			</div>
		</div>
		<div class="main">
			<router-view />
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import router from "@/router";

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

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

const handleClickLeftSiderBtn = item => {
	window.sessionStorage.setItem("siderBarActiveName", item.name);
	siderBtnActive.value = item.name;
	router.push(item.path);
};

onMounted(() => {
	if (window.sessionStorage.getItem("siderBarActiveName")) {
		siderBtnActive.value = window.sessionStorage.getItem("siderBarActiveName");
	}
});

onUnmounted(() => {
	if (window.sessionStorage.getItem("siderBarActiveName")) {
		window.sessionStorage.removeItem("siderBarActiveName");
	}
});
</script>

<style lang="scss" scoped>
.decree-overview-wrap {
	width: 1920px;
	height: 100%;
	overflow: hidden;
	background: rgba(247, 248, 249, 1);
	display: flex;
	.left {
		width: 160px;
		padding-top: 16px;
		.sider-btn {
			margin-top: 20px;
			margin-left: 20px;
			width: 120px;
			height: 32px;
			display: flex;
			border-radius: 16px;
			cursor: pointer;
			.btn-text {
				margin-left: 28px;
				width: 68px;
				height: 32px;
				line-height: 32px;
				text-align: left;
				box-sizing: border-box;
				font-size: 16px;
				font-family: Microsoft YaHei;
				color: rgba(95, 101, 108, 1);
			}
			.btn-icon {
				width: 22px;
				padding-top: 9px;
			}
		}
		.siderBtnActive {
			background: var(--color-main-active);
			.btn-text {
				color: #fff !important;
			}
		}
	}
	.main {
		width: 1760px;
		height: 901px;
	}
}
</style>