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

import { toDateTimeFormat } from 'src/filters/date';

import VnPaginate from 'src/components/ui/VnPaginate.vue';

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

const noteFilter = {
    order: 'created DESC',
    where: {
        clientFk: `${route.params.id}`,
    },
};

const toCustomerNoteCreate = () => {
    router.push({ name: 'CustomerNoteCreate' });
};
</script>

<template>
    <div class="full-width flex justify-center">
        <QCard class="card-width q-pa-lg">
            <VnPaginate
                data-key="CustomerNotes"
                url="clientObservations"
                auto-load
                :filter="noteFilter"
            >
                <template #body="{ rows }">
                    <div v-if="rows.length">
                        <QCard
                            v-for="(item, index) in rows"
                            :key="index"
                            class="q-pa-md q-rounded custom-border"
                            :class="{ 'q-mb-md': index < rows.length - 1 }"
                        >
                            <div class="flex justify-between">
                                <p class="color-vn-label">
                                    {{ item.worker.user.nickname }}
                                </p>
                                <p class="color-vn-label">
                                    {{ toDateTimeFormat(item?.created) }}
                                </p>
                            </div>
                            <h6 class="q-mt-xs q-mb-none">{{ item.text }}</h6>
                        </QCard>
                    </div>

                    <div v-else>
                        <h5 class="flex justify-center color-vn-label">
                            {{ t('globals.noResults') }}
                        </h5>
                    </div>
                </template>
            </VnPaginate>
        </QCard>
    </div>

    <QPageSticky :offset="[18, 18]">
        <QBtn @click.stop="toCustomerNoteCreate()" color="primary" fab icon="add" />
        <QTooltip>
            {{ t('New note') }}
        </QTooltip>
    </QPageSticky>
</template>

<style lang="scss">
.custom-border {
    border: 2px solid var(--vn-accent-color);
    border-radius: 10px;
    padding: 10px;
}
</style>

<i18n>
es:
    New note: Nueva nota
</i18n>
