import { useAjax } from "@/Hook/useAjax"
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"
import { getGameDataAgainListApi } from "@/services/gameData/game"

interface Props {
    gameId?: number
    gameName?: string
    beginDate?: string
    sourceSystem?: string
    visible?: boolean
    onClose?: () => void
}
/**
 * 游戏 复充趋势
 * @returns 
 */
const RechargeTrendGame: React.FC<Props> = ({ visible, onClose, gameName, gameId, beginDate, sourceSystem }) => {

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

    const getGameDataAgainList = useAjax((params) => getGameDataAgainListApi(params)) // 游戏
    /************************************* */

    useEffect(() => {
        getGameDataAgainList.run({ gameId, gameName, beginDate, sourceSystem })
    }, [gameId, visible, gameName, beginDate, sourceSystem])

    const TableTrend = useMemo(() => {
        if (getGameDataAgainList?.data && JSON.stringify(getGameDataAgainList?.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 = 90
            Object.keys(getGameDataAgainList?.data).forEach((key, index) => {
                date = key
                col.push({
                    title: key,
                    dataIndex: 'd' + (index + 1),
                    key: 'd' + (index + 1),
                    align: 'center',
                    children: [{
                        title: '买量',
                        dataIndex: 'm' + (index + 1),
                        key: 'm' + (index + 1),
                        align: 'center',
                        width,
                        className: index % 2 === 0 ? 'color001' : 'color002',
                        render: (value: any, value2: any) => {
                            let value1 = value2?.['d' + (index + 1)]
                            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?.buyOriginal || 0} valueStyle={{ color: '#3f51b5', fontSize: 12, fontWeight: 600 }} />
                                </Col>
                                <Col style={{ color: '#ff9800', fontWeight: 600 }} span={24} ><span>现：</span>
                                    <Statistic value={value1?.buyPresent || 0} valueStyle={{ color: '#ff9800', fontSize: 12, fontWeight: 600 }} />
                                </Col>
                                <Col style={{ color: 'red', fontWeight: 600 }} span={24} ><span>增：</span>
                                    <Statistic value={value1?.buyIncrease || 0} valueStyle={{ color: 'red', fontSize: 12, fontWeight: 600 }} prefix={<RiseOutlined />} />
                                </Col>
                                <Col style={{ color: 'green', fontWeight: 600 }} span={24} ><span>移：</span>
                                    <Statistic value={value1?.buyDecrease || 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?.buyRate * 100)?.toFixed(2) || '0.00'}%</span>
                                            <Progress
                                                strokeColor="#85a5ff"
                                                status="active"
                                                showInfo={false}
                                                style={{ height: 25 }}
                                                percent={(value1?.buyRate * 100) || 0}
                                            />
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        }
                    }, {
                        title: '自然量',
                        dataIndex: 'n' + (index + 1),
                        key: 'n' + (index + 1),
                        align: 'center',
                        width,
                        className: index % 2 === 0 ? 'color001' : 'color002',
                        render: (value: any, value2: any) => {
                            let value1 = value2?.['d' + (index + 1)]
                            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?.natureOriginal || 0} valueStyle={{ color: '#3f51b5', fontSize: 12, fontWeight: 600 }} />
                                </Col>
                                <Col style={{ color: '#ff9800', fontWeight: 600 }} span={24} ><span>现：</span>
                                    <Statistic value={value1?.naturePresent || 0} valueStyle={{ color: '#ff9800', fontSize: 12, fontWeight: 600 }} />
                                </Col>
                                <Col style={{ color: 'red', fontWeight: 600 }} span={24} ><span>增：</span>
                                    <Statistic value={value1?.natureIncrease || 0} valueStyle={{ color: 'red', fontSize: 12, fontWeight: 600 }} prefix={<RiseOutlined />} />
                                </Col>
                                <Col style={{ color: 'green', fontWeight: 600 }} span={24} ><span>移：</span>
                                    <Statistic value={value1?.natureDecrease || 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?.natureRate * 100)?.toFixed(2) || '0.00'}%</span>
                                            <Progress
                                                strokeColor="#95de64"
                                                status="active"
                                                showInfo={false}
                                                style={{ height: 25 }}
                                                percent={(value1?.natureRate * 100) || 0}
                                            />
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        }
                    }, {
                        title: '总量',
                        dataIndex: 'z' + (index + 1),
                        key: 'z' + (index + 1),
                        align: 'center',
                        width,
                        className: index % 2 === 0 ? 'color001' : 'color002',
                        render: (value: any, value2: any) => {
                            let value1 = value2?.['d' + (index + 1)]
                            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>
                        }
                    }]
                })
                getGameDataAgainList?.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: 100,
                        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 />
        }
    }, [getGameDataAgainList?.data])

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

export default React.memo(RechargeTrendGame)