<template>
	<view class="search-segment-container" :style="{ 'background': themeStore.theme.tabsRound.bgColor }">
		<view v-for="(item, index) in pageData.tabList" :key="index" class="segment-item"
			:class="{ 'select': index === pageData.selectIndex }" @click.stop="handleSelect(index)">
			<view>
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
import { useThemeStore } from '@/store/useThemeStore'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const themeStore = useThemeStore()
const emit = defineEmits(['change'])

const pageData = reactive({
	tabList: [t('search.tabs.tab1'), t('search.tabs.tab2'), t('search.tabs.tab3')],
	selectIndex: 0
})

const handleSelect = (index) => {
	pageData.selectIndex = index
	emit('change', index)
}
</script>

<style lang="scss" scoped>
.search-segment-container {
	display: flex;
	align-items: center;

	width: 692rpx;
	height: 73rpx;
	background: #4C0305 rgba(194, 71, 71, 0.2);
	border-radius: 19rpx;

	.segment-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 27rpx;
		color: rgba(255, 255, 255, 0.7);
		height: 100%;

	}

	.segment-item.select {
		color: #FEBF05;
		font-weight: bold;
		overflow: hidden;
		background: linear-gradient(136deg, #640000 0%, #850E0B 100%), linear-gradient(180deg, rgba(255, 27, 27, 0) 0%, #FF1B1B 100%);
		border-radius: 19rpx 19rpx 19rpx 19rpx;
	}
}
</style>