import { useAjax } from '@/Hook/useAjax';
import { getCorpUserDayHourListApi } from '@/services/adqV3/monitorEWList';
import { Modal, Table, Typography } from 'antd';
import React, { useEffect, useState } from 'react';
import '../tencentAdPutIn/index.less';
const  { Text } = Typography;

interface AstraSupportHourProps {
    corpName: string;
    corpUserName: string;
    data: {
        day: string;
        corpId: string;
        corpUserId: string;
    }
}
const AstraSupportHour: React.FC<AstraSupportHourProps> = ({ corpName, corpUserName, data }) => {

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

    const getCorpUserDayHourList = useAjax((params) => getCorpUserDayHourListApi(params))
    /***************************************/

    useEffect(() => {
        if (visible) {
            getCorpUserDayHourList.run(data)
        }
    }, [data, visible]);

    return <>
        <a style={{ fontSize: 12 }} onClick={() => setVisible(true)}>小时数据</a>
        {visible && <Modal
            title={<strong>{data.day}_{corpName}_{corpUserName} 小时数据</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            className='modalResetCss'
            width={800}
        >
            <Table
                dataSource={getCorpUserDayHourList?.data}
                columns={[
                    {
                        title: '日期',
                        dataIndex: 'day',
                        key: 'day',
                        width: 80,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '小时',
                        dataIndex: 'hour',
                        key: 'hour',
                        width: 80,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '新增用户数',
                        dataIndex: 'addUserCount',
                        key: 'addUserCount',
                        width: 80,
                        ellipsis: true,
                        align: 'right',
                        sorter: (a, b) => a.addUserCount - b.addUserCount,
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '退出人数',
                        dataIndex: 'outUserCount',
                        key: 'outUserCount',
                        width: 80,
                        ellipsis: true,
                        align: 'right',
                        sorter: (a, b) => a.outUserCount - b.outUserCount,
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        }
                    },
                    {
                        title: '数据更新时间',
                        dataIndex: 'dataTime',
                        key: 'dataTime',
                        width: 140,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        }
                    }
                ]}
                size='small'
                bordered
                rowKey={'id'}
                sticky
                loading={getCorpUserDayHourList.loading}
                scroll={{ x: 700, y: 450 }}
                pagination={false}
                summary={pageData => {
                    let totalBorrow = 0;
                    let totalRepayment = 0;

                    pageData.forEach(({ addUserCount, outUserCount }) => {
                        totalBorrow += addUserCount;
                        totalRepayment += outUserCount;
                    });

                    return (
                        <Table.Summary fixed='top'>
                            <Table.Summary.Row>
                                <Table.Summary.Cell index={0} align="center"><Text strong>总计</Text></Table.Summary.Cell>
                                <Table.Summary.Cell index={1} align="center">--</Table.Summary.Cell>
                                <Table.Summary.Cell index={2} align="right">
                                    <Text strong>{totalBorrow}</Text>
                                </Table.Summary.Cell>
                                <Table.Summary.Cell index={3} align="right">
                                    <Text strong>{totalRepayment}</Text>
                                </Table.Summary.Cell>
                                <Table.Summary.Cell index={4} align="center">--</Table.Summary.Cell>
                            </Table.Summary.Row>
                        </Table.Summary>
                    );
                }}
            />
        </Modal>}
    </>;
};

export default React.memo(AstraSupportHour);