<template>
  <div class="status-page mg-content">
    <el-card shadow="never" class="status-card">
      <template #header>
        <span>SimpleLite Service Status</span>
        <el-tag type="success" effect="dark" style="margin-left: 8px">Web-Enabled (Mock)</el-tag>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="模式">Web-Enabled</el-descriptions-item>
        <el-descriptions-item label="启动时间">{{ startTime }}</el-descriptions-item>
        <el-descriptions-item label="运行时长">{{ uptime }}</el-descriptions-item>
        <el-descriptions-item label="节点角色"><el-tag type="success">Active (ROSE)</el-tag></el-descriptions-item>
        <el-descriptions-item label="WebAPI">http://0.0.0.0:7001 <el-tag size="small">OK</el-tag></el-descriptions-item>
        <el-descriptions-item label="WebSocket">ws://0.0.0.0:7002 <el-tag size="small">OK</el-tag></el-descriptions-item>
        <el-descriptions-item label="webVRender">http://0.0.0.0:8223 <el-tag size="small" type="success">OK</el-tag></el-descriptions-item>
        <el-descriptions-item label="Platform.Server">:8080 (pid=12345)</el-descriptions-item>
        <el-descriptions-item label="在线 Vue 客户端">admin=3, monitor=4</el-descriptions-item>
        <el-descriptions-item label="调度循环 / 任务">50 Hz · 14 / 32</el-descriptions-item>
      </el-descriptions>
      <div class="status-actions">
        <el-button>查看日志</el-button>
        <el-button type="warning" plain>重启 Web</el-button>
        <el-button type="danger" plain>关闭服务</el-button>
        <el-button @click="back">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const startTime = new Date().toLocaleString('zh-CN')
const uptime = ref('00:00:00')

let timer: number | undefined
const t0 = Date.now()

function tick() {
  const ms = Date.now() - t0
  const s = Math.floor(ms / 1000)
  const h = String(Math.floor(s / 3600)).padStart(2, '0')
  const m = String(Math.floor((s % 3600) / 60)).padStart(2, '0')
  const ss = String(s % 60).padStart(2, '0')
  uptime.value = `${h}:${m}:${ss}`
}

onMounted(() => {
  tick()
  timer = window.setInterval(tick, 1000)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})

function back() { router.back() }
</script>

<style scoped>
.status-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.status-card { width: 720px; }
.status-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
</style>
