<!-- src/components/AccessLog.vue -->
<template>
  <div class="access-log">
    <div class="title-wrapper">
      <h3>访问记录</h3>
      <span class="desc">以下显示内容为账号及其子账号近3个月的登录记录</span>
    </div>

    <a-table
      :columns="columns"
      :data-source="loginRecords"
      :pagination="false"
      size="middle"
      :bordered="true"
      class="login-table"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义类型
interface LoginRecord {
  id: number;
  time: string;
  ip: string;
  city: string;
  type: string;
  operator: string;
}

// 模拟数据
const loginRecords = ref<LoginRecord[]>([
  {
    id: 1,
    time: '2025-11-21 09:58:38',
    ip: '183.209.69.36',
    city: '中国 江苏省',
    type: 'Web微信登录',
    operator: '炼丹师5075',
  },
  {
    id: 2,
    time: '2025-11-19 17:07:13',
    ip: '183.209.69.36',
    city: '中国 江苏省',
    type: 'Web微信登录',
    operator: '炼丹师5075',
  },
]);

// 表格列配置
const columns = [
  {
    title: '访问时间',
    dataIndex: 'time',
    key: 'time',
    width: 200,
  },
  {
    title: '访问IP地址',
    dataIndex: 'ip',
    key: 'ip',
    width: 180,
  },
  {
    title: '访问城市',
    dataIndex: 'city',
    key: 'city',
    width: 180,
  },
  {
    title: '登录类型',
    dataIndex: 'type',
    key: 'type',
    width: 200,
  },
  {
    title: '操作人',
    dataIndex: 'operator',
    key: 'operator',
    width: 180,
  },
];
</script>

<style scoped>
.access-log {
  padding: 20px;
  background-color: #f9f9f9;
}

.title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.title-wrapper h3 {
  margin: 0;
  color: #333;
  font-size: 1.2em;
}

.desc {
  color: #faad14;
  font-size: 14px;
  font-weight: normal;
}

.login-table {
  border-radius: 6px;
}
</style>