<template>
	<view class="round-segmentcontrol-container" :style="{ 'background': themeStore.theme.tabsRound.bgColor }">
		<view
			v-for="(item, index) in list"
			class="segment-item"
			:style="{
				'background': index === modelValue ? themeStore.theme.tabsRound.selectBgColor : '',
				'color': index === modelValue ? themeStore.theme.tabsRound.selectTextColor : themeStore.theme.tabsRound.textColor
			}" 
			@click.stop="handleChangeClick(index)"
		>
			<view>{{ item }}</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { useThemeStore } from '@/store/useThemeStore'
	
	const themeStore = useThemeStore()
	
	const emits = defineEmits([
		'update:modelValue',
		'change'
	])
	const props = defineProps({
		defaultIndex: {
			type: Number,
			default: 0
		},
		modelValue: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default: () => []
		}
	})
	
	const handleChangeClick = (index) => {
		if (props.modelValue === index) { return }
		emits('change', index)
		emits('update:modelValue', index)
	}
</script>

<style lang="scss" scoped>
	.round-segmentcontrol-container {
		display: flex;
		align-items: center;
		height: 64rpx;
		border-radius: 32rpx;
		font-size: 30rpx;
		width: 520rpx;
		
		.segment-item {
			width: 260rpx;
			height: 64rpx;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>