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

import axios from 'axios';

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';

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

const payMethods = ref([]);
const bankEntitiesOptions = ref([]);
const bankEntitiesRef = ref(null);

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

const getBankEntities = () => {
    bankEntitiesRef.value.fetch();
};
</script>

<template>
    <fetch-data @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
    <fetch-data
        ref="bankEntitiesRef"
        @on-fetch="(data) => (bankEntitiesOptions = data)"
        :filter="filter"
        auto-load
        url="BankEntities"
    />

    <FormModel
        :url-update="`Clients/${route.params.id}`"
        :url="`Clients/${route.params.id}/getCard`"
        auto-load
        model="customer"
    >
        <template #form="{ data, validate }">
            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnSelectFilter
                        :label="t('Billing data')"
                        :options="payMethods"
                        hide-selected
                        option-label="name"
                        option-value="id"
                        v-model="data.payMethod"
                    />
                </div>
                <div class="col">
                    <VnInput
                        :label="t('Due day')"
                        :rules="validate('client.socialName')"
                        v-model="data.dueDay"
                    />
                </div>
            </VnRow>

            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnInput :label="t('IBAN')" v-model="data.iban">
                        <template #append>
                            <QIcon name="info" class="cursor-info">
                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
                            </QIcon>
                        </template>
                    </VnInput>
                </div>
                <div class="col">
                    <VnSelectDialog
                        :label="t('Swift / BIC')"
                        :options="bankEntitiesOptions"
                        :roles-allowed-to-create="['salesAssistant', 'hr']"
                        :rules="validate('Worker.bankEntity')"
                        hide-selected
                        option-label="name"
                        option-value="id"
                        v-model="data.bankEntityFk"
                    >
                        <template #form>
                            <CreateBankEntityForm @on-data-saved="getBankEntities()" />
                        </template>
                        <template #option="scope">
                            <QItem v-bind="scope.itemProps">
                                <QItemSection v-if="scope.opt">
                                    <QItemLabel
                                        >{{ scope.opt.bic }}
                                        {{ scope.opt.name }}</QItemLabel
                                    >
                                </QItemSection>
                            </QItem>
                        </template>
                    </VnSelectDialog>
                </div>
            </VnRow>

            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
                </div>
                <div class="col">
                    <QCheckbox
                        :label="t('VNL core received')"
                        v-model="data.hasCoreVnl"
                    />
                </div>
                <div class="col">
                    <QCheckbox :label="t('VNL B2B received')" v-model="data.hasSepaVnl" />
                </div>
            </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>
