<template>
	<!--导航栏组件-->
	<view class="nav">
		<view class="tabs">
			<view class="tab" v-for="item in activeList" :key="item.index" @click="updateActive(item.index)">
				<view style="width: 130rpx;" :class="{active: item.index === active}">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>


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

	// 插槽接收语法
	const props = defineProps({
		activeList: Array,
		modelValue: {
			type: Number,
			default: 1
		}
	});
	
	const active = ref(1)

	const emit = defineEmits(['update:modelValue']);

	const updateActive = (index) => {
		emit('update:modelValue', index);
		active.value = index
	};
</script>

<style lang="scss" scoped>
	$globalWidth: 650rpx;
	$buttonColor: #0e7ff5;

	.nav {
		width: 100%;
		background-color: white;
		height: 80rpx;
		transition: all 0.3s;

		.tabs {
			width: 100%;
			height: 100%;
			display: flex;
		}

		.tab {
			width: 25%;
			height: 100%;
			line-height: 80rpx;
			text-align: center;
			border-bottom: 4rpx solid transparent;
			display: flex;
			justify-content: center;
		}

		.active {
			color: $buttonColor;
			border-bottom: 4rpx solid $buttonColor !important;
		}
	}
</style>