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

import { date } from 'quasar';

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>
    <QCard class="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': true,
                            'q-rounded': true,
                            'custom-border': true,
                            'q-mb-md': index < rows.length - 1,
                        }"
                    >
                        <div class="flex justify-between">
                            <p class="label-color">{{ item.worker.user.nickname }}</p>
                            <p class="label-color">
                                {{
                                    date.formatDate(item?.created, 'DD-MM-YYYY HH:mm:ss')
                                }}
                            </p>
                        </div>
                        <h6 class="q-mt-xs q-mb-none">{{ item.text }}</h6>
                    </QCard>
                </div>

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

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

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

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

.label-color {
    color: var(--vn-label);
}
</style>
