<template>
  <!-- 日志管理模块 -->
  <div class="mod-log">
    <!-- AvueCrud表格组件用于展示日志数据 -->
    <avue-crud
      ref="crudRef"                           <!-- 引用表格实例 -->
    :page="page"                            <!-- 分页信息 -->
    :data="dataList"                        <!-- 表格数据 -->
    :option="tableOption"                   <!-- 表格选项配置 -->
    @search-change="onSearch"               <!-- 搜索条件变化事件 -->
    @on-load="getDataList"                  <!-- 加载数据事件 -->
    />
  </div>
</template>

<script setup>
import { tableOption } from '@/crud/sys/log.js' // 引入日志表格配置
import { ref, reactive, onMounted } from 'vue'

// 数据列表绑定的响应式变量
const dataList = ref([])

// 分页信息配置
const page = reactive({
  total: 0, // 总条目数
  currentPage: 1, // 当前页码
  pageSize: 10 // 每页条目数
})

// 组件挂载完成后获取数据列表
onMounted(() => {
  getDataList()
})

/**
 * 获取数据列表方法
 * @param pageParam 可选参数，用于指定分页信息
 * @param params 搜索条件参数
 * @param done 分页加载完成回调函数
 */
const getDataList = (pageParam, params, done) => {
  http({
    url: http.adornUrl('/sys/log/page'), // API端点
    method: 'get', // 请求方式
    params: http.adornParams(
      Object.assign(
        {
          current: pageParam == null ? page.currentPage : pageParam.currentPage,
          size: pageParam == null ? page.pageSize : pageParam.pageSize
        },
        params // 合并搜索条件
      )
    )
  })
    .then(({ data }) => {
      dataList.value = data.records // 更新表格数据
      page.total = data.total // 更新总条目数
      if (done) done() // 如果有分页加载完成回调，则调用它
    })
}

/**
 * 条件查询方法
 * @param params 搜索条件参数
 * @param done 分页加载完成回调函数
 */
const onSearch = (params, done) => {
  getDataList(page, params, done) // 根据搜索条件获取数据列表
}
</script>
