<template>
    <picker mode="selector" :range="getRange" @change="onChange">
        <view class="picker placeholder" :class="{ placeholder: !!selectedValue }">
            <text>{{ selectedValue }}</text>
            <uni-icons type="right" size="18" color="#86909C"></uni-icons>
        </view>
    </picker>
</template>

<script setup>
import { computed, ref } from 'vue'

const es = defineEmits(['update:modelValue'])
const ps = defineProps({
    options: {
        type: Array,
        default: function () {
            return []
        }
    }
})
const selectedValue = ref('请选择')
const getRange = computed(() => {
    return ps.options.map((option) => option.label)
})
const onChange = (event) => {
    const index = event.detail.value
    selectedValue.value = ps.options[index].label
    es('update:modelValue', ps.options[index].value)
}
</script>
<style lang="scss" scoped>
.picker {
    display: flex;
    align-items: center;
    &.placeholder {
        color: #86909c;
    }
    uni-icons {
        margin-top: 6rpx;
    }
}
</style>
