<template>
    <div class="filter-item">
        <div class="filter-btn" @click="showPicker = true">
            {{ getTypeName(props.value) }}
            <van-icon name="arrow-down" color="#ebecf0" size="1rem" />
        </div>
        <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker :columns="props.columns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits } from "vue";

const emits = defineEmits(['update:value']);

const props = defineProps({
    columns: {
        type: Array,
        default: () => [],
    },
    value: {
        type: null,
    }
})

const showPicker = ref(false);
const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    emits('update:value', selectedOptions[0].value);
};

function getTypeName(code) {
    if (!code) return '';
    return props.columns.find(item => item.value === code)?.text;
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/filter.scss';

.content-wrapper {
    padding-top: 8px;
    height: 100%;
    overflow: auto;

    .ducha-group-wrapper {
        height: calc(100% - 35px);
        overflow: auto;
    }

}
</style>