<template>
  <div class="page-content">
    <div class="mb-5">
      <h2 class="text-xl font-semibold">登录记录</h2>
      <p class="text-g-500 mt-1 text-sm">最近 50 条本账号的登录尝试（含失败原因），如发现异常请立即修改密码</p>
    </div>
    <ElTable v-loading="loading" :data="logs" row-key="id">
      <ElTableColumn prop="created_at" label="时间" width="190" />
      <ElTableColumn label="结果" width="90">
        <template #default="{ row }">
          <ElTag :type="row.success ? 'success' : 'danger'">{{ row.success ? '成功' : '失败' }}</ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="ip" label="IP" width="150">
        <template #default="{ row }">{{ row.ip || '—' }}</template>
      </ElTableColumn>
      <ElTableColumn prop="user_agent" label="客户端" min-width="220" show-overflow-tooltip />
      <ElTableColumn prop="reason" label="原因" width="160" />
    </ElTable>
  </div>
</template>

<script setup lang="ts">
  import request from '@/utils/http'

  interface LoginLog {
    id: string
    success: boolean
    ip?: string
    user_agent: string
    reason: string
    created_at: string
  }

  const loading = ref(false)
  const logs = ref<LoginLog[]>([])

  async function load() {
    loading.value = true
    try {
      logs.value = await request.get<LoginLog[]>({ url: '/api/v1/portal/login-logs' })
    } finally {
      loading.value = false
    }
  }

  onMounted(load)
</script>
