<template>
    <div class="follow-record">
        <!-- 搜索 -->
        <LeadRecordSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
            @reset="handleReset">
            <template #button="{ form }">
                <el-button type="primary" @click="handleExport()">
                    导出
                </el-button>
            </template>
        </LeadRecordSearch>
        <!-- 表格 -->
        <LeadRecordTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" />

        <!-- 分页 -->
        <LeadRecordPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
           @pagination-change="handlePaginationChange" />
    </div>
</template>

<script setup lang="ts">
// 组件
import LeadRecordSearch from '@/components/common/Search.vue'
import LeadRecordTable from '@/components/common/Table.vue'
import LeadRecordPagination from '@/components/common/Pagination.vue'
// 配置以及表单验证
import { search, tableColumns } from './options'

// 接口
import { getFollowListApi } from '@/api/modules/personalized/followRecord'

// 导出表格
import { exportToExcel } from '@/utils/exportToExcel'
/**
 * @description: 定义搜索数据
 */
const searchOptions = ref(search)
const searchForm = ref({
    orderNo: '',
    startTime: '',
    endTime: '',
})
/**
 * @description: 定义表格数据
 */
const tableTree = ref([])
const tableColumnsOptions = ref(tableColumns)
/**
 * @description: 定义分页数据
 */
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

/**
 * @description: 定义公共请求数据方法
 */
const getLeadList = async () => {
    const params = {
        page: currentPage.value,
        page_size: pageSize.value,
        start_time: searchForm.value.startTime.length > 0 ? `${searchForm.value.startTime} 0:00:00` : '2026-01-01 0:00:00',
        end_time: searchForm.value.endTime.length > 0 ? `${searchForm.value.endTime} 23:59:59` : '2026-03-01 23:59:59',
        order_no: searchForm.value.orderNo,
    }
    const data: any = await getFollowListApi(params)
    // table数据映射
    tableTree.value = data.data.map((item: any) => ({
        orderNo: item.order_id,
        followAccount: item.user.username,
        symbol: item.variety_id,
        tradeQty: item.num,
        tradeTime: item.created_at,
        closeProfit: '后续添加'
    }))

    //分页数据
    total.value = data.total
    currentPage.value = data.current_page
    pageSize.value = Number(data.per_page)
}

/**
 * @description: 页面加载完成需要请求的数据
 */
onMounted(() => {
    getLeadList()
})
/**
 * @description: 定义搜索方法
 */
const handleSearch = async () => {
    console.log("搜索");
    getLeadList()
}
const handleReset = () => {
    console.log('重置搜索')
    searchForm.value = {
        orderNo: '',
        startTime: '',
        endTime: '',
    }
    getLeadList()
}
const handleExport = () => {
    exportToExcel({
        tableData: tableTree.value,
        columns: tableColumnsOptions.value,
        title: '导出带单记录',
        defaultFileNamePrefix: '带单记录',
    })
}
/**
 * @description: 定义分页方法
 */
const handlePaginationChange = (page: { currentPage: number, size: number }) => {
    currentPage.value = page.currentPage
    getLeadList()
}
</script>
