<template>
	<div class="sanctions-overview">
		<div class="side-nav">
			<div
				v-for="(item, index) in activeTab"
				:key="index"
				class="tab-item"
				:class="{ active: index === activeIndex }"
				@click="handleClickTab(index)"
			>
				{{ item }}
				<span v-if="index === activeIndex" class="arrow"></span>
			</div>
		</div>
		<div class="content-box">
			<introductionPage
				v-show="activeIndex == 1"
				@update-entity-info="data => $emit('update-entity-info', data)"
			></introductionPage>
			<listPage v-show="activeIndex == 0"></listPage>
		</div>
	</div>
</template>

<script setup>
import { ref, defineEmits } from "vue";
import introductionPage from "./components/introductionPage/index.vue";
import listPage from "./components/listPage/index.vue";

const emit = defineEmits(["update-entity-info"]);

const activeTab = ref(["SDN清单列表", "SDN清单简介"]);
const activeIndex = ref(0);

const handleClickTab = index => {
	console.log(index);
	activeIndex.value = index;
};
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.sanctions-overview {
	width: 1601px;
	margin: 0 auto;
	position: relative;
	// min-height: 800px;
	.side-nav {
		position: absolute;
		top: 27px;
		right: 100%;
		margin-right: 12px;
		display: flex;
		flex-direction: column;
		gap: 16px;
		.tab-item {
			cursor: pointer;
			padding: 4px 20px;
			border-radius: 22px;
			font-size: 16px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 24px;
			color: rgb(95, 101, 108);
			white-space: nowrap;
			display: flex;
			align-items: center;

			&.active {
				background-color: rgb(5, 95, 194);
				color: #fff;

				.arrow {
					display: inline-block;
					width: 0;
					height: 0;
					border-top: 5px solid transparent;
					border-bottom: 5px solid transparent;
					border-left: 6px solid #fff;
					margin-left: 8px;
				}
			}
		}
	}
	.content-box {
		width: 100%;
	}
}
</style>
