<script setup lang="ts">
const config = useRuntimeConfig()
const route = useRoute()
interface APIBody {
    data: any[],
    status: 'success' | 'error'
}

const { data, pending, error, status } = await useLazyFetch<APIBody>(`${config.public.apiBase}/api/vtk/${route.params.slug}`, { server: false })
</script>
<template>
    <UAlert v-if="status == 'error'" :title="`Произошла ошибка ${error?.statusCode}`"
        :description="error?.data && error.data.detail ? error.data.detail : error?.statusMessage" />

    <UTable v-else :loading="pending" :columns="[
        { key: 'sn', label: 'Serial Number' },
        { key: 'name', label: 'name' },
        { key: 'ip', label: 'IP' },
        { key: 'last_online', label: 'last_online' }
    ]" :rows="pending ? [] : data?.data">
        <template #last_online-data="{ row }">
            <UIcon name="i-heroicons-check-circle" class="text-green-500 text-xl" v-if="row.last_online == -1" />
            <span class="flex align-baseline gap-1" v-else>
                <UIcon name="i-heroicons-x-circle" class="text-red-500 text-xl" />
                {{ new Date(row.last_online).toLocaleTimeString('ru-RU') }}
            </span>
        </template>
        <template #name-data="{ row }">
            <div class="text-wrap">
                {{ row.name }}
            </div>
        </template>
    </UTable>
</template>