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

        <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.waitSettlementMoney"
                        title="待结算佣金"
                        :precision="2"
                        value-style="font-size:30px"
                        class="mr-20"
                    />
                    <el-statistic
                        :value="statistics.settlementMoney"
                        title="已结算佣金"
                        :precision="2"
                        value-style="font-size:30px"
                        class="mr-20"
                    />
                    <el-statistic
                        :value="statistics.arrivedMoney"
                        title="已到账佣金"
                        :precision="2"
                        value-style="font-size:30px"
                        class="mr-20"
                    />
                    <el-statistic
                        :value="statistics.invalidMoney"
                        title="已失效佣金"
                        :precision="2"
                        value-style="font-size:30px"
                        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-button label="已到账" :value="3" />
                    <el-radio-button label="已作废" :value="4" />
                </el-radio-group>
            </template>

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

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

        <commissionDetail ref="commissionDetailRef" />
    </ele-page>
</template>

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

    defineOptions({ name: 'Commission' });

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

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

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

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

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

    //结算状态数组
    const settlementStatus = ref([
        { label: '待结算', value: 1 },
        { label: '已结算', value: 2 },
        { label: '已到账', value: 3 },
        { label: '已作废', value: 4 }
    ]);

    /** 表格列配置 */
    const columns = ref([
        {
            label: '交易时间',
            prop: 'createTime',
            align: 'center',
            width: 180
        },
        { label: '合伙人姓名', prop: 'partnerName', align: 'center' },
        { label: '合伙人用户ID', prop: 'inviteUserId', align: 'center' },
        { label: '合伙人手机号', prop: 'partnerMobile', align: 'center' },
        { label: '下单人姓名', prop: 'orderName', align: 'center' },
        { label: '下单人手机号', prop: 'orderMobile', align: 'center' },
        { label: '订单金额', prop: 'orderExpectMoney', align: 'center' },
        {
            label: '结算金额',
            prop: 'orderFinalMoney',
            align: 'center',
            formatter: (row) => row.orderFinalMoney || '--'
        },
        { label: '预估收入', prop: 'expectSettlementMoney', align: 'center' },
        {
            label: '结算收入',
            prop: 'settlementMoney',
            align: 'center',
            formatter: (row) => row.settlementMoney || '--'
        },
        { label: '交易状态', prop: 'status', align: 'center', slot: 'status' },
        {
            label: '订单编号',
            prop: 'beInviteOrderId',
            align: 'center',
            slot: 'orderId'
        }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/user/userInviteLog/pageList',
        fileName: '佣金记录',
        cacheKey: 'commissionTable',
        params: {
            status: useStatus.value
        }
    });

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