qc-gameDataStatistics/src/components/rechargeTrend/index.tsx

import { useAjax } from "@/Hook/useAjax"
import { getPromoteAgainListApi } from "@/services/gameData/extensionData"
import { Col, Drawer, Empty, Progress, Row, Spin, Statistic, Table } from "antd"
import React, { useEffect, useMemo } from "react"
import style from './table.less'
import './index.less'
import moment from "moment"
import { FallOutlined, RiseOutlined } from "@ant-design/icons"
import { useAddTime } from "@/utils/utils"

interface Props {
    accountId?: number,
    agentId?: number,
    beginDate?: string
    sourceSystem?: string
    visible?: boolean
    onClose?: () => void
}
/**
 * 推广 复充趋势
 * @returns 
 */
const RechargeTrend: React.FC<Props> = ({ visible, onClose, accountId, agentId, beginDate, sourceSystem }) => {

    /************************************* */

    const getPromoteAgainList = useAjax((params) => getPromoteAgainListApi(params)) // 推广
    /************************************* */

    useEffect(() => {
        getPromoteAgainList.run({ accountId, agentId, beginDate, sourceSystem })
    }, [accountId, visible, agentId, beginDate, sourceSystem])

    const TableTrend = useMemo(() => {
        if (getPromoteAgainList?.data && JSON.stringify(getPromoteAgainList?.data) !== '{}') {
            let col: any[] = []
            let data: any[] = [{ count: '1', id: 1 }, { count: '2', id: 2 }, { count: '3', id: 3 }, { count: '4', id: 4 }, { count: '5', id: 5 }, { count: '5-10', id: 6 }, { count: '10-20', id: 7 }, { count: '20次以上', id: 8 }]
            let date: string = ''
            let width = 110
            Object.keys(getPromoteAgainList?.data).forEach((key, index) => {
                date = key
                col.push({
                    title: key,
                    dataIndex: 'd' + (index + 1),
                    key: 'd' + (index + 1),
                    align: 'center',
                    width,
                    render: (value1: any, value2: any) => {
                        return <Row gutter={[10, 0]} key={index} className={`${style.mytable_body_div} ${style.show}`} >
                            <Col style={{ color: '#3f51b5', fontWeight: 600 }} span={24} ><span>原：</span>
                                <Statistic value={value1?.original || 0} valueStyle={{ color: '#3f51b5', fontSize: 12, fontWeight: 600 }} />
                            </Col>
                            <Col style={{ color: '#ff9800', fontWeight: 600 }} span={24} ><span>现：</span>
                                <Statistic value={value1?.present || 0} valueStyle={{ color: '#ff9800', fontSize: 12, fontWeight: 600 }} />
                            </Col>
                            <Col style={{ color: 'red', fontWeight: 600 }} span={24} ><span>增：</span>
                                <Statistic value={value1?.increase || 0} valueStyle={{ color: 'red', fontSize: 12, fontWeight: 600 }} prefix={<RiseOutlined />} />
                            </Col>
                            <Col style={{ color: 'green', fontWeight: 600 }} span={24} ><span>移：</span>
                                <Statistic value={value1?.decrease || 0} valueStyle={{ color: 'green', fontSize: 12, fontWeight: 600 }} prefix={<FallOutlined />} />
                            </Col>
                            <Col style={{ color: '#000', fontWeight: 600 }} span={24} >
                                <div className={style.bitRate}>
                                    <span>比：</span>
                                    <div className="my_progrss">
                                        <span className='content'>{(value1?.rate * 100)?.toFixed(2) || '0.00'}%</span>
                                        <Progress
                                            strokeColor="#d3adf7"
                                            status="active"
                                            showInfo={false}
                                            style={{ height: 25 }}
                                            percent={(value1?.rate * 100) || 0}
                                        />
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    }
                })
                getPromoteAgainList?.data[key]?.forEach((item: any, eq: number) => {
                    data[eq][`d${index + 1}`] = item
                })
            })
            let nullCol: any[] = []
            if (col.length < 30) {
                Array(30 - col.length).fill('').forEach((item, index) => {
                    nullCol.push({
                        title: useAddTime(index, 'days', 'YYYY-MM-DD', date || moment().format('YYYY-MM-DD')),
                        dataIndex: 'd' + (index + 1),
                        key: 'd' + (index + 1),
                        align: 'center',
                        width,
                        className: 'zdred',
                        render: () => {
                            return '--'
                        }
                    })
                })
            }
            const columns: any = [
                {
                    title: '充值次数',
                    dataIndex: 'count',
                    key: 'count',
                    width: 50,
                    align: 'center'
                },
                ...col,
                ...nullCol
            ]
            return <Table columns={columns} scroll={{ x: 1000, y: 700 }} className="sumTable" rowKey={'id'} size="small" dataSource={data} bordered pagination={false} />
        } else {
            return <Empty />
        }
    }, [getPromoteAgainList?.data])

    return <Drawer title={`${accountId} 推广每日数据复充趋势`} visible={visible} onClose={() => onClose?.()} width={'90%'}>
        <Spin spinning={getPromoteAgainList.loading} >{TableTrend}</Spin>
    </Drawer>
}

export default React.memo(RechargeTrend)