<script setup lang="ts">
const items = ref()
const page = ref(1)
const pagination = ref({ total: 10, pageCount: 10 })

const loadData = async () => {
    const items_data = await apiCall<ApiPaged<TgItem>>(`tgbot/?page=${page.value}`)
    items.value = items_data.results
    pagination.value.total = items_data.count
    pagination.value.pageCount = items_data.per_page
}
onMounted(loadData)
watch(page, loadData)
const columns = [
    {
        key: 'name',
        label: 'Название'
    },
    {

        key: 'tmc',
        label: 'ТМЦ'
    },
    {
        key: 'user_id',
        label: 'ID автора'
    }
]
</script>
<template>
    <div class="col-span-12 page-header">
        <h1>Проведенные инвентаризации</h1>
    </div>
    <div class="col-span-12">
        <UTable :rows="items" :columns="columns" :ui="{ td: { base: 'whitespace-normal max-w-sm align-top' } }">
            <template #name-data="{ row }">
                <h3>{{ row.name }}</h3>
                Создано: {{ new Date(row.created_at).toLocaleString('ru-RU') }}<br />
                Обновлено: {{ new Date(row.updated_at).toLocaleString('ru-RU') }}
            </template>
            <template #tmc-data="{ row }">
                <div class="inv_item" v-for="item in row.tmc">
                    <strong>{{ item.tmc.name }}</strong>
                    <ul class="inv_list">
                        <li v-for="el in item.field" class="inv_item">
                            <span class="inv_item_name">
                                {{ el.field.name }}:
                            </span>
                            <span :class="['inv_item_text', { 'inv_item__error': !el.text }]">
                                {{ el.text || 'Нет расшифровки' }}
                            </span>
                            <span :class="['inv_item_image', { 'inv_item__error': !el.file_id }]">
                                <GetImage :file_id="el.file_id" v-if="el.file_id" />
                                <span v-else>Нет изображения</span>
                            </span>
                        </li>
                    </ul>
                </div>
            </template>
            <template #user_id-data="{ row }">
                <GetAuthor :user_id="row.user_id" />
            </template>
        </UTable>
        <UPagination v-model="page" v-bind="pagination" />
    </div>
</template>

<style scoped lang="scss">
table {
    max-width: 100%;
}
.inv_item {
    @apply mb-2;
}
.inv_list {
    // @apply flex flex-col gap-2;
}
.inv_item {
    @apply break-all;
    >*{
        @apply mr-2;
    }
    &_name {}

    &_text {}

    &_image {}

    &__error {
        @apply text-red-400 dark:text-red-800;
    }
}
</style>