<template>
    <ie-form-picker :label="pickerLabel" :model-value="getLabel(selected)" :placeholder="placeholder"
                    :remark="pickerRemark" @click="$refs.picker.open()">
        <slot v-if="$slots.suffix" name="suffix"/>
    </ie-form-picker>
    <uv-picker ref="picker" :columns="[columns]" :default-index="[selectedIndex]" :title="label"
               close-on-click-overlay @confirm="handleConfirm"/>
</template>

<script>
import IeFormPicker from "@/pages/ie/components/picker/ie-form-picker.vue";
import FormattedPickerMixin from "@/pages/ie/components/picker/FormattedPickerMixin";
import InjectFormDataMixin from "@/pages/ie/components/ai-form/InjectFormDataMixin";

export default {
    name: "ie-form-picker-single",
    components: {IeFormPicker},
    extends: IeFormPicker,
    emits: ['update:modelValue'],
    mixins: [FormattedPickerMixin, InjectFormDataMixin],
    computed: {
        pickerLabel() {
            return this.label || ''
        },
        pickerRemark() {
            return this.remark
        }
    },
    methods: {
        handleConfirm({value: [item]}) {
            this.$emit('update:modelValue', this.getValue(item))
            this.$refs.picker.close()
            this.formRef.clearValidate([this.formItem.prop])
        }
    }
}
</script>

<style scoped>

</style>