<script setup lang="ts">
import { apiBase } from '~/helpers';
import type { ApiTypeExternalPartners } from '~/helpers';

const state = reactive({
    organization: undefined,
    password: undefined
})
async function onSubmit(event: FormSubmitEvent<Schema>) {
    // Do something with event.data
    console.log(event.data)
}
const externalPartners = ref<ApiTypeExternalPartners[]>([])
const searchInExternal = (q: string) => {
    return externalPartners.value.filter(el => {
        return el.Description.toLowerCase().indexOf(q.toLowerCase()) !== -1
    }).slice(0, 10)
}
onMounted(async () => {
    const { data } = await useFetch<ApiTypeExternalPartners[]>(`${apiBase}/partner/external/`)
    if (data.value) {
        externalPartners.value = data.value
    }
})
</script>
<template>
    <div class="grid grid-cols-10">
        <div class="col-span-3">
            <UForm :state="state" class="flex flex-col gap-4" @submit="onSubmit">
                <UFormGroup label="Выбрать организацию" name="organization">
                    <USelectMenu v-model="state.organization"
                        :options="externalPartners" value-attribute="Ref_Key"
                        option-attribute="Description" 
                        :searchable="searchInExternal"
                        searchable-placeholder="Выберите организацию из списка контрагентов" />
                </UFormGroup>

                <UFormGroup label="Password" name="password">
                    <UInput v-model="state.password" type="password" />
                </UFormGroup>

                <UButton type="submit">
                    Сохранить
                </UButton>
            </UForm>
        </div>
    </div>
</template>