<template>
	<view class="sort-bar">
		<text
			v-for="item in sortItems"
			:key="item.value"
			class="sort-bar__item"
			:class="{ 'sort-bar__item--active': modelValue === item.value }"
			@click="onSelect(item.value)"
		>
			{{ item.label }}
		</text>
	</view>
</template>

<script setup>
import { SORT_OPTIONS } from '@/constants/categorySort'

defineProps({
	modelValue: {
		type: String,
		default: 'sales_desc'
	}
})
const emit = defineEmits(['update:modelValue', 'change'])

const sortItems = SORT_OPTIONS

function onSelect(value) {
	emit('update:modelValue', value)
	emit('change', value)
}
</script>

<style lang="scss" scoped>
.sort-bar {
	display: flex;
	align-items: center;
	padding: 16rpx 24rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}
.sort-bar__item {
	margin-right: 32rpx;
	font-size: 26rpx;
	color: #666;
}
.sort-bar__item--active {
	color: #2e7d32;
	font-weight: 600;
}
</style>
