<template>
	<view class="segment-control-container">
		<view v-for="(item, index) in listData" :key="index" @click.stop="handleSelectChange(item, index)"
			class="segment-item">
			<view class="title" :class="{ 'active': index === pageData.selectIndex }"
				:style="{ 'color': index === pageData.selectIndex ? themeStore.theme.tabs.active : themeStore.theme.tabs.normal }">
				{{ item.title || '' }}
			</view>
			<view class="badge-view" v-if="item.badge"
				:style="{ 'background-image': themeStore.imageCssUrl.iconBadgeRed }">
				{{ item.badge || '' }}
			</view>
			<view class="line-view">
				<view class="line" v-if="index === pageData.selectIndex"
					:style="{ 'width': lineWidth ? lineWidth + 'rpx' : '100%', 'background-color': themeStore.theme.tabs.active }">
				</view>
			</view>
		</view>
	</view>
</template>

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

const themeStore = useThemeStore()
const emit = defineEmits(['change'])
const props = defineProps({
	listData: {
		type: Array,
		default: () => []
	},
	defaultIndex: {
		type: Number,
		default: 0
	},
	lineWidth: {
		type: Number,
		default: 0
	}
})

const pageData = reactive({
	selectIndex: props.defaultIndex
})

const handleSelectChange = (item, index) => {
	if (pageData.selectIndex === index) { return }
	pageData.selectIndex = index
	emit('change', {
		item: item,
		index: index
	})
}
</script>

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

	.segment-item {
		position: relative;
		height: 60rpx;
		padding: 0rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;

		.title {
			font-size: 27rpx;
			color: #fff;
			white-space: nowrap;

		}

		.title.active {
			color: #FEBF05;
			font-weight: bold;
		}

		.badge-view {
			position: absolute;
			top: 0rpx;
			right: 10rpx;
			height: 36rpx;
			min-width: 80rpx;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			text-align: center;
			font-size: 23rpx;
			line-height: 22rpx;
			color: #fff;
			font-weight: 400;
		}

		.badge-icon {
			min-width: 70rpx;
			height: 30rpx;
		}

		.line-view {
			display: flex;
			justify-content: center;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 50;

			.line {
				width: 100%;
				height: 4rpx;
				border-radius: 2rpx;
				background-color: #FFDF3F;
				overflow: hidden;
			}
		}
	}
}
</style>