<template>
    <view class="filter-row" :style="gridStyle">
        <picker
            v-for="item in items"
            :key="item.key"
            class="filter-picker"
            :range="item.range"
            :value="item.value"
            @change="(e) => onPickerChange(item.key, e)"
        >
            <view class="filter-pill">
                <text class="filter-text">{{ item.range[item.value] }}</text>
                <view class="filter-arrow"></view>
            </view>
        </picker>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

export interface ParentFilterItem {
    key: string;
    range: string[];
    value: number;
}

const props = defineProps<{
    items: ParentFilterItem[];
}>();

const emit = defineEmits<{
    change: [payload: { key: string; value: number }];
}>();

const gridStyle = computed(() => ({
    gridTemplateColumns: `repeat(${Math.max(props.items?.length || 1, 1)}, 1fr)`,
}));

const onPickerChange = (key: string, e: { detail: { value: string } }) => {
    emit('change', { key, value: Number(e.detail.value) });
};
</script>

<style lang="scss" scoped>
.filter-row {
    display: grid;
    gap: 16rpx;
    padding-top: 12rpx;
}

.filter-picker {
    min-width: 0;
}

.filter-pill {
    height: 72rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    color: #164e63;
    font-size: 24rpx;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 8rpx 22rpx rgba(8, 145, 178, 0.08),
        inset 0 -2rpx 0 rgba(207, 250, 254, 0.9);
}

.filter-text {
    max-width: 260rpx;
}

.filter-arrow {
    width: 0;
    height: 0;
    border-left: 8rpx solid transparent;
    border-right: 8rpx solid transparent;
    border-top: 10rpx solid #0891b2;
    flex-shrink: 0;
}
</style>

