<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: 'status', label: 'Status' },
        { key: 'name', label: 'Name' },
        { key: 'ip', label: 'IP' },
    ]" :rows="pending ? [] : data?.data" :ui="{
        td: {
            padding: 'px-2 md:px-4 py-2 md:py-4',
        },
    }">
        <template #status-data="{ row }">
            <span class="flex align-baseline justify-center gap-1">
                <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 * 1000).toLocaleTimeString('ru-RU') }}
                </span>
            </span>
        </template>
        <template #name-data="{ row }">
            <div class="text-wrap">
                {{ row.sn }} -
                {{ row.name }}
            </div>
        </template>
        <template #ip-data="{ row }">
            <span v-if="row.ip !== 'Unknown'">{{ row.ip }}</span>
            <span v-else>-</span>
        </template>
    </UTable>
</template>