<template>
    <div class="client">
        <!-- 搜索组件 -->
        <ClientSearch :search-form="searchForm" :search-options="clientSearchOptions" @search="handleSearch"
            @reset="handleReset">
            <!-- 这里可以插入自定义插槽（如果需要） -->
        </ClientSearch>

        <!-- 下方的表格区域（与你的图片对应） -->
        <el-table :data="tableData" border>
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="registerStartTime" label="注册开始时间" />
            <el-table-column prop="registerEndTime" label="注册结束时间" />
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                        {{ row.status === 1 ? '开启' : '关闭' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default>
                    <el-button link type="primary">搜索</el-button>
                    <el-button link type="primary">重置</el-button>
                    <el-button link type="primary">新增用户</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <ClientPagination v-model="currentPage" v-model:page-size-value="pageSize" :total="total"
        @pagination-change="handlePaginationChange" />
</template>

<script lang="ts" setup>
// 引入组件
import ClientSearch from '@/components/common/Search.vue'
import ClientTable from '@/components/common/Table.vue'
import ClientPagination from '@/components/common/Pagination.vue'

// 引入搜索配置
import { clientSearchOptions } from './options'

// 定义搜索表单（与配置项
const searchForm = ref({
    username: '',           // 用户名
    registerTime: [],       // 注册时间范围（daterange 类型）
    status: ''              // 状态（开启/关闭）
})


// 3. 查询逻辑（点击「搜索」触发）
const handleSearch = () => {
    console.log('发起查询，参数：', searchForm)

    // 实际项目中，需要将 registerTime 数组拆分为 start 和 end
    const params = {
        ...searchForm.value,
        registerStartTime: searchForm.value.registerTime[0] || '',
        registerEndTime: searchForm.value.registerTime[1] || ''
    }
    delete params.registerTime // 删除原数组字段

    // 调用接口获取列表数据
    // api.getUserList(params).then(res => {
    //   tableData.value = res.list
    // })
}

// 4. 重置逻辑（点击「重置」触发）
const handleReset = () => {
    // 清空表单
    searchForm.value.username = ''
    searchForm.value.registerTime = []
    searchForm.value.status = ''

    // 重置后自动发起一次查询
    handleSearch()
}

// 页面初始化时自动查询一次
handleSearch()













// 分页核心参数
const currentPage = ref<number>(1) // 当前页
const pageSize = ref<number>(50)   // 每页条数
const total = ref<number>(100)       // 总条数

// 初始化加载数据
onMounted(() => {
    fetchData()
})

// 数据请求方法（父组件处理业务逻辑）
const fetchData = async () => {
    try {
        // 模拟接口请求：传递分页参数
        // const res = await api.getList({ page: currentPage.value, size: pageSize.value })
        // 模拟返回数据
        const res = {
            list: [/* 业务数据 */],
            total: 100 // 总条数
        }
        tableData.value = res.list
        total.value = res.total
    } catch (error) {
        console.error('数据请求失败：', error)
    }
}

// 分页变更回调（处理业务逻辑）
const handlePaginationChange = ({ currentPage: page, pageSize: size }: { currentPage: number, pageSize: number }) => {
    // 更新分页参数
    currentPage.value = page
    pageSize.value = size
    // 重新请求数据
    fetchData()
}
</script>
