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: `buyGameName`,
        key: 'buyGameName',
        align: 'center',
        width: 85,
        render: (a: string, b: any) => {
            return <WidthEllipsis isCopy value={a} />
        }
    },
    {
        title: '游戏ID', dataIndex: `buyGameId`, align: 'center', width: 85,
        key: 'buyGameId',
        render: (a: string, b: any) => {
            return <WidthEllipsis value={a} />
        }
    },
    {
        title: '游戏应用类型', dataIndex: `buyClassify`, align: 'center', width: 100,
        key: 'buyClassify',
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '新用户充值金额', dataIndex: `newUserRechargeMoney`, align: 'center', width: 105,
        key: 'newUserRechargeMoney',
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '新用户充值人数', dataIndex: `newUserRechargeNum`, align: 'center', width: 105,
        key: 'newUserRechargeNum',
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '新用户累计充值金额', dataIndex: `h5LeadBuyNewUserTotalAmount`, align: 'center', width: 90,
        key: 'h5LeadBuyNewUserTotalAmount',
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '新用户累计充值人数', dataIndex: `h5LeadBuyNewUserTotalAmountNum`, align: 'center', width: 90,
        key: 'h5LeadBuyNewUserTotalAmountNum',
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '账面充值金额', dataIndex: `h5LeadBuyAmountNum`, align: 'center', width: 90,
        key: 'h5LeadBuyAmountNum',
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
    {
        title: '账面充值人数', dataIndex: `h5LeadBuyAmount`, align: 'center', width: 90,
        key: 'h5LeadBuyAmount',
        render: (a: string, b: any) => {
            return <Statistic value={a || 0} />
        }
    },
]

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

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

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


export default React.memo(H5BuyUser)