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

            <div class="state-item" v-for="item in stateList" :key="item.title">
                <el-text size="large" class="state-title">{{
                    item.title
                }}</el-text>

                <div class="flex flex-wrap">
                    <div
                        class="child-item flex flex-col items-center justify-center"
                        v-for="child in item.children"
                        :key="child.name"
                    >
                        <el-text
                            size="large"
                            type="warning"
                            class="child-number"
                        >
                            {{ child.number }}
                        </el-text>
                        <el-text size="large" class="child-name">{{
                            child.name
                        }}</el-text>
                    </div>
                </div>
            </div>
        </ele-card>
    </ele-page>
</template>

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

    defineOptions({ name: 'FinanceOverview' });

    function reload(searchParams = {}) {
        request({
            url: '/user/userAccountInfo/getTotal',
            method: 'GET'
        })
            .then((res) => {
                if (res.data.code === 200) {
                    updateStateList(res.data.data);
                }
            })
            .catch((error) => {
                console.error('获取财务总览数据失败:', error);
            });
    }

    function updateStateList(data) {
        console.log(data, 'xxxx');
        stateList.value = [
            {
                title: '账户总览',
                children: [
                    {
                        name: '累计账户余额',
                        number: data.totalMoney || 0
                    },
                    {
                        name: '待付款（待结算）',
                        number: data.unSettlementMoney || 0
                    },
                    {
                        name: '待提现金额',
                        number: data.unWithdrawMoney || 0
                    },
                    {
                        name: '提现中金额',
                        number: data.inWithdrawMoney || 0
                    },
                    {
                        name: '已提现金额',
                        number: data.withdrawMoney || 0
                    }
                ]
            },
            {
                title: '商城账户总览',
                children: [
                    {
                        name: '累计成交金额',
                        number: data.mallTotalMoney || 0
                    },
                    {
                        name: '已支付未发货金额',
                        number: data.mallPaidUnShippedMoney || 0
                    },
                    {
                        name: '已发货未收款金额',
                        number: data.mallShippedUnCollectedMoney || 0
                    },
                    {
                        name: '已收款金额',
                        number: data.mallCollectedMoney || 0
                    },
                    {
                        name: '退款金额',
                        number: data.mallRefundMoney || 0
                    }
                ]
            },
            {
                title: '佣金总览',
                children: [
                    {
                        name: '累计佣金',
                        number: data.inviteTotalMoney || 0
                    },
                    {
                        name: '待结算佣金',
                        number: data.inviteUnSettlementMoney || 0
                    },
                    {
                        name: '已结算佣金',
                        number: data.inviteSettlementMoney || 0
                    },
                    {
                        name: '已到账佣金',
                        number: data.inviteArrivedMoney || 0
                    },
                    {
                        name: '已失效佣金',
                        number: data.inviteInvalidMoney || 0
                    }
                ]
            },
            {
                title: '书款总览',
                children: [
                    {
                        name: '累计书款',
                        number: data.recycleTotalMoney || 0
                    },
                    {
                        name: '待结算书款',
                        number: data.recycleUnSettlementMoney || 0
                    },
                    {
                        name: '已结算书款',
                        number: data.recycleSettlementMoney || 0
                    }
                ]
            }
        ];
    }

    const stateList = ref([
        {
            title: '账户总览',
            children: [
                {
                    name: '累计账户余额',
                    number: 0
                },
                {
                    name: '待结算金额',
                    number: 0
                },
                {
                    name: '已结算金额',
                    number: 0
                },
                {
                    name: '提现中金额',
                    number: 0
                },
                {
                    name: '已提现金额',
                    number: 0
                }
            ]
        },
        {
            title: '商城账户总览',
            children: [
                {
                    name: '累计成交金额',
                    number: 0
                },
                {
                    name: '已支付未发货金额',
                    number: 0
                },
                {
                    name: '已发货未收款金额',
                    number: 0
                },
                {
                    name: '已收款金额',
                    number: 0
                },
                {
                    name: '退款金额',
                    number: 0
                }
            ]
        },
        {
            title: '佣金总览',
            children: [
                {
                    name: '累计佣金',
                    number: 0
                },
                {
                    name: '待结算佣金',
                    number: 0
                },
                {
                    name: '已结算佣金',
                    number: 0
                },
                {
                    name: '已到账佣金',
                    number: 0
                }
            ]
        },
        {
            title: '书款总览',
            children: [
                {
                    name: '累计书款',
                    number: 0
                },
                {
                    name: '待结算书款',
                    number: 0
                },
                {
                    name: '已结算书款',
                    number: 0
                }
            ]
        }
    ]);

    // 页面加载时获取数据
    onMounted(() => {
        reload();
    });
</script>
<style lang="scss">
    .state-item {
        margin-bottom: 40px;
        .state-title {
            font-size: 18px;
            font-weight: 550;
        }
    }
    .child-item {
        padding: 20px 30px;
        border-radius: 10px;
        margin-right: 20px;
        min-width: 190px;
        background-color: #f5f7fa;
        margin-top: 10px;
        .child-number {
            font-size: 36px;
        }
    }
</style>
