<template>
	<div class="influenceContainer">
		<div class="row">
			<div class="buttonWrap">
				<div
					class="buttonItem"
					:class="{ activeButtonItem: activeButtonId == item.id }"
					v-for="item in buttonList"
					:key="item.id"
					@click="setActiveButtonId(item.id)"
				>
					{{ item.text }}
					<div class="icon"></div>
				</div>
			</div>
			<div class="panelWrap">
				<InfluencePanel1 v-if="activeButtonId === 1"></InfluencePanel1>
				<InfluencePanel2 v-if="activeButtonId === 2"></InfluencePanel2>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import InfluencePanel1 from "../components/influencePanel1.vue";
import InfluencePanel2 from "../components/influencePanel2.vue";
const buttonList = [
	{
		id: 1,
		text: "对华科研影响"
	},
	{
		id: 2,
		text: "对华产业影响"
	}
];
const activeButtonId = ref(buttonList[0].id);
const setActiveButtonId = id => {
	activeButtonId.value = id;
};
</script>

<style lang="scss" scoped>
.influenceContainer {
	width: 1920px;
	margin: 0px auto 0 auto;
	padding-bottom: 20px;
}
.row {
	display: flex;
	flex-direction: row;
	margin-top: 15px;
}
.buttonWrap {
	display: flex;
	flex-direction: column;
	width: 160px;
	align-items: center;
	gap: 15px;
	.buttonItem {
		width: 152px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(95, 101, 108, 1);
		font-size: 16px;
		font-weight: 400;
		border-radius: 20px;
		cursor: pointer;
		.icon {
			width: 8px;
			height: 8px;
			margin-left: 5px;
			background-image: url("../../assets/images/whiteRriangle.png");
			background-size: 100% 100%;
		}
	}
	.activeButtonItem {
		color: rgba(255, 255, 255, 1);
		background-color: rgba(5, 95, 194, 1);
	}
}
.panelWrap {
	flex: 1;
}
</style>
