<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { toDate } from 'src/filters';
import { useArrayData } from 'src/composables/useArrayData';
import CrudModel from 'src/components/CrudModel.vue';
import FetchData from 'src/components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnCurrency from 'src/components/common/VnCurrency.vue';

const route = useRoute();
const { t } = useI18n();
const arrayData = useArrayData('InvoiceIn');
const invoiceIn = computed(() => arrayData.store.data);

const rowsSelected = ref([]);
const banks = ref([]);
const invoiceInFormRef = ref();
const invoiceId = route.params.id;

const placeholder = 'yyyy/mm/dd';

const filter = {
    where: {
        invoiceInFk: invoiceId,
    },
};

const columns = computed(() => [
    {
        name: 'duedate',
        label: t('Date'),
        field: (row) => toDate(row.dueDated),
        sortable: true,
        tabIndex: 1,
        align: 'left',
    },
    {
        name: 'bank',
        label: t('Bank'),
        field: (row) => row.bankFk,
        options: banks.value,
        model: 'bankFk',
        optionValue: 'id',
        optionLabel: 'bank',
        sortable: true,
        tabIndex: 2,
        align: 'left',
    },
    {
        name: 'amount',
        label: t('Amount'),
        field: (row) => row.amount,
        sortable: true,
        tabIndex: 3,
        align: 'left',
    },
    {
        name: 'foreignvalue',
        label: t('Foreign value'),
        field: (row) => row.foreignValue,
        sortable: true,
        tabIndex: 4,
        align: 'left',
    },
]);

const isNotEuro = (code) => code != 'EUR';

