<template>
    <ele-page flex-table>
        <page-search @search="reload" :status="useStatus" />

        <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns">
            <template #toolbar>
                <div class="flex items-center mb-4">
                    <el-statistic
                        :value="statistics.totalMoney"
                        title="累计书款金额"
                        :precision="2"
                        value-style="font-size:30px"
                        class="mr-20"
                    />
                    <el-statistic
                        :value="statistics.unFinishMoney"
                        title="待结算书款"
                        :precision="2"
                        value-style="font-size:30px"
                        class="mr-20"
                    />
                    <el-statistic
                        :value="statistics.finishMoney"
                        title="已结算书款"
                        value-style="font-size:30px"
                        :precision="2"
                        class="mr-20"
                    />
                </div>

                <div class="common-title mb-4">交易记录</div>

                <el-radio-group
                    @change="handleStatusChange"
                    v-model="useStatus"
                >
                    <el-radio-button label="全部" value="" />
                    <el-radio-button label="待结算" value="1" />
                    <el-radio-button label="已结算" value="2" />
                </el-radio-group>
            </template>

            <template #status="{ row }">
                {{ statusDicts.find((d) => d.value == row.status)?.label }}
            </template>

            <template #orderId="{ row }">
                <el-button type="primary" link @click="handleOrderId(row)">{{
                    row.orderId
                }}</el-button>
            </template>
        </common-table>

        <orderDetail ref="orderDetailRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import pageSearch from './page-search.vue';
    import request from '@/utils/request';
    import OrderDetail from '@/views/recycleOrder/components/order-detail.vue';

    defineOptions({ name: 'BookPayments' });

    // 添加统计数据的响应式对象
    const statistics = reactive({
        totalMoney: 0,
        unFinishMoney: 0,
        finishMoney: 0
    });

    // 获取统计数据
    async function fetchStatistics() {
        try {
            const res = await request.get('/sys/finance/orderMoneySum');
            if (res.data.code === 200) {
                Object.assign(statistics, res.data.data);
            }
        } catch (error) {
            console.error('获取统计数据失败:', error);
        }
    }

    const orderDetailRef = ref(null);
    const handleOrderId = (row) => {
        orderDetailRef.value?.handleOpen(row);
    };

    onMounted(() => {
        fetchStatistics();
    });

    const statusDicts = ref([
        { label: '待结算', value: 1 },
        { label: '已结算', value: 2 }
    ]);

    const useStatus = ref('');
    function handleStatusChange(value) {
        pageRef.value.reload({ status: value });
    }

    /** 表格列配置 */
    const columns = ref([
        { label: '交易时间', prop: 'orderTime', align: 'center', width: 180 },
        { label: '用户ID', prop: 'userId', align: 'center' },
        {
            label: '支付单号/流水号',
            prop: 'changeLogId',
            align: 'center',
            minWidth: 180,
            formatter: (row) => row.changeLogId || '-'
        },
        { label: '对方账户', prop: 'nickName', align: 'center', minWidth: 140 },
        { label: '结算金额', prop: 'finalMoney', align: 'center' },
        { label: '交易状态', prop: 'status', align: 'center', slot: 'status' },
        {
            label: '交易类型',
            prop: 'type',
            align: 'center',
            formatter: (row) => (row.status == 2 ? '已结算书款' : '未结算书款')
        },
        {
            label: '订单编号',
            prop: 'orderId',
            align: 'center',
            minWidth: 120,
            slot: 'orderId'
        }
    ]);

    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/sys/finance/orderMoneyList',
        fileName: '书款记录',
        cacheKey: 'bookPayments'
    });

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }
</script>
