<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';

import FormModel from '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';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';

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

const bankEntitiesRef = ref(null);

const filter = {
    fields: ['id', 'bic', 'name'],
    order: 'bic ASC',
    limit: 30,
};

const getBankEntities = (data, formData) => {
    bankEntitiesRef.value.fetch();
    formData.bankEntityFk = Number(data.id);
};
</script>

<template>
    <FormModel
        :url-update="`Clients/${route.params.id}`"
        :url="`Clients/${route.params.id}/getCard`"
        auto-load
        model="customer"
    >
        <template #form="{ data, validate }">
            <VnRow>
                <VnSelect
                    auto-load
                    url="PayMethods"
                    :label="t('Billing data')"
                    hide-selected
                    option-label="name"
                    option-value="id"
                    v-model="data.payMethod"
                />
                <VnInput :label="t('Due day')" clearable v-model="data.dueDay" />
            </VnRow>

            <VnRow>
                <VnInput :label="t('IBAN')" clearable v-model="data.iban">
                    <template #append>
                        <QIcon name="info" class="cursor-info">
                            <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
                        </QIcon>
                    </template>
                </VnInput>
                <VnSelectDialog
                    :label="t('Swift / BIC')"
                    ref="bankEntitiesRef"
                    :filter="filter"
                    auto-load
                    url="BankEntities"
                    :acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
                    :rules="validate('Worker.bankEntity')"
                    hide-selected
                    option-label="name"
                    option-value="id"
                    v-model="data.bankEntityFk"
                >
                    <template #form>
                        <CreateBankEntityForm
                            @on-data-saved="getBankEntities($event, data)"
                        />
                    </template>
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
                            <QItemSection v-if="scope.opt">
                                <QItemLabel>{{ scope.opt.bic }} </QItemLabel>
                                <QItemLabel caption> {{ scope.opt.name }}</QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelectDialog>
            </VnRow>

            <VnRow>
                <QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
                <QCheckbox :label="t('VNL core received')" v-model="data.hasCoreVnl" />
                <QCheckbox :label="t('VNL B2B received')" v-model="data.hasSepaVnl" />
            </VnRow>
        </template>
    </FormModel>
</template>

<i18n>
es:
    Billing data: Forma de pago
    Due day: Vencimiento
    IBAN: IBAN
    Swift / BIC: Swift / BIC
    Received LCR: Recibido LCR
    VNL core received: Recibido core VNL
    VNL B2B received: Recibido B2B VNL
</i18n>
