<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  height="600px"  @change="changePage" :page="page" size="lg" ref="tableRef" :columns="columns" :data-source="dataSource">
        <template v-slot:event_type="{ data }">
          <span :style="{ color: data.event_type === '登录' ? '#67C23A' : '#409EFF' }">
            {{ data.event_type }}
          </span>
        </template>
      </lay-table>
    </lay-card>
  </lay-container>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { layer } from '@layui/layer-vue'
import { logList } from '@/api/module/home';
const page = reactive({
  current: 1,
  limit: 10,
  total: 1
});
// 定义接口类型
interface LoginLog {
  id: number
  user_id: number
  ip_code: string        // 登录IP
  createtime: string     // 记录时间
  content: string        // 事件内容
  nickname: string       // 用户姓名
  work_number: string    // 工号
  name: string          // 科室
}
onMounted(() => {
  getLogList();
});
// 分页变化
const changePage = (ppc) => {
  page.current = ppc.current;
  page.limit = ppc.limit;
  getLogList();
}
const getLogList = () => {
  logList({ page: page.current, size: page.limit }).then((res) => {
    if (res.code === 1) {
      dataSource.value = res.data.data;
      page.total = res.data.count;
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}
// 列表数据
const dataSource = ref<LoginLog[]>([])

// 表格列定义
const columns = [
  {
    title: "科室",
    width: "120px",
    key: "name"
  },
  {
    title: "工号",
    width: "120px",
    key: "work_number"
  },
  {
    title: "登录IP",
    width: "150px",
    key: "ip_code"
  },
  {
    title: "用户姓名",
    width: "120px",
    key: "nickname"
  },
  {
    title: "事件内容",
    width: "200px",
    key: "content"
  },
  {
    title: "记录时间",
    width: "180px",
    key: "createtime"
  },
]

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,
      user_id: 10,
      ip_code: '192.168.1.100',
      createtime: '2024-03-20 10:30:45',
      content: '用户登录成功',
      nickname: '张三',
      work_number: '111111',
      name: '大腿骨折2'
    },
    {
      id: 2,
      department: '外科',
      record_time: '2024-03-20 09:15:22',
      login_name: 'user1',
      username: '张医生',
      ip_address: '192.168.1.101',
      event_type: '登出',
      event_content: '用户主动登出',
      device_info: 'Firefox 123.0 / MacOS'
    }
  ]
}
</script>

<style scoped></style>