async function insert() {
    await axios.post('/InvoiceInDueDays/new ', { id: +invoiceId });
    await invoiceInFormRef.value.reload();
}
</script>
<template>
    <FetchData
        url="Accountings"
        auto-load
        limit="30"
        @on-fetch="(data) => (banks = data)"
    />
    <CrudModel
        v-if="invoiceIn"
        ref="invoiceInFormRef"
        data-key="InvoiceInDueDays"
        url="InvoiceInDueDays"
        :filter="filter"
        auto-load
        :data-required="{ invoiceInFk: invoiceId }"
        v-model:selected="rowsSelected"
        @on-fetch="(data) => (areRows = !!data.length)"
    >
        <template #body="{ rows }">
            <QTable
                v-model:selected="rowsSelected"
                selection="multiple"
                :columns="columns"
                :rows="rows"
                row-key="$index"
                hide-pagination
                :grid="$q.screen.lt.sm"
            >
                <template #body-cell-duedate="{ row }">
                    <QTd>
                        <QInput
                            v-model="row.dueDated"
                            mask="date"
                            :placeholder="placeholder"
                            clearable
                            clear-icon="close"
                        >
                            <template #append>
                                <QIcon name="event" class="cursor-pointer">
                                    <QPopupProxy
                                        cover
                                        transition-show="scale"
                                        transition-hide="scale"
                                    >
                                        <QDate v-model="row.dueDated" landscape>
                                            <div
                                                class="row items-center justify-end q-gutter-sm"
                                            >
                                                <QBtn
                                                    :label="t('globals.cancel')"
                                                    color="primary"
                                                    flat
                                                    v-close-popup
                                                />
                                                <QBtn
                                                    :label="t('globals.confirm')"
                                                    color="primary"
                                                    flat
                                                    v-close-popup
                                                />
                                            </div>
                                        </QDate>
                                    </QPopupProxy>
                                </QIcon>
                            </template>
                        </QInput>
                    </QTd>
                </template>
                <template #body-cell-bank="{ row, col }">
                    <QTd>
                        <VnSelectFilter
                            v-model="row[col.model]"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                        >
                            <template #option="scope">
                                <QItem v-bind="scope.itemProps">
                                    <QItemSection>
                                        <QItemLabel>{{
                                            `${scope.opt.id}: ${scope.opt.bank}`
                                        }}</QItemLabel>
                                    </QItemSection>
                                </QItem>
                            </template>
                        </VnSelectFilter>
                    </QTd>
                </template>
                <template #body-cell-amount="{ row }">
                    <QTd>
                        <VnCurrency
                            v-model="row.amount"
                            :is-outlined="false"
                            clearable
                            clear-icon="close"
                        />
                    </QTd>
                </template>
                <template #body-cell-foreignvalue="{ row }">
                    <QTd>
                        <QInput
                            :class="{
                                'no-pointer-events': !isNotEuro(invoiceIn.currency.code),
                            }"
                            :disable="!isNotEuro(invoiceIn.currency.code)"
                            v-model="row.foreignValue"
                            clearable
                            clear-icon="close"
                        />
                    </QTd>
                </template>
                <template #item="props">
                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
                        <QCard>
                            <QCardSection>
                                <QCheckbox v-model="props.selected" dense />
                            </QCardSection>
                            <QSeparator />
                            <QList>
                                <QItem>
                                    <QInput
                                        class="full-width"
                                        :label="t('Date')"
                                        v-model="props.row.dueDated"
                                        mask="date"
                                        :placeholder="placeholder"
                                        clearable
                                        clear-icon="close"
                                    >
                                        <template #append>
                                            <QIcon name="event" class="cursor-pointer">
                                                <QPopupProxy
                                                    cover
                                                    transition-show="scale"
                                                    transition-hide="scale"
                                                >
                                                    <QDate
                                                        v-model="props.row.dueDated"
                                                        landscape
                                                    >
                                                        <div
                                                            class="row items-center justify-end q-gutter-sm"
                                                        >
                                                            <QBtn
                                                                :label="
                                                                    t('globals.cancel')
                                                                "
                                                                color="primary"
                                                                flat
                                                                v-close-popup
                                                            />
                                                            <QBtn
                                                                :label="
                                                                    t('globals.confirm')
                                                                "
                                                                color="primary"
                                                                flat
                                                                v-close-popup
                                                            />
                                                        </div>
                                                    </QDate>
                                                </QPopupProxy>
                                            </QIcon>
                                        </template>
                                    </QInput>
                                </QItem>
                                <QItem>
                                    <VnSelectFilter
                                        :label="t('Bank')"
                                        class="full-width"
                                        v-model="props.row['bankFk']"
                                        :options="banks"
                                        option-value="id"
                                        option-label="bank"
                                    >
                                        <template #option="scope">
                                            <QItem v-bind="scope.itemProps">
                                                <QItemSection>
                                                    <QItemLabel>{{
                                                        `${scope.opt.id}: ${scope.opt.bank}`
                                                    }}</QItemLabel>
                                                </QItemSection>
                                            </QItem>
                                        </template>
                                    </VnSelectFilter>
                                </QItem>
                                <QItem>
                                    <QInput
                                        :label="t('Amount')"
                                        class="full-width"
                                        v-model="props.row.amount"
                                        clearable
                                        clear-icon="close"
                                    />
                                </QItem>
                                <QItem>
                                    <QInput
                                        :label="t('Foreign value')"
                                        class="full-width"
                                        :class="{
                                            'no-pointer-events': !isNotEuro(
                                                invoiceIn.currency.code
                                            ),
                                        }"
                                        :disable="!isNotEuro(invoiceIn.currency.code)"
                                        v-model="props.row.foreignValue"
                                        clearable
                                        clear-icon="close"
                                    />
                                </QItem>
                            </QList>
                        </QCard>
                    </div>
                </template>
            </QTable>
        </template>
    </CrudModel>
    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <QBtn color="primary" icon="add" size="lg" round @click="insert" />
    </QPageSticky>
</template>
<style lang="scss" scoped></style>
<i18n>
    es:
        Date: Fecha
        Bank: Caja
        Amount: Importe
        Foreign value: Divisa
</i18n>
