<script setup lang="ts">
import { apiBase } from '~/helpers';
const headers = new Headers();
headers.append("Content-Type", "application/json");

const items = ref()
onMounted(async () => {
    const items_data = await $fetch<ApiTypeTmc>(`${apiBase}/tgbot/`, { headers })
    items.value = items_data.results
})
const columns = [
    {
        key: 'name',
        label: 'Название'
    },
    {

        key: 'date',
        label: 'Дата'
    },
    {

        key: 'tmc',
        label: 'ТМЦ'
    },
    {
        key: 'user_id',
        label: 'ID автора'
    }
]
</script>
<template>
    <UTable :rows="items" :columns="columns">
        <template #date-data="{ row }">
            Создано: {{ new Date(row.created_at).toLocaleString('ru-RU') }}<br />
            Обновлено: {{ new Date(row.updated_at).toLocaleString('ru-RU') }}
        </template>
        <template #tmc-data="{ row }">
            <template v-for="item in row.tmc">
                <strong>{{ item.tmc.name }}</strong>
                <ul>
                    <li v-for="el in item.field">
                        {{ el.field.name }}
                    </li>
                </ul>
            </template>
        </template>
    </UTable>
</template>