<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';

const { t } = useI18n();

const initialData = reactive({
    active: true,
    isEqualizated: false,
});

const workersOptions = ref([]);
const businessTypesOptions = ref([]);

function handleLocation(data, location) {
    const { town, code, provinceFk, countryFk } = location ?? {};
    data.postcode = code;
    data.city = town;
    data.provinceFk = provinceFk;
    data.countryFk = countryFk;
}
</script>

<template>
    <FetchData
        @on-fetch="(data) => (workersOptions = data)"
        auto-load
        url="Workers/search?departmentCodes"
    />
    <FetchData
        @on-fetch="(data) => (businessTypesOptions = data)"
        auto-load
        url="BusinessTypes"
    />
    <QPage>
        <VnSubToolbar />
        <FormModel
            :form-initial-data="initialData"
            model="client"
            url-create="Clients/createWithUser"
        >
            <template #form="{ data, validate }">
                <VnRow>
                    <QInput :label="t('Comercial name')" v-model="data.name" />
                    <VnSelect
                        :label="t('Salesperson')"
                        :options="workersOptions"
                        hide-selected
                        option-label="name"
                        option-value="id"
                        v-model="data.salesPersonFk"
                    />
                </VnRow>
                <VnRow>
                    <VnSelect
                        :label="t('Business type')"
                        :options="businessTypesOptions"
                        hide-selected
                        option-label="description"
                        option-value="code"
                        v-model="data.businessTypeFk"
                    />
                    <QInput v-model="data.fi" :label="t('Tax number')" />
                </VnRow>
                <VnRow>
                    <QInput
                        :label="t('Business name')"
                        :rules="validate('client.socialName')"
                        v-model="data.socialName"
                    />
                </VnRow>
                <VnRow>
                    <QInput
                        :label="t('Street')"
                        :rules="validate('client.street')"
                        v-model="data.street"
                    />
                </VnRow>
                <VnRow>
                    <VnLocation
                        :rules="validate('Worker.postcode')"
                        :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                        v-model="data.location"
                        @update:model-value="(location) => handleLocation(data, location)"
                    >
                    </VnLocation>
                </VnRow>

                <VnRow>
                    <QInput v-model="data.userName" :label="t('Web user')" />
                    <QInput
                        :label="t('Email')"
                        :rules="validate('client.email')"
                        clearable
                        type="email"
                        v-model="data.email"
                    >
                        <template #append>
                            <QIcon name="info" class="cursor-info">
                                <QTooltip max-width="400px">{{
                                    t('customer.basicData.youCanSaveMultipleEmails')
                                }}</QTooltip>
                            </QIcon>
                        </template>
                    </QInput>
                </VnRow>
                <QCheckbox
                    :label="t('Is equalizated')"
                    v-model="initialData.isEqualizated"
                />
            </template>
        </FormModel>
    </QPage>
</template>

<style lang="scss" scoped>
.card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
}
</style>

<i18n>
es:
    Comercial name: Nombre comercial
    Salesperson: Comercial
    Business type: Tipo de negocio
    Tax number: NIF / CIF
    Business name: Razón social
    Street: Dirección fiscal
    Postcode: Código postal
    City: Población
    Province: Provincia
    Country: País
    Web user: Usuario web
    Email: Email
    Is equalizated: Recargo de equivalencia
</i18n>
