qc-gameDataStatistics/src/pages/gameDataStatistics/gameData/h5Recharge/h5NatureUser.tsx

import WidthEllipsis from "@/components/widthEllipsis"
import { Button, Modal, Statistic, Table } from "antd"
import { ColumnsType } from "antd/lib/table"
import React, { useState } from "react"


const columns: ColumnsType<any> = [
    {
        title: '游戏名称', dataIndex: `natureGameName`, align: 'center', width: 85,
        render: (a: string, b: any) => {
            return <WidthEllipsis isCopy value={a} />
        }
    },
    {
        title: '游戏ID', dataIndex: `natureGameId`, align: 'center', width: 85,
        render: (a: string, b: any) => {
            return <WidthEllipsis value={a} />
        }
    },
    {
        title: '游戏应用类型', dataIndex: `natureClassify`, align: 'center', width: 100,
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '新用户充值金额', dataIndex: `newUserRechargeMoney`, align: 'center', width: 105,
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '新用户充值人数', dataIndex: `newUserRechargeNum`, align: 'center', width: 105,
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '累计充值金额', dataIndex: `h5LeadNatureNewUserTotalAmount`, align: 'center', width: 90,
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '累计充值人数', dataIndex: `h5LeadNatureNewUserTotalAmountNum`, align: 'center', width: 90,
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '账面充值金额', dataIndex: `h5LeadNatureAmount`, align: 'center', width: 90,
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '账面充值人数', dataIndex: `h5LeadNatureAmountNum`, align: 'center', width: 90,
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
]

interface Props {
    gameName: string
    h5NatureUserVOList: any[]
}
/**
 * 游戏官方导量用户数据
 * @returns 
 */
const H5NatureUser: React.FC<Props> = ({ gameName, h5NatureUserVOList }) => {

    /**************************************/
    const [visible, setVisible] = useState<boolean>(false)
    /**************************************/

    return <>
        <Button type="link" style={{ padding: 0 }} onClick={() => setVisible(true)}>官方导量</Button>
        {visible && <Modal title={`${gameName} 游戏官方导量用户数据`} width={900} visible={visible} onCancel={() => setVisible(false)} footer={null}>
            <Table size="small" dataSource={h5NatureUserVOList?.map((item: any, index: number) => ({ ...item, id: index + 1 }))} columns={columns} />
        </Modal>}
    </>
}


export default React.memo(H5NatureUser)