qc-gameDataStatistics/src/pages/gameDataStatistics/extensionData/everyday/tableConfig.tsx

import { Statistic } from "antd"
import React from "react"
import style from './index.less'
import { gameClassifyEnum } from "@/components/QueryForm/const"
import { version } from "../../components/TableData"
import moment from 'moment';

function columns12(rechargeTrendHandle: (data: any) => void): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {

    let defaultValue = [  // 默认展示字段
        { label: '充值人数', key: 'rechargeCount', type: '付费趋势' },
        { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
        { label: '增', key: 'addPayBack', type: '付费趋势' },
        { label: '回', key: 'payBack', type: '付费趋势' },
        { label: '倍', key: 'newUserRechargeRate', type: '付费趋势' },
    ]
    const getFieldDta = () => {
        let mySelectFieldData = localStorage.getItem(`myAdFieldConfig${version}_推广每日数据`)
        let newSelectFieldData: any = {}
        if (mySelectFieldData) {
            newSelectFieldData = JSON.parse(mySelectFieldData).date_field
        } else {
            newSelectFieldData = defaultValue
        }
        return newSelectFieldData
    }

    // 总付费趋势
    let defaultStart = 20
    const zC = Array(29).fill('').map((_item: string, index: number) => {
        let field = `rechargeTrendDay${index + 1}`
        let data = {
            title: `D${index + 1}`,
            dataIndex: `D${index + 1}`,
            label: "时间区间跨度",
            width: 110,
            render: (a: any, b: any) => {
                let date1 = moment()
                if (b?.dt === '总计') {
                    if (b?.beginDay) {
                        date1 = moment(b.beginDay)
                    } else {
                        date1 = moment()
                    }
                } else {
                    date1 = moment(b.dt)
                }
                let dt = moment()
                let day = dt.diff(date1, 'day');
                let fieldData = getFieldDta()
                if (fieldData?.length > 0 && index <= day) {
                    let data: any = {}
                    let keyS: string[] = fieldData?.map((item: any) => item.key)
                    switch (fieldData[0].type) {
                        case '付费趋势':
                            if (b?.[field]) {
                                data = b?.[field]
                                return <div className={style.dbox}>
                                    {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
                                    {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
                                    {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
                                    {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
                                    {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
                                </div>
                            }
                            return '--'
                    }
                }
                return '--'
            },
        }

        if (index < 9) {
            data['default'] = defaultStart + index
        }
        return data
    })

    let index = 1;
    const roiC = Array(29).fill('').map((_item: string) => {
        let data = {
            title: `${index + 1}日ROI`,
            dataIndex: `roiDay${index + 1}`,
            label: '付费数据',
            align: 'center',
            width: 70,
            sorter: true,
            render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
        }
        index++;
        return data
    })


    return [
        {
            label: '时间',
            data: [
                { title: '日期', dataIndex: 'dt', label: '时间', align: 'center', width: 90, default: 1 },
            ]
        },
        {
            label: '推广账号信息',
            data: [
                {
                    title: '推广账号', dataIndex: 'accountId', key: 'accountId', label: '推广账号信息', align: 'center', width: 70, default: 2,
                    render: (a: any) => (<span>{a || '--'}</span>)
                },
                {
                    title: '投放渠道', dataIndex: 'agentName', key: 'agentName', label: '推广账号信息', align: 'center', width: 130, default: 3,
                    render: (a: string, b: any) => (<span>{a || '--'}</span>)
                }
            ]
        },
        {
            label: '业务人员信息',
            data: [
                { title: '投手', dataIndex: 'sysUserName', key: 'sysUserName', label: '业务人员信息', align: 'center', width: 70, default: 4, render: (a: any) => (<span>{a || '--'}</span>) }
            ]
        },
        {
            label: '推广内容信息',
            data: [
                { title: '推广游戏CP名称', dataIndex: 'cpName', key: 'cpName', label: '推广内容信息', align: 'center', width: 70, default: 5, render: (a: any) => (<span>{a || '--'}</span>) },
                { title: '推广游戏名称', dataIndex: 'gameName', key: 'gameName', label: '推广内容信息', align: 'center', width: 70, default: 6, render: (a: any) => (<span>{a || '--'}</span>) },
                {
                    title: '推广游戏应用类型', dataIndex: 'gameType', key: 'gameType', label: '推广内容信息', align: 'center', width: 80, default: 7,
                    render: (a: string) => (<span>{gameClassifyEnum[a]}</span>)
                },
            ]
        },
        {
            label: '消耗',
            data: [
                { title: '消耗', dataIndex: 'cost', key: 'cost', label: '消耗', align: 'center', width: 100, default: 8, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '推广计划数量', dataIndex: 'adPlanCount', key: 'adPlanCount', label: '消耗', align: 'center', width: 70, default: 9, sorter: true, render: (a: any) => (<span>{a || '--'}</span>) }
            ]
        },
        {
            label: '广告曝光数据',
            data: [
                { title: '曝光量', dataIndex: 'viewCount', label: '广告曝光数据', align: 'center', width: 90, default: 10, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '点击量', dataIndex: 'clickCount', label: '广告曝光数据', align: 'center', width: 80, default: 11, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '转化量', dataIndex: 'convertCount', label: '广告曝光数据', align: 'center', width: 80, default: 12, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                {
                    title: '转化率', dataIndex: 'convertRate', label: '广告曝光数据', align: 'center', width: 70, default: 13, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                { title: '平均转化成本', dataIndex: 'avgConvertCost', label: '广告曝光数据', align: 'center', width: 70, default: 14, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                { title: '深度转化量', dataIndex: 'deepConvertCount', label: '广告曝光数据', align: 'center', width: 70, default: 15, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '深度转化成本', dataIndex: 'deepConvertCost', label: '广告曝光数据', align: 'center', width: 70, default: 16, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                {
                    title: '深度转化率', dataIndex: 'deepConvertRate', label: '广告曝光数据', align: 'center', width: 70, default: 17, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                { title: '千次曝光成本', dataIndex: 'thousandViewCost', label: '广告曝光数据', align: 'center', width: 70, default: 18, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '平均点击均价', dataIndex: 'avgClickCost', label: '广告曝光数据', align: 'center', width: 70, default: 19, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '应用下载开始量', dataIndex: 'appDownloadCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '应用下载开始成本', dataIndex: 'appDownloadCost', label: '广告曝光数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                {
                    title: '应用下载开始率', dataIndex: 'appDownloadRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                { title: '应用下载完成量', dataIndex: 'downloadFinish', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '应用下载完成成本', dataIndex: 'downloadFinishCost', label: '广告曝光数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                {
                    title: '应用下载完成率', dataIndex: 'downloadFinishRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                { title: '应用安装量', dataIndex: 'appInstallCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '应用安装成本', dataIndex: 'appInstallCost', label: '广告曝光数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                {
                    title: '应用安装完成率', dataIndex: 'appInstallRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                { title: '应用激活量', dataIndex: 'appActiveCount', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '应用激活成本', dataIndex: 'appActiveCost', label: '广告曝光数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                {
                    title: '应用激活率', dataIndex: 'appActiveRate', label: '广告曝光数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
            ]
        },
        {
            label: '用户数据',
            data: [
                { title: '注册成本', dataIndex: 'regCost', label: '用户数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                { title: '注册人数', dataIndex: 'regUserCount', label: '用户数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
            ]
        },
        {
            label: '付费数据',
            data: [
                { title: '首日新用户充值次数', dataIndex: 'firstUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '首日新用户充值人数', dataIndex: 'firstUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '首日新用户充值金额', dataIndex: 'firstUserRechargeMoney', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '老用户充值次数', dataIndex: 'oldUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '老用户充值人数', dataIndex: 'oldUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '老用户充值金额', dataIndex: 'oldUserRechargeMoney', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '账面充值次数', dataIndex: 'showRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '账面充值人数', dataIndex: 'showRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '账面充值金额', dataIndex: 'showRechargeMoney', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '新用户累计充值次数', dataIndex: 'newUserRechargeCount', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '新用户累计充值人数', dataIndex: 'newUserRechargeUser', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '新用户累计充值金额', dataIndex: 'newUserRechargeMoney', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                {
                    title: '首日回收率', dataIndex: 'firstRecoveryRate', label: '付费数据', align: 'center', width: 95, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '至今回收率', tips: '至今回收率=新用户累计充值金额/实际消耗', dataIndex: 'buyRecoveryRate', label: '付费数据', align: 'center', width: 80, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                { title: '毛利额', dataIndex: 'grossMargin', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                ...roiC,
                {
                    title: '60日ROI', dataIndex: 'roiDay60', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '90日ROI', dataIndex: 'roiDay90', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '180日ROI', dataIndex: 'roiDay180', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '1年ROI', dataIndex: 'roiYear1', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '总ROI', dataIndex: 'roiTotal', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '首日付费率', dataIndex: 'firstRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '买量用户付费率', dataIndex: 'buyUserRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                { title: '新用户付费比', dataIndex: 'newUserRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '首日客单价', dataIndex: 'avgFirstUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '买量客单价', dataIndex: 'avgBuyUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '账面客单价', dataIndex: 'avgShowUserRecharge', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '首日充值成本', dataIndex: 'firstRechargeCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                { title: '买量充值成本', dataIndex: 'buyUserRechargeCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                { title: '首日充值次数成本', dataIndex: 'firstRechargeCountCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                { title: '老用户充值次数成本', dataIndex: 'oldUserRechargeCountCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                { title: '账面充值次数成本', dataIndex: 'showRechargeCountCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                { title: '新用户累计充值次数成本', dataIndex: 'newUserRechargeCountCost', label: '付费数据', align: 'center', width: 80, sorter: true, render: (a: string) => <Statistic value={a || 0} precision={2} /> },
                {
                    title: '复充率', dataIndex: 'repeatRechargeRate', label: '付费数据', align: 'center', width: 70, sorter: true,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                { title: '新增注册ARPPU', dataIndex: 'newRegArpu', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '首日付费ARPPU', dataIndex: 'firstRechargeArpu', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '至今付费ARPPU', tips: '至今付费ARPPU=新用户累计充值金额/新用户累计充值人数', dataIndex: 'todayRechargeArpu', label: '付费数据', align: 'center', width: 90, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '账面ARPPU', dataIndex: 'showRechargeArpu', label: '付费数据', align: 'center', width: 70, sorter: true, render: (a: string) => <Statistic value={a || 0} /> }
            ]
        },
        {
            fieldSHow: {
                label: '日期区间字段展示',
                saveField: 'date_field',
                defaultValue,
                data: [
                    {
                        label: '付费趋势',
                        data: [
                            { label: '充值人数', key: 'rechargeCount', type: '付费趋势' },
                            { label: '充值金额', key: 'rechargeMoney', type: '付费趋势' },
                            { label: '增', key: 'addPayBack', type: '付费趋势' },
                            { label: '回', key: 'payBack', type: '付费趋势' },
                            { label: '倍', key: 'newUserRechargeRate', type: '付费趋势' },
                        ]
                    },
                ]
            },
            label: '时间区间跨度',
            data: [
                ...zC,
                {
                    title: "D30",
                    dataIndex: "D30",
                    label: "时间区间跨度",
                    width: 110,
                    render: (a: any, b: any) => {
                        let date1 = moment()
                        if (b?.dt === '总计') {
                            if (b?.beginDay) {
                                date1 = moment(b.beginDay)
                            } else {
                                date1 = moment()
                            }
                        } else {
                            date1 = moment(b.dt)
                        }
                        let dt = moment()
                        let day = dt.diff(date1, 'day');
                        let fieldData = getFieldDta()
                        if (fieldData?.length > 0 && 30 <= day) {
                            let data: any = {}
                            let keyS: string[] = fieldData?.map((item: any) => item.key)
                            switch (fieldData[0].type) {
                                case '付费趋势':
                                    if (b?.rechargeTrendMonth1) {
                                        data = b?.rechargeTrendMonth1
                                        return <div className={style.dbox}>
                                            {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
                                            {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
                                            {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
                                        </div>
                                    }
                                    return '--'
                            }
                        }
                        return '--'
                    },
                }, {
                    title: "M2",
                    dataIndex: "M2",
                    label: "时间区间跨度",
                    width: 110,
                    render: (a: any, b: any) => {
                        let date1 = moment()
                        if (b?.dt === '总计') {
                            if (b?.beginDay) {
                                date1 = moment(b.beginDay)
                            } else {
                                date1 = moment()
                            }
                        } else {
                            date1 = moment(b.dt)
                        }
                        let dt = moment()
                        let day = dt.diff(date1, 'day');
                        let fieldData = getFieldDta()
                        if (fieldData?.length > 0 && 60 <= day) {
                            let data: any = {}
                            let keyS: string[] = fieldData?.map((item: any) => item.key)
                            switch (fieldData[0].type) {
                                case '付费趋势':
                                    if (b?.rechargeTrendMonth2) {
                                        data = b?.rechargeTrendMonth2
                                        return <div className={style.dbox}>
                                            {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
                                            {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
                                            {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
                                        </div>
                                    }
                                    return '--'
                            }
                        }
                        return '--'
                    },
                }, {
                    title: "M3",
                    dataIndex: "M3",
                    label: "时间区间跨度",
                    width: 110,
                    render: (a: any, b: any) => {
                        let date1 = moment()
                        if (b?.dt === '总计') {
                            if (b?.beginDay) {
                                date1 = moment(b.beginDay)
                            } else {
                                date1 = moment()
                            }
                        } else {
                            date1 = moment(b.dt)
                        }
                        let dt = moment()
                        let day = dt.diff(date1, 'day');
                        let fieldData = getFieldDta()
                        if (fieldData?.length > 0 && 90 <= day) {
                            let data: any = {}
                            let keyS: string[] = fieldData?.map((item: any) => item.key)
                            switch (fieldData[0].type) {
                                case '付费趋势':
                                    if (b?.rechargeTrendMonth3) {
                                        data = b?.rechargeTrendMonth3
                                        return <div className={style.dbox}>
                                            {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
                                            {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
                                            {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
                                        </div>
                                    }
                                    return '--'
                            }
                        }
                        return '--'
                    },
                }, {
                    title: "M6",
                    dataIndex: "M6",
                    label: "时间区间跨度",
                    width: 110,
                    render: (a: any, b: any) => {
                        let date1 = moment()
                        if (b?.dt === '总计') {
                            if (b?.beginDay) {
                                date1 = moment(b.beginDay)
                            } else {
                                date1 = moment()
                            }
                        } else {
                            date1 = moment(b.dt)
                        }
                        let dt = moment()
                        let day = dt.diff(date1, 'day');
                        let fieldData = getFieldDta()
                        if (fieldData?.length > 0 && 180 <= day) {
                            let data: any = {}
                            let keyS: string[] = fieldData?.map((item: any) => item.key)
                            switch (fieldData[0].type) {
                                case '付费趋势':
                                    if (b?.rechargeTrendMonth6) {
                                        data = b?.rechargeTrendMonth6
                                        return <div className={style.dbox}>
                                            {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
                                            {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
                                            {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
                                        </div>
                                    }
                                    return '--'
                            }
                        }
                        return '--'
                    },
                }, {
                    title: "1年",
                    dataIndex: "Y1",
                    label: "时间区间跨度",
                    width: 110,
                    render: (a: any, b: any) => {
                        let date1 = moment()
                        if (b?.dt === '总计') {
                            if (b?.beginDay) {
                                date1 = moment(b.beginDay)
                            } else {
                                date1 = moment()
                            }
                        } else {
                            date1 = moment(b.dt)
                        }
                        let dt = moment()
                        let day = dt.diff(date1, 'day');
                        let fieldData = getFieldDta()
                        if (fieldData?.length > 0 && 365 <= day) {
                            let data: any = {}
                            let keyS: string[] = fieldData?.map((item: any) => item.key)
                            switch (fieldData[0].type) {
                                case '付费趋势':
                                    if (b?.rechargeTrendYear1) {
                                        data = b?.rechargeTrendYear1
                                        return <div className={style.dbox}>
                                            {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
                                            {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
                                            {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
                                        </div>
                                    }
                                    return '--'
                            }
                        }
                        return '--'
                    },
                }, {
                    title: "总",
                    default: 29,
                    dataIndex: "total",
                    label: "时间区间跨度",
                    align: "center",
                    width: 110,
                    render: (a: any, b: any) => {
                        let fieldData = getFieldDta()
                        if (fieldData?.length > 0) {
                            let data: any = {}
                            let keyS: string[] = fieldData?.map((item: any) => item.key)
                            switch (fieldData[0].type) {
                                case '付费趋势':
                                    if (b?.rechargeTrendTotal) {
                                        data = b?.rechargeTrendTotal
                                        return <div className={style.dbox}>
                                            {keyS?.includes('rechargeCount') && <span style={{ color: '#d81b60', fontWeight: 600 }}>充人：<span>{data?.rechargeUserCount}</span></span>}
                                            {keyS?.includes('rechargeMoney') && <span style={{ color: '#0f538a', fontWeight: 600 }}>充金：<span><Statistic value={data?.rechargeMoney || 0} valueStyle={{ color: '#0f538a', fontWeight: 600 }} /></span></span>}
                                            {keyS?.includes('addPayBack') && <span style={{ color: 'rgb(12,130,16)', fontWeight: 600 }}>增：<span>{(data?.increase * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#ff5722', fontWeight: 600 }}>回：<span>{(data?.back * 100)?.toFixed(2)}%</span></span>}
                                            {keyS?.includes('payBack') && <span style={{ color: '#d81b60', fontWeight: 600 }}>倍：<span>{data?.multiples?.toFixed(2)}</span></span>}
                                        </div>
                                    }
                                    return '--'
                            }
                        }
                        return '--'
                    },
                }]
        },
        {
            label: '操作',
            data: [
                {
                    default: 30,
                    title: '操作', dataIndex: 'cz', label: '操作', align: 'center', width: 70, render: (a: string, b: any) => {
                        if (b?.dt === '总计') {
                            return <span>--</span>
                        }
                        return <a onClick={() => rechargeTrendHandle(b)}>复充趋势</a>
                    }
                },
            ]
        },
    ]
}

export default columns12