<template>
	<view class="filter-bar">
		<view
			class="filter-item"
			v-for="(filter, index) in filters"
			:key="index"
		>
			<picker
				:range="filter.options"
				range-key="label"
				:value="filter.selectedIndex || 0"
				@change="(e) => onFilterChange(index, e)"
			>
				<view class="filter-trigger">
					<text class="filter-label">{{ getCurrentLabel(filter) }}</text>
					<text class="filter-arrow">▼</text>
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'FilterBar',
		props: {
			/**
			 * 筛选项配置数组
			 * 每项格式：{ label: '门店', key: 'storeId', options: [{ label: '全部', value: '' }, ...], selectedIndex: 0 }
			 */
			filters: {
				type: Array,
				default: () => []
			}
		},
		emits: ['change'],
		methods: {
			getCurrentLabel(filter) {
				const idx = filter.selectedIndex || 0
				return filter.options[idx]?.label || filter.label
			},
			onFilterChange(filterIndex, e) {
				const selectedIndex = e.detail.value
				const filter = this.filters[filterIndex]
				const selectedOption = filter.options[selectedIndex]
				this.$emit('change', {
					filterIndex,
					key: filter.key,
					value: selectedOption.value,
					selectedIndex
				})
			}
		}
	}
</script>

<style scoped>
	.filter-bar {
		display: flex;
		gap: 16rpx;
		padding: 16rpx 20rpx;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}
	.filter-item {
		flex: 1;
	}
	.filter-trigger {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 16rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
	}
	.filter-label {
		font-size: 24rpx;
		color: #333;
	}
	.filter-arrow {
		font-size: 18rpx;
		color: #999;
		margin-left: 8rpx;
	}
</style>
