<script setup>
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'src/filters';
import CrudModel from 'src/components/CrudModel.vue';
import FetchData from 'src/components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnLv from 'src/components/ui/VnLv.vue';

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

const invoceInIntrastat = ref([]);
const amountTotal = computed(() => getTotal('amount'));
const netTotal = computed(() => getTotal('net'));
const stemsTotal = computed(() => getTotal('stems'));
const rowsSelected = ref([]);
const countries = ref([]);
const intrastats = ref([]);
const invoiceInFormRef = ref();

const filter = {
    where: {
        invoiceInFk: route.params.id,
    },
};

const columns = computed(() => [
    {
        name: 'code',
        label: t('Code'),
        field: (row) => row.intrastatFk,
        options: intrastats.value,
        model: 'intrastatFk',
        optionValue: 'id',
        optionLabel: 'description',
        sortable: true,
        tabIndex: 1,
        align: 'left',
    },
    {
        name: 'amount',
        label: t('amount'),
        field: (row) => row.amount,
        sortable: true,
        tabIndex: 2,
        align: 'left',
    },
    {
        name: 'net',
        label: t('net'),
        field: (row) => row.net,
        sortable: true,
        tabIndex: 3,
        align: 'left',
    },
    {
        name: 'stems',
        label: t('stems'),
        field: (row) => row.stems,
        sortable: true,
        tabIndex: 4,
        align: 'left',
    },
    {
        name: 'country',
        label: t('country'),
        field: (row) => row.countryFk,
        options: countries.value,
        model: 'countryFk',
        optionValue: 'id',
        optionLabel: 'code',
        sortable: true,
        tabIndex: 5,
        align: 'left',
    },
]);

function getTotal(type) {
    if (!invoceInIntrastat.value.length) return 0.0;
    return invoceInIntrastat.value.reduce(
        (total, intrastat) => total + intrastat[type],
        0.0
    );
}
</script>
<template>
    <FetchData
        url="Countries"
        auto-load
        @on-fetch="(data) => (countries = data)"
        sort-by="country"
    />
    <FetchData
        url="Intrastats"
        sort-by="id"
        auto-load
        @on-fetch="(data) => (intrastats = data)"
    />
    <div class="invoiceIn-intrastat">
        <QCard v-if="invoceInIntrastat.length" class="full-width q-mb-md q-pa-sm">
            <QItem class="justify-end">
                <div>
                    <QItemLabel>
                        <VnLv
                            :label="t('Total amount')"
                            :value="toCurrency(amountTotal)"
                        />
                    </QItemLabel>
                    <QItemLabel>
                        <VnLv :label="t('Total net')" :value="netTotal" />
                    </QItemLabel>
                    <QItemLabel>
                        <VnLv :label="t('Total stems')" :value="stemsTotal" />
                    </QItemLabel>
                </div>
            </QItem>
        </QCard>
        <CrudModel
            ref="invoiceInFormRef"
            data-key="InvoiceInIntrastats"
            url="InvoiceInIntrastats"
            auto-load
            :data-required="{ invoiceInFk: route.params.id }"
            :filter="filter"
            v-model:selected="rowsSelected"
            @on-fetch="(data) => (invoceInIntrastat = data)"
        >
            <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="{ row, col }">
                        <QTd>
                            <QInput
                                v-model="row[col.name]"
                                clearable
                                clear-icon="close"
                            />
                        </QTd>
                    </template>
                    <template #body-cell-code="{ row, col }">
                        <QTd>
                            <VnSelectFilter
                                v-model="row[col.model]"
                                :options="col.options"
                                option-value="id"
                                option-label="description"
                                :filter-options="['id', 'description']"
                            >
                                <template #option="scope">
                                    <QItem v-bind="scope.itemProps">
                                        {{ `${scope.opt.id}: ${scope.opt.description}` }}
                                    </QItem>
                                </template>
                            </VnSelectFilter>
                        </QTd>
                    </template>
                    <template #body-cell-country="{ row, col }">
                        <QTd>
                            <VnSelectFilter
                                v-model="row[col.model]"
                                :options="col.options"
                                option-value="id"
                                option-label="code"
                            />
                        </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>
                                        <VnSelectFilter
                                            :label="t('code')"
                                            class="full-width"
                                            v-model="props.row['intrastatFk']"
                                            :options="intrastats"
                                            option-value="id"
                                            option-label="description"
                                            :filter-options="['id', 'description']"
                                        >
                                            <template #option="scope">
                                                <QItem v-bind="scope.itemProps">
                                                    {{
                                                        `${scope.opt.id}: ${scope.opt.description}`
                                                    }}
                                                </QItem>
                                            </template>
                                        </VnSelectFilter>
                                    </QItem>
                                    <QItem
                                        v-for="(value, index) of [
                                            'amount',
                                            'net',
                                            'stems',
                                        ]"
                                        :key="index"
                                    >
                                        <QInput
                                            :label="t(value)"
                                            class="full-width"
                                            v-model="props.row[value]"
                                            clearable
                                            clear-icon="close"
                                        />
                                    </QItem>
                                    <QItem>
                                        <VnSelectFilter
                                            :label="t('country')"
                                            class="full-width"
                                            v-model="props.row['countryFk']"
                                            :options="countries"
                                            option-value="id"
                                            option-label="code"
                                        />
                                    </QItem>
                                </QList>
                            </QCard>
                        </div>
                    </template>
                </QTable>
            </template>
        </CrudModel>
    </div>
    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <QBtn
            color="primary"
            icon="add"
            size="lg"
            round
            @click="invoiceInFormRef.insert()"
        />
    </QPageSticky>
</template>
<style lang="scss">
.invoiceIn-intrastat {
    > .q-card {
        .vn-label-value {
            display: flex;
            gap: 1em;

            .label {
                flex: 1;
            }
            .value {
                flex: 0.5;
            }
        }
    }
}
</style>
<style lang="scss" scoped></style>
<i18n>
    en:
        amount: Amount
        net: Net
        stems: Stems
        country: Country
    es:
        Code: Código
        amount: Cantidad
        net: Neto
        stems: Tallos
        country: País
        Total amount: Total importe
        Total net: Total neto
        Total stems: Total tallos
</i18n>
