<template>
	<view class="normal-tabs-container">
		<view class="normal-tabs-view">
			<view v-for="(item, index) in tabList" :key="index" @click.stop="handleSelectChange(item, index)" :class="{ 'tab-count-3': tabList.length === 3, 'tab-count-2': tabList.length === 2, 'tab-count-1': tabList.length === 1 }">
				<SmallTabsItem
					v-if="size === 'small'"
					:title="item.title"
					:badge="item.badge"
					:isActive="modelValue === index"
					:normalColor="normalColor"
					:activeColor="activeColor"
				/>
				<NormalTabsItem
					v-else
					:title="item.title"
					:badge="item.badge"
					:isActive="modelValue === index"
					:normalColor="normalColor"
					:activeColor="activeColor"
				/>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import NormalTabsItem from './NormalTabsItem.vue'
	import SmallTabsItem from './SmallTabsItem.vue'
	
	const emits = defineEmits([
		'change',
		'update:modelValue',
	])
	const props = defineProps({
		tabList: {
			type: Array,
			default: () => []
		},
		defaultIndex: {
			type: Number,
			default: 0
		},
		modelValue: {
			type: Number,
			default: 0
		},
		normalColor: {
			type: String,
			default: '#fff'
		},
		activeColor: {
			type: String,
			default: '#FFDF3F'
		},
		size: {
			type: String,
			default: 'normal' // small
		}
	})
	
	const handleSelectChange = (item, index) => {
		if (props.modelValue === index) { return }
		emits('update:modelValue', index)
		emits('change', {
			item: item,
			index: index
		})
	}
</script>

<style lang="scss" scoped>
	.normal-tabs-container {
		width: 100%;

		.tab-count-3 { 
			width: 33%;
		}
		
		.tab-count-2 { 
			width: 50%;
		}
		
		.tab-count-1 {
			width: 100%;
		}
		
		.normal-tabs-view {
			display: flex;
			align-items: center;
			overflow-x: auto;
		}
		
		.normal-tabs-view::-webkit-scrollbar {
		  display: none; /* 对于WebKit浏览器，如Chrome和Safari */
		}
	}
</style>