<template>
  <div>
    <div class="searchForm">
      <searchForm
        :search="LOGIN_LOG_SEARCH_CONFIG"
        @searchData="searchData"
        @resetData="resetData"
        class="search-box searchForm"
      />
    </div>
    <div class="gva-table-box">
      <Content
        @changePage="changePage"
        :total="total"
        v-model:tabloading="tableLoading"
        v-model:currentPage="queryParams.page"
        v-model:pageSize="queryParams.pageSize"
        :data="tableData"
        :config="LOGIN_LOG_TABLE_CONFIG"
      >
        <template #login_time="{ row }">
          {{ row.login_time }}
        </template>
      </Content>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import searchForm from '@/components/searchForm/index.vue'
import Content from '@/components/content/index.vue'
import { getLoginInfo } from '@/api/user/index.js'
import { ref, onMounted } from 'vue'
import { LOGIN_LOG_SEARCH_CONFIG, LOGIN_LOG_TABLE_CONFIG } from '@/config'

const tableLoading = ref(true)
const tableData = ref([])
const queryParams = ref({
  page: 1,
  pageSize: 10,
  user_id: '',
  user_name: ''
})
const total = ref(0)

// 搜索数据
const searchData = (data) => {
  queryParams.value.page = 1
  queryParams.value = { ...queryParams.value, ...data }
  getList()
}

// 重置数据
const resetData = () => {
  queryParams.value = {
    page: 1,
    pageSize: 10,
    user_id: '',
    user_name: ''
  }
  getList()
}

// 获取登录日志列表
async function getList() {
  try {
    tableLoading.value = true
    const res = await getLoginInfo(queryParams.value)
    if (res.code === 0) {
      tableData.value = res.data.list || []
      total.value = res.data.total || 0
    } else {
      ElMessage.error(res.msg || '获取登录日志失败')
    }
  } catch (error) {
    console.error('获取登录日志失败:', error)
    ElMessage.error('获取登录日志失败')
  } finally {
    tableLoading.value = false
  }
}

// 分页处理
function changePage(data) {
  queryParams.value.page = data
  getList()
}

// 页面加载时获取数据
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.searchForm {
  margin-bottom: 20px;
}

.gva-table-box {
  background: white;
  border-radius: 4px;
  padding: 20px;
}
</style>
