<template>
    <a-row :gutter="[24, 18]">
        <a-col :span="24">
   
                <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-col>
        <a-col :span="24">
            <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange">
                <template #bodyCell="{ column, record }">
                        <template v-if="column.key === 'created_at'">
                            <div>
                                {{ record.created_at ? dayjs(record.created_at).format('YYYY-MM-DD HH:mm') : '-' }}
                            </div>
                        </template>
                    </template>
            </a-table>
        </a-col>
    </a-row>


</template>
<script lang = "ts" setup>
import { ref,onBeforeMount } from 'vue'
import { usePagination } from '@/hooks'
import { orderList } from '@/apis/admin'
import dayjs from 'dayjs'
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
const columns = ref([
    { title: '日期', dataIndex: 'created_at', key: 'created_at' },
    { title: '交易类型', dataIndex: 'status', key: 'status' },
    { title: '交易金额', dataIndex: 'amount', key: 'amount' },
    { title: '优惠金额', dataIndex: 'dis_count_amount', key: 'dis_count_amount' },
    { title: '余额支付', dataIndex: 'real_amount', key: 'real_amount' },
    // { title: '优惠券抵扣', dataIndex: 'flowNum', key: 'flowNum' },
])
onBeforeMount(()=>{
getPageList()

})
const getPageList = async()=>{
     try {
        const { pageSize, current } = paginationState
        const res: any = await orderList({ pageSize: pageSize, pageNum: current });
        listData.value = res.list;
        paginationState.total = res.count;
        console.log('支付列表:', res);

        // advantageList.value = list;
    } catch (error: any) {
        console.error('产品优势请求失败:', error);
    }
}
/**
 * 分页
 */
function onTableChange({ current, pageSize }) {
    paginationState.current = current
    paginationState.pageSize = pageSize
    getPageList()
}
/**
 * 搜索
 */
function handleSearch() {
    resetPagination()
    getPageList()
}
/**
 * 重置
 */
function handleResetSearch() {
    searchFormData.value = {}
    resetPagination()
    getPageList()
}
</script>