<script setup>
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { api, useForm } from '@Services/Api';
import { apiTo, transl, viewTo } from './Module';

import IconButton      from '@Holos/Button/Icon.vue'
import PageHeader      from '@Holos/PageHeader.vue';
import Selectable      from '@Holos/Form/Selectable.vue';
import FormRecord      from './FormRecord.vue';

/** Definidores */
const router = useRouter();
const route = useRoute();

/** Propiedades */
const form = useForm({
    title: '',
    institution: '',
    date_obtained: '',
    degree_type_ek: '',
    user_id: route.params.id || '',
    // file_path: null,
});

const degreeTypes = ref([]);

/** Métodos */
function submit() {
    form.transform(data => ({
        ...data,
        degree_type_ek: form.degree_type_ek?.id
    })).post(apiTo('store-record'), {
        onSuccess: () => {
            Notify.success(Lang('register.create.onSuccess'))
            router.push(viewTo({ name: 'index' }));
        }
    })
}

/** Ciclos */
onMounted(() => {
    api.catalog({
            'degreeType:all': null,
        },
        {
           onSuccess: (r) => {
            degreeTypes.value = r['degreeType:all'] ?? [];
        } 
    });
})
</script>

<template>
    <PageHeader
        :title="transl('create.record.title')"
    >
        <RouterLink :to="viewTo({ name: 'index' })">
            <IconButton
                class="text-white"
                icon="arrow_back"
                :title="$t('return')"
                filled
            />
        </RouterLink>
    </PageHeader>
    
    <div class="w-full pb-2">
        <p class="text-justify text-sm" v-text="transl('create.record.description')" />
    </div>
    <FormRecord
        :degreeTypes="degreeTypes"
        :form="form"
        @submit="submit"
    >
        <Selectable
            v-model="form.degree_type_ek"
            title="degreeType"
            :options="degreeTypes"
        />
    </FormRecord>
</template>