qc-gameDataStatistics/src/pages/gameDataStatistics/roleOperate/roleRechargeRanking/tableConfig.tsx

import ProgressTable from "@/components/ProgressTable"
import WidthEllipsis from "@/components/widthEllipsis"
import { Badge, Popconfirm, Space, Statistic } from "antd"
import React from "react"
import SendEmailDetails from "./sendEmailDetails"
import './index.less'
import SendPackDetails from "./sendPackDetails"
// import IsTrue from "./isTrue"
// import InputUpdate from "./inputUpdate"

function columns12(
    sendEmail: (data: any[]) => void,
    sendPack: (data: any[]) => void,
    handleIsTrue: (value: string, data: any, type: string) => void,
    handleSave: (data: any) => void,
    roleHandle: (data: any[]) => void,
    assignHandle: (data: any[]) => void,
    changeLog: (data: any[]) => void
) {

    let newArr: { label: string, data: any[] }[] = [
        {
            label: '角色信息',
            data: [
                { title: '游戏', dataIndex: 'role_reg_parent_game_name', label: '角色信息', align: 'center', width: 70, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '游戏区服', dataIndex: 'server_name', label: '玩家信息', align: 'center', width: 90, default: 4, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '区服ID', dataIndex: 'server_id', label: '角色信息', align: 'center', width: 70, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '角色名称', dataIndex: 'role_name', label: '角色信息', align: 'center', width: 90, default: 2, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '角色创建时间', dataIndex: 'role_create_time', label: '角色信息', align: 'center', width: 140, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '角色VIP等级', dataIndex: 'vip_level', label: '角色信息', align: 'center', width: 60, default: 3, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '角色等级', dataIndex: 'role_level', label: '角色信息', align: 'center', width: 65, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '角色攻击力', dataIndex: 'combat_num', label: '角色信息', align: 'center', width: 70, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
            ],
        },
        {
            label: '玩家信息',
            data: [
                { title: '玩家ID', dataIndex: 'user_id', label: '玩家信息', align: 'center', width: 70 },
                { title: '玩家账号', dataIndex: 'username', label: '玩家信息', align: 'center', width: 120, default: 1, render: (a: string, b: any) => (<WidthEllipsis isCopy value={a} />) },
                { title: '注册渠道', dataIndex: 'agent_name', label: '玩家信息', align: 'center', width: 80, default: 5, render: (a: string, b: any) => (<WidthEllipsis isCopy value={a} />) },
                { title: '注册渠道ID', dataIndex: 'agent_id', label: '玩家信息', align: 'center', width: 80 },
                { title: '注册时间', dataIndex: 'user_create_time', label: '玩家信息', align: 'center', width: 140, default: 6, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '注册游戏', dataIndex: 'user_reg_game_name', label: '玩家信息', align: 'center', width: 70, default: 7, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '玩家操作系统', dataIndex: 'os', label: '玩家信息', align: 'center', width: 70, default: 8 },
                // { title: '玩家等级标签', dataIndex: '13', label: '玩家信息', align: 'center', width: 70, default: 14 },
                { title: '最近充值游戏', dataIndex: 'user_last_recharge_game_name', label: '玩家信息', align: 'center', width: 70, default: 15, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '最近充值时间', dataIndex: 'user_pay_time', label: '玩家信息', align: 'center', width: 140, default: 16, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '最近活跃时间', dataIndex: 'user_active_time', label: '玩家信息', align: 'center', width: 140, default: 17, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                {
                    title: '注册充值时间差',
                    dataIndex: 'regPayTimeDiff',
                    align: 'center',
                    width: 140,
                    default: 18,
                    render: (a: string, b: any) => {
                        let diff = new Date(b.user_pay_time).getTime() - new Date(b.user_create_time).getTime()
                        function secondsToDhms(seconds: any) {
                            const days = Math.floor(seconds / (3600 * 24));
                            const hours = Math.floor((seconds % (3600 * 24)) / 3600);
                            const minutes = Math.floor((seconds % 3600) / 60);
                            const remainingSeconds = seconds % 60;
                            return `${days ? days + "天" : ''}${hours ? hours + "小时" : ''}${minutes ? minutes + "分" : ''}${remainingSeconds ? remainingSeconds + "秒" : ''}`
                        }
                        return diff ? <WidthEllipsis value={secondsToDhms(diff / 1000)} /> : '--'
                    }
                },
                {
                    title: '最近充值时间距今',
                    dataIndex: 'nowPayTimeDiff',
                    align: 'center',
                    width: 130,
                    default: 19,
                    render: (a: string, b: any) => {
                        let diff = new Date().getTime() - new Date(b.user_pay_time).getTime()
                        function secondsToDhms(seconds: any) {
                            const days = Math.floor(seconds / (3600 * 24));
                            const hours = Math.floor((seconds % (3600 * 24)) / 3600);
                            const minutes = Math.floor((seconds % 3600) / 60);
                            const remainingSeconds = seconds % 60;
                            return `${days ? days + "天" : ''}${hours ? hours + "小时" : ''}${minutes ? minutes + "分" : ''}${remainingSeconds ? remainingSeconds.toFixed(0) + "秒" : ''}`
                        }
                        return diff ? <span style={Math.floor((diff / 1000) / (3600 * 24)) > 1 ? { color: 'red' } : {}}><WidthEllipsis value={secondsToDhms(diff / 1000)} /></span> : '--'
                    }
                },
            ]
        },
        {
            label: '角色充值信息',
            data: [
                {
                    title: '当天充值金额', dataIndex: 'today_amount', label: '角色充值信息', align: 'center', width: 70, default: 9, sorter: true,
                    className: 'progress',
                    render: (a: number) => {
                        return <ProgressTable
                            strokeColor={{
                                from: '#108ee9',
                                to: '#87d068',
                            }}
                            percent={a ? a / 2000 * 100 : 0}
                            value={a || 0}
                            valueStyle={a >= 1000 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }}
                        />
                    },
                },
                { title: '首充金额', dataIndex: 'role_first_amount', label: '角色充值信息', align: 'center', width: 70, default: 10, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '最近充值金额', dataIndex: 'role_last_amount', label: '角色充值信息', align: 'center', width: 70, default: 11, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                {
                    title: '累计充值金额', dataIndex: 'amount', label: '角色充值信息', align: 'center', width: 100, default: 12, sorter: true, className: 'progress',
                    render: (a: number) => {
                        return <ProgressTable
                            strokeColor={{
                                from: '#ff5900',
                                to: '#ffd380',
                            }}
                            percent={a ? a / 10000 * 100 : 0}
                            value={a || 0}
                            valueStyle={a >= 5000 ? { color: '#000', fontWeight: 500 } : { fontWeight: 500 }}
                        />
                    },
                },
                { title: '平均单价', dataIndex: 'avg_amount', label: '角色充值信息', align: 'center', width: 70, default: 13, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
                { title: '累计充值次数', dataIndex: 'amount_count', label: '角色充值信息', align: 'center', width: 70, default: 14, sorter: true, render: (a: string) => <Statistic value={a || 0} /> },
            ],
        },
        {
            label: '客户运营操作',
            data: [
                {
                    title: '邮件是否发送', dataIndex: 'is_send_mail', label: '客户运营操作', width: 130, align: 'center',
                    render: (a: any, b: any) => {
                        return <Space>
                            {a ? <Badge className="badge" status="success" text="已发送" /> : <Badge className="badge" status="warning" text="未发送" />}
                            <a style={{ fontSize: 12 }} onClick={() => sendEmail([b])}>发送</a>
                            <SendEmailDetails data={b} />
                        </Space>
                    },
                },
                {
                    title: '最新发送礼包', dataIndex: 'send_gift_id', label: '客户运营操作', align: 'center', width: 138,
                    render: (a: any, b: any) => {
                        return <Space>
                            <div style={{ width: 50, textAlign: 'left' }}><WidthEllipsis value={b?.gift_name} /></div>
                            <a style={{ fontSize: 12 }} onClick={() => sendPack([b])}>发送</a>
                            <SendPackDetails data={b} />
                        </Space>
                    },
                },
                {
                    title: '是否转端', dataIndex: 'is_change_game_type', label: '客户运营操作', align: 'center', width: 60,
                    render: (a: any, b: any) => {
                        // return <IsTrue value={a ? '1' : '0'} onChange={(value) => handleIsTrue(value, b, 'isChangeGameType')} />
                        return a ? '是' : '否'
                    },
                },
                {
                    title: '是否添加企微', dataIndex: 'is_add_corp_wechat', label: '客户运营操作', align: 'center', width: 60,
                    render: (a: any, b: any) => {
                        // return <IsTrue value={a ? '1' : '0'} onChange={(value) => handleIsTrue(value, b, 'isAddCorpWechat')} />
                        return a ? '是' : '否'
                    },
                },
                {
                    title: '企微号', dataIndex: 'add_corp_user_id', label: '客户运营操作', align: 'center', width: 80, className: 'padding0',
                    render: (a: any, b: any) => {
                        // return <InputUpdate title={a || ''} dataIndex={'add_corp_user_id'} record={b} handleSave={handleSave} />
                        return <WidthEllipsis value={a} />
                    },
                },
                {
                    title: '客户微信号', dataIndex: 'user_wechat', label: '客户运营操作', align: 'center', width: 80,
                    render: (a: any, b: any) => {
                        // return <InputUpdate title={a || ''} dataIndex={'user_wechat'} record={b} handleSave={handleSave} />
                        return <WidthEllipsis value={a} />
                    },
                },
                {
                    title: '客户手机号', dataIndex: 'user_phone', label: '客户运营操作', align: 'center', width: 80,
                    render: (a: any, b: any) => {
                        // return <InputUpdate title={a || ''} dataIndex={'user_phone'} record={b} handleSave={handleSave} />
                        return <WidthEllipsis value={a} />
                    },
                },
                {
                    title: '是否退游', dataIndex: 'is_remove_game', label: '客户运营操作', align: 'center', width: 50,
                    render: (a: any, b: any) => {
                        // return <IsTrue value={a ? '1' : '0'} onChange={(value) => handleIsTrue(value, b, 'isRemoveGame')} />
                        return a ? '是' : '否'
                    },
                },
                {
                    title: '是否唤醒', dataIndex: 'is_wake_up', label: '客户运营操作', align: 'center', width: 50,
                    render: (a: any, b: any) => {
                        // return <IsTrue value={a ? '1' : '0'} onChange={(value) => handleIsTrue(value, b, 'isWakeUp')} />
                        return a ? '是' : '否'
                    },
                },
                {
                    title: '备注', dataIndex: 'remark', label: '客户运营操作', align: 'center', width: 80,
                    render: (a: any, b: any) => {
                        // return <InputUpdate title={a || ''} dataIndex={'remark'} record={b} handleSave={handleSave} />
                        return <WidthEllipsis value={a} />
                    },
                },
                // {
                //     title: '角色操作',
                //     dataIndex: 'rolecz',
                //     label: '客户运营操作',
                //     align: 'center',
                //     width: 80,
                //     render: (a: any, b: any) => {
                //         return <a onClick={() => { roleHandle([b]) }}>角色操作</a>
                //     }
                // }
            ]
        },
        {
            label: '客户管理操作',
            data: [
                { title: 'GS', dataIndex: 'gs_name', label: '客户管理操作', align: 'center', width: 80, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '客服', dataIndex: 'customer_service_name', label: '客户管理操作', align: 'center', width: 80, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '运营', dataIndex: 'oper_user_name', label: '客户管理操作', align: 'center', width: 80, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '投手', dataIndex: 'put_user_name', label: '客户管理操作', align: 'center', width: 80, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '创建者', dataIndex: 'create_by', label: '客户管理操作', align: 'center', width: 80, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '更新者', dataIndex: 'update_by', label: '客户管理操作', align: 'center', width: 80, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '创建时间', dataIndex: 'create_time', label: '客户管理操作', align: 'center', width: 140, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '更新时间', dataIndex: 'update_time', label: '客户管理操作', align: 'center', width: 140, render: (a: string, b: any) => (<WidthEllipsis value={a} />) },
                { title: '是否删除', dataIndex: 'is_delete', label: '客户管理操作', align: 'center', width: 70, render: (a: string, b: any) => (<WidthEllipsis value={a ? '删除' : '‘正常'} />) },
                // {
                //     title: '指派',
                //     dataIndex: 'zp',
                //     label: '客户管理操作',
                //     align: 'center',
                //     width: 110,
                //     render: (a: any, b: any) => {
                //         return <Space>
                //             <a onClick={() => { assignHandle([b]) }}>指派</a>
                //             <a onClick={() => { changeLog([b]) }}>变更记录</a>
                //         </Space>
                //     }
                // }
            ]
        },
        {
            label: '操作',
            data: [
                {
                    title: '操作',
                    dataIndex: 'cz',
                    label: '操作',
                    align: 'center',
                    width: 180,
                    default: 20,
                    render: (a: any, b: any) => {
                        return <Space>
                            <a onClick={() => { roleHandle([b]) }}>角色操作</a>
                            <a onClick={() => { assignHandle([b]) }}>指派</a>
                            <a onClick={() => { changeLog([b]) }}>变更记录</a>
                        </Space>
                    }
                }
            ]
        }
    ]

    return newArr
}

export const columnsSendEmailLog = (update: (data: any) => void, del: (id: number[]) => void): any[] => {

    return [
        {
            title: '发送时间',
            dataIndex: 'sendTime',
            key: 'sendTime',
            width: 145,
            ellipsis: true,
            fixed: 'left'
        },
        {
            title: '操作人',
            dataIndex: 'createName',
            key: 'createName',
            width: 60,
            ellipsis: true
        },
        {
            title: '更新人',
            dataIndex: 'updateName',
            key: 'updateName',
            width: 60,
            ellipsis: true
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 145,
            ellipsis: true
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            width: 145,
            ellipsis: true
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            width: 70,
            fixed: 'right',
            render: (a: any, b: any) => {
                return <Space>
                    <a style={{ fontSize: 12 }} onClick={() => update([b])}>更新</a>
                    <Popconfirm
                        title="确定删除?"
                        onConfirm={() => del([b.id])}
                    >
                        <a style={{ color: 'red', fontSize: 12 }}>删除</a>
                    </Popconfirm>
                </Space>
            }
        },
    ]
};


export const columnsSendPackLog = (update: (data: any) => void, del: (id: number[]) => void): any[] => {

    return [
        {
            title: '礼包',
            dataIndex: 'giftName',
            key: 'giftName',
            width: 100,
            ellipsis: true,
            fixed: 'left'
        },
        {
            title: '发送时间',
            dataIndex: 'sendTime',
            key: 'sendTime',
            width: 145,
            ellipsis: true
        },
        {
            title: '操作人',
            dataIndex: 'createName',
            key: 'createName',
            width: 60,
            ellipsis: true
        },
        {
            title: '更新人',
            dataIndex: 'updateName',
            key: 'updateName',
            width: 60,
            ellipsis: true
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 145,
            ellipsis: true
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            width: 145,
            ellipsis: true
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            width: 70,
            fixed: 'right',
            render: (a: any, b: any) => {
                return <Space>
                    <a style={{ fontSize: 12 }} onClick={() => update([b])}>更新</a>
                    <Popconfirm
                        title="确定删除?"
                        onConfirm={() => del([b.id])}
                    >
                        <a style={{ color: 'red', fontSize: 12 }}>删除</a>
                    </Popconfirm>
                </Space>
            }
        },
    ]
};


/**
 * 变更记录
 * @param update 
 * @param del 
 * @returns 
 */
export const columnsChangeLog = (update: (data: any) => void, del: (id: number[]) => void): any[] => {

    return [
        {
            title: '开始时间',
            dataIndex: 'startTime',
            key: 'startTime',
            width: 145,
            ellipsis: true
        },
        {
            title: '结束时间',
            dataIndex: 'endTime',
            key: 'endTime',
            width: 145,
            ellipsis: true
        },
        {
            title: '游戏名称',
            dataIndex: 'gameName',
            key: 'gameName',
            width: 100,
            ellipsis: true,
            fixed: 'left'
        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
            key: 'roleName',
            width: 100,
            ellipsis: true,
            fixed: 'left'
        },
        {
            title: '区服名称',
            dataIndex: 'serverName',
            key: 'serverName',
            width: 100,
            ellipsis: true,
            fixed: 'left'
        },
        {
            title: '客服',
            dataIndex: 'customerServiceName',
            key: 'customerServiceName',
            width: 100,
            ellipsis: true
        },
        {
            title: '运营',
            dataIndex: 'operUserName',
            key: 'operUserName',
            width: 100,
            ellipsis: true
        },
        {
            title: '运营',
            dataIndex: 'gsName',
            key: 'gsName',
            width: 100,
            ellipsis: true
        },
        
        {
            title: '创建人',
            dataIndex: 'createName',
            key: 'createName',
            width: 60,
            ellipsis: true
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 145,
            ellipsis: true
        },
        {
            title: '更新人',
            dataIndex: 'updateName',
            key: 'updateName',
            width: 60,
            ellipsis: true
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            width: 145,
            ellipsis: true
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: 200,
            ellipsis: true
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            width: 70,
            fixed: 'right',
            render: (a: any, b: any) => {
                return <Space>
                    <a style={{ fontSize: 12 }} onClick={() => update(b)}>修改</a>
                    <Popconfirm
                        title="确定删除?"
                        onConfirm={() => del([b.id])}
                    >
                        <a style={{ color: 'red', fontSize: 12 }}>删除</a>
                    </Popconfirm>
                </Space>
            }
        },
    ]
};

export default columns12