<template>
  <lay-container style="padding: 20px">
    <lay-card>
      <div style="padding: 10px">
        <span style="font-size: 18px;vertical-align: center;margin-right: 20px">登录日志列表</span>
      </div>
      <lay-table size="lg" ref="tableRef" :columns="columns" :data-source="dataSource">
        <template v-slot:login_status="{ data }">
          <span :style="{ color: data.login_status ? '#67C23A' : '#F56C6C' }">
            {{ data.login_status ? '成功' : '失败' }}
          </span>
        </template>
      </lay-table>
    </lay-card>
  </lay-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { layer } from '@layui/layer-vue'

// 定义接口类型
interface LoginLog {
  id: number
  username: string
  ip_address: string
  login_time: string
  login_status: boolean
  device_info: string
}

// 列表数据
const dataSource = ref<LoginLog[]>([])

// 表格列定义
const columns = [
  {
    title: "用户名",
    width: "150px",
    key: "username"
  },
  {
    title: "IP地址",
    width: "150px",
    key: "ip_address"
  },
  {
    title: "登录时间",
    width: "180px",
    key: "login_time"
  },
  {
    title: "登录状态",
    width: "100px",
    key: "login_status",
    customSlot: 'login_status'
  },
  {
    title: "设备信息",
    width: "300px",
    key: "device_info"
  }
]

onMounted(() => {
  getLoginLogs()
})

// 获取登录日志数据
const getLoginLogs = () => {
  // 这里替换为实际的API调用
  // getLoginLogList().then((res) => {
  //   if (res.code === 1) {
  //     dataSource.value = res.data
  //   } else {
  //     layer.msg(res.msg, {icon: 2})
  //   }
  // })

  // 模拟数据
  dataSource.value = [
    {
      id: 1,
      username: 'admin',
      ip_address: '192.168.1.100',
      login_time: '2024-03-20 10:30:45',
      login_status: true,
      device_info: 'Chrome 122.0.0.0 / Windows 10'
    },
    {
      id: 2,
      username: 'user1',
      ip_address: '192.168.1.101',
      login_time: '2024-03-20 09:15:22',
      login_status: false,
      device_info: 'Firefox 123.0 / MacOS'
    }
  ]
}
</script>

<style scoped></style>
