<script setup>
import { ref, onMounted } from 'vue'

const dbStatus = ref('正在检测...')
const tableList = ref([])

onMounted(async () => {
  try {
    const resDb = await fetch('/api/db-check')
    const dataDb = await resDb.json()
    if (dataDb.status === 'success') { dbStatus.value = dataDb.message; tableList.value = dataDb.tables_found }
  } catch (error) { dbStatus.value = '后端连接失败' }
})
</script>

<template>
  <el-card shadow="hover">
    <template #header><div class="card-header"><span>系统运行监控</span></div></template>
    <el-alert :title="dbStatus" type="success" show-icon :closable="false" style="margin-bottom: 20px;" />
    <div v-if="tableList.length > 0">
      <h4>已成功加载的底层数据表：</h4>
      <el-table :data="tableList.map(item => ({ name: item }))" border style="width: 100%; max-width: 400px;">
        <el-table-column prop="name" label="PostgreSQL 数据表名称" />
      </el-table>
    </div>
  </el-card>
</template>