<template>
  <div>
    <el-row :gutter="14" class="kpi-row">
      <el-col :span="6"><el-statistic title="车辆在线" :value="onlineCars">
        <template #suffix><span class="muted">/ {{ cars.length }}</span></template>
      </el-statistic></el-col>
      <el-col :span="6"><el-statistic title="任务进行中" :value="runningCount" /></el-col>
      <el-col :span="6"><el-statistic title="故障车辆" :value="faultCount" /></el-col>
      <el-col :span="6"><el-statistic title="今日运维动作" :value="audits.length" /></el-col>
    </el-row>
    <el-row :gutter="14" style="margin-top: 14px">
      <el-col :span="14">
        <el-card shadow="never">
          <template #header><span>实时车辆</span></template>
          <el-table :data="cars" size="small" max-height="360" stripe>
            <el-table-column prop="name" label="名称" width="100" />
            <el-table-column prop="state" label="状态" width="90">
              <template #default="s"><el-tag size="small" :type="stateTag(s.row.state)">{{ s.row.state }}</el-tag></template>
            </el-table-column>
            <el-table-column prop="group" label="分组" width="100" />
            <el-table-column label="电量" width="160">
              <template #default="s"><el-progress :percentage="Math.round(s.row.batterySoc * 100)" :stroke-width="8" /></template>
            </el-table-column>
            <el-table-column prop="missionId" label="当前任务" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card shadow="never">
          <template #header><span>最近运维动作</span></template>
          <el-table :data="audits" size="small" max-height="360" stripe>
            <el-table-column prop="ts" label="时间" width="180" />
            <el-table-column prop="opCode" label="动作" />
            <el-table-column prop="target" label="目标" width="100" />
            <el-table-column prop="result" label="结果" width="80">
              <template #default="s">
                <el-tag size="small" :type="s.row.result === 'ok' ? 'success' : 'danger'">{{ s.row.result }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { listCars, listMissions } from '@/api/projection'
import { listAudits } from '@/api/ops'
import type { Car } from '@/types/car'
import type { Mission } from '@/types/mission'
import type { OpsAuditEntry } from '@/types/ops'

const cars = ref<Car[]>([])
const missions = ref<Mission[]>([])
const audits = ref<OpsAuditEntry[]>([])

const onlineCars = computed(() => cars.value.filter((c) => c.state !== 'offline').length)
const runningCount = computed(() => missions.value.filter((m) => m.status === 'running').length)
const faultCount = computed(() => cars.value.filter((c) => c.state === 'fault').length)

function stateTag(state: string) {
  switch (state) {
    case 'running': return 'success'
    case 'idle': return 'info'
    case 'charging': return 'warning'
    case 'paused': return 'warning'
    case 'fault': return 'danger'
    case 'offline': return 'info'
    default: return 'info'
  }
}

onMounted(async () => {
  ;[cars.value, missions.value, audits.value] = await Promise.all([listCars(), listMissions(), listAudits()])
})
</script>

<style scoped>
.muted { color: var(--mg-text-dim); font-size: 12px; }
</style>
