<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="orderNum">
                                <a-input v-model:value="searchFormData.orderNum" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item label="产品名称" name="proName">
                                <a-input v-model:value="searchFormData.proName"></a-input>
                            </a-form-item>
                        </a-col>
                        <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">
                    <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 v-if="column.key === 'billing_end'">
                            <div>
                                {{   dayjs(record.billing_start).format('YYYY-MM-DD HH:mm') +"~" +dayjs(record.billing_end).format('YYYY-MM-DD HH:mm')  }}
                            </div>
                        </template>
                    </template>
                </a-table>
            </a-card>
        </a-col>
    </a-row>


</template>
<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import { usePagination } from '@/hooks'
import { useList } from '@/apis/admin'
import dayjs from 'dayjs'
// const listData=ref([ {title:1}])
// const paginationState=ref({
//             total: 0,
//         current: 1,
//         pageSize: 10,
//         showTotal: (total) => `总 ${total} 条数据`,
//         pageSizeOptions: ['10', '20', '30', '40'],
// })
const { listData, 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' },
    // { title: '操作', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '流水号', dataIndex: 'serial_number', key: 'serial_number' },
    { title: '交易时间', dataIndex: 'created_at', key: 'created_at' },
    { title: '主机ID', dataIndex: 'host_id', key: 'host_id' },
    { title: '实例ID', dataIndex: 'host_case_id', key: 'host_case_id' },
    { title: '算力型号', dataIndex: 'computing_power_model', key: 'computing_power_model' },
    { title: '算力数量', dataIndex: 'gpu_count', key: 'gpu_count' },
    { title: '计费时间范围', dataIndex: 'billing_end', key: 'billing_end' },
    { title: '计费时长', dataIndex: 'bill_time', key: 'bill_time' },
    { title: '单价', dataIndex: 'price', key: 'price' },
    { title: '交易金额', dataIndex: 'real_amount', key: 'real_amount' },
])
onBeforeMount(() => {
    getPageList()

})

const getPageList = async () => {
    try {
        const { pageSize, current } = paginationState
        const res: any = await useList({ 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>