import { Modal, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import '../tencentAdPutIn/index.less';

interface DoubleDelDetailsProps {
    day: string;
    corpName: string;
    corpUserName: string;
    dnOutUserCount: { [x: string]: number };
}

const DoubleDelDetails: React.FC<DoubleDelDetailsProps> = ({ day, corpName, corpUserName, dnOutUserCount }) => {

    /***************************************/
    const [visible, setVisible] = useState<boolean>(false);
    const [data, setData] = useState<{ day: string; count: number }[]>([]);
    /***************************************/

    useEffect(() => {
        if (visible && dnOutUserCount) {
            setData(Object.keys(dnOutUserCount).map((key, index) => ({
                day: key,
                count: dnOutUserCount[key],
                id: index + 1
            })))
        }
    }, [dnOutUserCount, visible])

    return <div>
        <a style={{ fontSize: 12 }} onClick={() => setVisible(true)}>详情</a>
        {visible && <Modal
            title={<strong>{day}_{corpName}_{corpUserName} 双删数据</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            className='modalResetCss'
            width={550}
        >
            <Table
                dataSource={data}
                columns={[
                    {
                        title: '日期',
                        dataIndex: 'day',
                        key: 'day',
                        width: 80,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    },
                    {
                        title: '人数',
                        dataIndex: 'count',
                        key: 'count',
                        width: 80,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        },
                    }
                ]}
                size='small'
                bordered
                rowKey={'id'}
                scroll={{ x: 500 }}
            />
        </Modal>}
    </div>;
};

export default React.memo(DoubleDelDetails);