<template>
	<div class="impact-analysis">
		<div class="side-nav">
			<div
				v-for="(item, index) in activeTab"
				:key="index"
				class="tab-item"
				:class="{ active: index === activeIndex }"
				@click="activeIndex = index"
			>
				{{ item }}
				<span v-if="index === activeIndex" class="arrow"></span>
			</div>
		</div>
		<industrial-impact v-if="activeIndex === 0"></industrial-impact>
		<research-impact v-if="activeIndex === 1"></research-impact>
	</div>
</template>

<script setup>
import { ref } from "vue";

import industrialImpact from "./components/industrialImpact/index.vue";
import researchImpact from "./components/researchImpact/index.vue";

const activeTab = ref(["对华产业影响", "对华科研影响"]);
const activeIndex = ref(0);
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.impact-analysis {
	width: 1601px;
	margin: 0 auto;
	position: relative;
	.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;
				}
			}
		}
	}
}
</style>
