<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'src/components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';

const route = useRoute();
const { t } = useI18n();

const educationLevels = ref([]);
const countries = ref([]);
const maritalStatus = [
    { code: 'M', name: t('Married') },
    { code: 'S', name: t('Single') },
];

const workerFilter = {
    include: [
        {
            relation: 'user',
            scope: {
                fields: ['name', 'emailVerified'],
                include: { relation: 'emailUser', scope: { fields: ['email'] } },
            },
        },
        { relation: 'sip', scope: { fields: ['extension', 'secret'] } },
        { relation: 'department', scope: { include: { relation: 'department' } } },
    ],
};
</script>

<template>
    <FetchData
        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
        @on-fetch="(data) => (educationLevels = data)"
        auto-load
        url="EducationLevels"
    />
    <FetchData
        url="Countries"
        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
        @on-fetch="(data) => (countries = data)"
        auto-load
    />
    <FormModel
        :filter="workerFilter"
        :url="`Workers/${route.params.id}`"
        auto-load
        model="Worker"
    >
        <template #form="{ data }">
            <VnRow>
                <VnInput :label="t('Name')" clearable v-model="data.firstName" />
                <VnInput :label="t('Last name')" clearable v-model="data.lastName" />
            </VnRow>
            <VnRow>
                <VnInput v-model="data.phone" :label="t('Business phone')" clearable />
                <VnInput
                    v-model="data.mobileExtension"
                    :label="t('Mobile extension')"
                    clearable
                />
            </VnRow>

            <VnRow>
                <VnSelect
                    :label="t('Boss')"
                    url="Workers/search"
                    hide-selected
                    option-label="nickname"
                    option-value="id"
                    v-model="data.bossFk"
                >
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
                            <QItemSection>
                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
                                <QItemLabel caption>
                                    {{ scope.opt?.nickname }},
                                    {{ scope.opt?.code }}
                                </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelect>
                <VnSelect
                    :label="t('Marital status')"
                    :options="maritalStatus"
                    hide-selected
                    option-label="name"
                    option-value="code"
                    v-model="data.maritalStatus"
                />
            </VnRow>

            <VnRow>
                <VnSelect
                    :label="t('Origin country')"
                    :options="countries"
                    hide-selected
                    option-label="name"
                    option-value="id"
                    v-model="data.originCountryFk"
                />
                <VnSelect
                    :label="t('Education level')"
                    :options="educationLevels"
                    hide-selected
                    option-label="name"
                    option-value="id"
                    v-model="data.educationLevelFk"
                />
            </VnRow>

            <VnRow>
                <VnInput v-model="data.SSN" :label="t('SSN')" clearable />
                <VnInputDate :label="t('fiDueDate')" v-model="data.fiDueDate" />
            </VnRow>
            <VnRow>
                <VnSelect
                    :label="t('sex')"
                    :options="['M', 'F']"
                    hide-selected
                    v-model="data.sex"
                />
                <VnInputDate :label="t('seniority')" v-model="data.seniority" />
            </VnRow>
            <VnRow>
                <VnInput v-model="data.fi" :label="t('fi')" />
                <VnInputDate :label="t('birth')" v-model="data.birth" />
            </VnRow>
            <VnRow>
                <QCheckbox
                    size="sm"
                    :label="t('isFreelance')"
                    v-model="data.isFreelance"
                />
                <QCheckbox
                    size="sm"
                    v-model="data.isSsDiscounted"
                    :label="t(`isSsDiscounted`)"
                />
                <QCheckbox
                    size="sm"
                    v-model="data.hasMachineryAuthorized"
                    :label="t(`hasMachineryAuthorized`)"
                />
                <QCheckbox size="sm" v-model="data.isDisable" :label="t(`isDisable`)" />
            </VnRow>
        </template>
    </FormModel>
</template>

<i18n>
es:
    Name: Nombre
    Last name: Apellidos
    Business phone: Teléfono de empresa
    Mobile extension: Extensión móvil
    Boss: Jefe
    Marital status: Estado civil
    Married: Casado/a
    Single: Soltero/a
    Origin country: País origen
    Education level: Nivel educación
    SSN: NSS
    Locker: Taquilla
    fiDueDate: Fecha de caducidad del DNI
    seniority: Antigüedad
    hasMachineryAuthorized: Autorizado para llevar maquinaria
    isFreelance: Autónomo
    isDisable: Trabajador desactivado
    fi: DNI/NIE/NIF
    sex: Sexo
    birth: Fecha de Nacimiento
    isSsDiscounted: Bonificación SS
</i18n>
