<template>
    <a-row :gutter="[24, 18]">
        <a-col :span="24">
            <a-card>
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div><span style="color:#cca558;font-weight: bold;font-size: 18px;">0</span><span> / 100</span>
                    </div>
                    <div>
                        <a href="/document/member" target="_blank" class="faq-title">了解成长值获取方式></a>
                    </div>
                </div>
                <a-progress stroke-linecap="square" :percent="75" strokeColor="#52c41a" />
                <div style="color: #333;">
                    <span>{{ timeRange }}</span>
                    <span style="margin-left: 10px;color: #999;">(近三个月内获得的成长值)</span>
                </div>
            </a-card>
        </a-col>
        <a-col :span="24">
            <a-card title="成长值获取记录">
                <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: 'serial_number', key: 'serial_number' },
    { title: '获取时间', dataIndex: 'created_at', key: 'created_at' },
    { title: '成长值奖励', dataIndex: 'host_id', key: 'host_id' },
])
const timeRange = ref('')

onBeforeMount(() => {
    const today = new Date()
    const threeMonthsAgo = new Date(today)
    threeMonthsAgo.setMonth(today.getMonth() - 3)
    const format = (d) => d.toISOString().slice(0, 10)
    timeRange.value = `${format(threeMonthsAgo)}～${format(today)}`
    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>