<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="680px"  @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(() => {
  getLogList()
})

</script>

<style scoped></style>
