<template>
  <div>
    <div class="page-header">
      <h2>仪表盘</h2>
    </div>
    <el-row :gutter="16" style="margin-bottom: 24px;">
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="margin-bottom:12px;">
        <el-card shadow="hover">
          <el-statistic title="子账号总数" :value="data.total_users" />
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="margin-bottom:12px;">
        <el-card shadow="hover">
          <el-statistic title="正常运行" :value="data.active_users">
            <template #suffix><span style="color:#67c23a;font-size:14px;"> 个</span></template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="margin-bottom:12px;">
        <el-card shadow="hover">
          <el-statistic title="已停用" :value="data.disabled_users">
            <template #suffix><span style="color:#f56c6c;font-size:14px;"> 个</span></template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="margin-bottom:12px;">
        <el-card shadow="hover">
          <el-statistic title="累计总消费" :value="Number(data.total_spending)" :precision="2"
                        prefix="¥" />
        </el-card>
      </el-col>
    </el-row>

    <el-card>
      <template #header>
        <span>最近告警</span>
      </template>
      <el-table :data="data.recent_alerts" stripe table-layout="auto" empty-text="暂无告警">
        <el-table-column prop="created_at" label="时间" min-width="160">
          <template #default="{ row }">{{ formatTime(row.created_at) }}</template>
        </el-table-column>
        <el-table-column prop="alert_type" label="类型" min-width="80" align="center">
          <template #default="{ row }">
            <el-tag :type="typeTagMap[row.alert_type] || 'info'" size="small">
              {{ typeLabelMap[row.alert_type] || row.alert_type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="iam_username" label="子账号" min-width="120" />
        <el-table-column prop="title" label="标题" min-width="200" />
        <el-table-column prop="spending_amount" label="消费" min-width="100" align="right">
          <template #default="{ row }">
            {{ row.spending_amount ? `¥${Number(row.spending_amount).toLocaleString()}` : '-' }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

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

const data = ref({
  total_users: 0, active_users: 0, disabled_users: 0,
  monitored_users: 0, total_spending: '0', recent_alerts: [],
})

const typeLabelMap = { warning: '告警', disable: '停用', manual: '操作', error: '错误' }
const typeTagMap = { warning: 'warning', disable: 'danger', manual: '', error: 'danger' }

onMounted(async () => {
  try {
    const res = await api.get('/api/v1/dashboard/')
    data.value = res.data
  } catch (e) {
    console.error('Failed to load dashboard:', e)
  }
})

function formatTime(t) {
  if (!t) return ''
  return new Date(t).toLocaleString('zh-CN')
}
</script>
