<script setup>
import { computed } from 'vue';
import { date } from 'quasar';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnAvatar from '../ui/VnAvatar.vue';
import VnUserLink from 'src/components/ui/VnUserLink.vue';

const $props = defineProps({
    url: { type: String, default: null },
    where: { type: Object, default: () => {} },
});

const filter = computed(() => {
    return {
        fields: ['smsFk'],
        include: {
            relation: 'sms',
            scope: {
                fields: [
                    'senderFk',
                    'sender',
                    'destination',
                    'message',
                    'statusCode',
                    'status',
                    'created',
                ],
                include: {
                    relation: 'sender',
                    scope: {
                        fields: ['name'],
                    },
                },
            },
        },
        ...{ where: $props.where },
    };
});

function formatNumber(number) {
    if (number.length <= 10) return number;
    return number.slice(0, 4) + ' ' + number.slice(4);
}
</script>

<template>
    <div class="column items-center">
        <div class="list">
            <VnPaginate
                :data-key="$props.url"
                :url="$props.url"
                :filter="filter"
                order="smsFk DESC"
                :offset="100"
                :limit="5"
                auto-load
            >
                <template #body="{ rows }">
                    <QCard
                        flat
                        bordered
                        class="card q-pa-md q-mb-sm smsCard"
                        v-for="row of rows"
                        :key="row.smsFk"
                    >
                        <QItem>
                            <QItemSection side top>
                                <VnUserLink :worker-id="row.sms?.senderFk">
                                    <template #link>
                                        <VnAvatar
                                            :worker-id="row.sms?.senderFk"
                                            class="cursor-pointer"
                                            :title="row.sms?.sender?.name"
                                        />
                                    </template>
                                </VnUserLink>
                            </QItemSection>
                            <QSeparator />
                            <QItemSection>
                                <QItemLabel caption>{{
                                    formatNumber(row.sms.destination)
                                }}</QItemLabel>
                                <QItemLabel>{{ row.sms.message }}</QItemLabel>
                            </QItemSection>
                            <QItemSection side>
                                <QItemLabel caption>{{
                                    date.formatDate(
                                        row.sms.created,
                                        'YYYY-MM-DD HH:mm:ss'
                                    )
                                }}</QItemLabel>
                                <QItemLabel class="row center">
                                    <QChip
                                        :color="
                                            row.sms.status == 'OK'
                                                ? 'positive'
                                                : 'negative'
                                        "
                                    >
                                        {{ row.sms.status }}
                                    </QChip>
                                </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </QCard>
                </template>
            </VnPaginate>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.q-item__section--side {
    align-items: center;
}
</style>
