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

import FetchData from 'components/FetchData.vue';
import CrudModel from 'components/CrudModel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';

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

const entryObservationsRef = ref(null);
const entryObservationsOptions = ref([]);
const selected = ref([]);

const sortEntryObservationOptions = (data) => {
    entryObservationsOptions.value = [...data].sort((a, b) =>
        a.description.localeCompare(b.description),
    );
};

const columns = computed(() => [
    {
        name: 'observationType',
        label: t('entry.notes.observationType'),
        field: (row) => row.observationTypeFk,
        sortable: true,
        options: entryObservationsOptions.value,
        required: true,
        model: 'observationTypeFk',
        optionValue: 'id',
        optionLabel: 'description',
        tabIndex: 1,
        align: 'left',
    },
    {
        name: 'description',
        label: t('globals.description'),
        field: (row) => row.description,
        tabIndex: 2,
        align: 'left',
    },
]);
</script>
<template>
    <FetchData
        url="ObservationTypes"
        @on-fetch="(data) => sortEntryObservationOptions(data)"
        auto-load
    />
    <CrudModel
        data-key="EntryAccount"
        url="EntryObservations"
        model="EntryAccount"
        :filter="{
            fields: ['id', 'entryFk', 'observationTypeFk', 'description'],
            where: { entryFk: params.id },
        }"
        ref="entryObservationsRef"
        :data-required="{ entryFk: params.id }"
        v-model:selected="selected"
        auto-load
    >
        <template #body="{ rows, validate }">
            <QTable
                v-model:selected="selected"
                :columns="columns"
                :rows="rows"
                :pagination="{ rowsPerPage: 0 }"
                row-key="$index"
                selection="multiple"
                hide-pagination
                :grid="$q.screen.lt.md"
                table-header-class="text-left"
            >
                <template #body-cell-observationType="{ row, col }">
                    <QTd>
                        <VnSelect
                            v-model="row[col.model]"
                            :options="col.options"
                            :option-value="col.optionValue"
                            :option-label="col.optionLabel"
                            :autofocus="col.tabIndex == 1"
                            input-debounce="0"
                            hide-selected
                            :required="true"
                        />
                    </QTd>
                </template>
                <template #body-cell-description="{ row, col }">
                    <QTd>
                        <VnInput
                            :label="t('globals.description')"
                            v-model="row[col.name]"
                            :rules="validate('EntryObservation.description')"
                        />
                    </QTd>
                </template>
                <template #item="props">
                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
                        <QCard bordered flat>
                            <QCardSection>
                                <QCheckbox v-model="props.selected" dense />
                            </QCardSection>
                            <QSeparator />
                            <QList dense>
                                <QItem>
                                    <QItemSection>
                                        <VnSelect
                                            v-model="props.row.observationTypeFk"
                                            :options="entryObservationsOptions"
                                            option-value="id"
                                            option-label="description"
                                            input-debounce="0"
                                            hide-selected
                                            :required="true"
                                        />
                                    </QItemSection>
                                </QItem>
                                <QItem>
                                    <QItemSection>
                                        <VnInput
                                            :label="t('globals.description')"
                                            v-model="props.row.description"
                                            :rules="
                                                validate('EntryObservation.description')
                                            "
                                        />
                                    </QItemSection>
                                </QItem>
                            </QList>
                        </QCard>
                    </div>
                </template>
            </QTable>
        </template>
    </CrudModel>
    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <QBtn
            fab
            color="primary"
            icon="add"
            v-shortcut="'+'"
            @click="entryObservationsRef.insert()"
        />
    </QPageSticky>
</template>
<i18n>
    es:
        Add note: Añadir nota
        Remove note: Quitar nota
</i18n>
