<template>
    <ele-page flex-table>
        <ele-card flex-table>
            <div class="flex justify-between items-start mb-10">
                <div
                    class="flex items-start justify-around"
                    style="width: 600px"
                >
                    <el-statistic
                        title="今日新增"
                        :value="562"
                        value-style="font-size:24px"
                    >
                        <template #suffix>
                            <el-icon
                                style="vertical-align: -0.125em"
                                color="#52c41a"
                            >
                                <Top />
                            </el-icon>
                            <el-text type="success" size="small">15%</el-text>
                        </template>
                    </el-statistic>
                    <el-statistic
                        title="昨日新增"
                        :value="562"
                        value-style="font-size:24px"
                    >
                        <template #suffix>
                            <el-icon
                                style="vertical-align: -0.125em"
                                color="#ff4d4f"
                            >
                                <Bottom />
                            </el-icon>
                            <el-text type="danger" size="small">25%</el-text>
                        </template>
                    </el-statistic>
                    <el-statistic
                        title="7日新增"
                        :value="562"
                        value-style="font-size:24px"
                    >
                        <template #suffix>
                            <el-icon
                                style="vertical-align: -0.125em"
                                color="#ff4d4f"
                            >
                                <Bottom />
                            </el-icon>
                            <el-text type="danger" size="small">25%</el-text>
                        </template>
                    </el-statistic>
                    <el-statistic
                        title="30日新增"
                        :value="562"
                        value-style="font-size:24px"
                    >
                        <template #suffix>
                            <el-icon
                                style="vertical-align: -0.125em"
                                color="#ff4d4f"
                            >
                                <Bottom />
                            </el-icon>
                            <el-text type="danger" size="small">25%</el-text>
                        </template>
                    </el-statistic>
                </div>
                <date-search />
            </div>

            <div class="common-card mb-10">
                <div class="common-title">用户数据</div>
                <user-data-line />
            </div>
            <div class="common-card flex gap-6">
                <div class="flex-1 gray-card">
                    <div class="common-title"
                        >今日对比昨日| 分时新增新用户数量</div
                    >
                    <user-add-compare />
                </div>
                <div class="flex-1 gray-card">
                    <div class="common-title"
                        >今日对比昨日| 分时活跃新用户数量</div
                    >
                    <user-active-compare />
                </div>
            </div>
        </ele-card>
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { Bottom, Top } from '@element-plus/icons-vue';
    import dateSearch from '@/components/DateSearch/index.vue';
    import pageSearch from '@/views/finance/withdrawal/components/page-search.vue';
    import { useDictData } from '@/utils/use-dict-data';
    import userDataLine from '@/views/customer/stat/components/user-data-line.vue';
    import userActiveCompare from '@/views/customer/stat/components/user-active-compare.vue';
    import userAddCompare from '@/views/customer/stat/components/user-add-compare.vue';

    defineOptions({ name: 'Withdrawal' });
    const [useStatusDicts] = useDictData(['use_status']);

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

    /** 表格列配置 */
    const columns = ref([
        { label: '交易时间', prop: 'createTime', align: 'center', width: 180 },
        { label: '用户UID', prop: 'uid', align: 'center', minWidth: 140 },
        {
            label: '支付单号/流水号',
            prop: 'paymentCode',
            align: 'center',
            minWidth: 160
        },
        { label: '对方账户', prop: 'addressDetail', align: 'center' },
        { label: '结算金额', prop: 'money', align: 'center' },
        {
            label: '交易状态',
            prop: 'useStatus',
            align: 'center',
            formatter: (row) =>
                useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
                    ?.dictLabel
        },
        {
            label: '交易类型',
            prop: 'paymentType',
            align: 'center',
            formatter: (row) =>
                useStatusDicts.value.find((d) => d.dictValue == row.useStatus)
                    ?.dictLabel
        },
        { label: '订单编号', prop: 'code', align: 'center' }
    ]);

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

    const pageConfig = reactive({
        pageUrl: '/baseinfo/godown/pagelist',
        exportUrl: '/baseinfo/godown/export',
        fileName: '佣金记录',
        cacheKey: 'commissionTable'
    });

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

<style lang="scss">
    .gray-card {
        border-radius: 10px;
        padding: 20px;
        box-sizing: border-box;
        background: #f9f8f7;
    }
</style>
