<template>
    <a-row :gutter="[24, 18]">
        <a-col :span="24">
            <a-card>
                <a-form :model="searchFormData" labelAlign="left" class="x-search-bar">
                    <a-row :gutter="24">
                        <a-col :span="6">
                            <a-form-item label="交易时间" name="time">
                                <a-range-picker v-model:value="searchFormData.time" />
                            </a-form-item>
                        </a-col>
                        <a-col class="align-left" :span="6">
                            <a-space>
                                <a-button @click="handleResetSearch">重置</a-button>
                                <a-button ghost type="primary" @click="handleSearch">
                                    查询
                                </a-button>
                            </a-space>
                        </a-col>
                    </a-row>
                </a-form>
            </a-card>
        </a-col>
        <a-col :span="24">
            <a-card>
                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange"/>
            </a-card>
        </a-col>
    </a-row>


</template>
<script setup>
import { ref,onBeforeMount } from 'vue'
import { usePagination } from '@/hooks'
// const listData=ref([ {title:1}])
// const paginationState=ref({
//             total: 0,
//         current: 1,
//         pageSize: 10,
//         showTotal: (total) => `总 ${total} 条数据`,
//         pageSizeOptions: ['10', '20', '30', '40'],
// })
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
const columns = ref([
    { title: '流水号', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '交易时间', dataIndex: 'transactionTime', key: 'transactionTime' },
    { title: '收支类型', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '交易类型', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '交易渠道', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '账户余额', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '备注', dataIndex: 'flowNum', key: 'flowNum' },
])
onBeforeMount(()=>{
getPageList()

})
const getPageList=()=>{
    listData.value=[
        {flowNum:1}
    ]
}
/**
 * 分页
 */
function onTableChange({ current, pageSize }) {
    paginationState.current = current
    paginationState.pageSize = pageSize
    getPageList()
}
/**
 * 搜索
 */
function handleSearch() {
    resetPagination()
    getPageList()
}
/**
 * 重置
 */
function handleResetSearch() {
    searchFormData.value = {}
    resetPagination()
    getPageList()
}
</script>