<template>
    <view class="sort-container df fdr jcsa aic">
        <view class="sort-item" v-for="(item, index) in filteredList" :key="index" @click="emit('status', item)">
            <uni-data-select v-if="item.list" :localdata="item.list" v-model="item.value" :clear="false">
                <template #icon="{ showPicker }">
                    <image class="ud" :src="showPicker ? up : down"></image>
                </template>
            </uni-data-select>
            <view class="df aic" v-else>
                <view class="label">{{ item.label }}</view>
                <view class="up-down df fdc jcsa aic">
                    <image v-if="item.isUp" class="ud mb5" :src="up"></image>
                    <image v-if="item.isDown" class="ud" :src="down"></image>
                </view>
            </view>
            <view class="up-down" v-if="item.slot">
                <slot :name="item.slot">
                    <uni-icons type="bars" size="16"></uni-icons>
                </slot>
            </view>
        </view>
    </view>
</template>
<script setup>
import { defineEmits } from 'vue'
import down from '@/static/down.png';
import up from '@/static/up.png';

const props = defineProps({
    filteredList: {
        type: Array,
        default: () => {
            return []
        }
    }
})
const emit = defineEmits(['status'])
</script>
<style scoped lang="scss">
.sort-container {
    padding: 20rpx 0;
    // 上下圆角
    border-radius: 50rpx 50rpx 0 0;
    background-color: #fff;
    margin-top: 10rpx;

    ::v-deep .uni-select {
        border: none !important;

        .uni-select__selector {
            width: fit-content;

        }

        .uni-select__selector-item {
            width: fit-content;
        }

        .uni-select__input-text {
            margin-right: 8rpx;
            font-size: $uni-font-size-lg;
            color: $uni-text-color;
            line-height: 42rpx;
            margin-right: 8rpx;
        }
    }

    .sort-item {
        display: flex;

        .label {
            font-size: $uni-font-size-lg;
            color: $uni-text-color;
            line-height: 42rpx;
            margin-right: 8rpx;
        }
    }

    .ud {
        width: 20rpx;
        height: 14rpx;
        margin-left: 8rpx;
    }

    .up-down {


        .icon {
            color: $uni-text-color-grey
        }

        .up,
        .down {
            color: $uni-bg-color-hover;
        }
    }
}
</style>