import { Modal, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import '../../../../../tencentAdPutIn/index.less';
import { useAjax } from '@/Hook/useAjax';
import { getUserDecodeListApi } from '@/services/adqV3/global';

interface UserDecodeLogProps {
    localCsgroupId: number;
    visible?: boolean;
    onClose?: () => void;
}

/**
 * 解密查询
 * @param param0 
 * @returns 
 */
const UserDecodeLog: React.FC<UserDecodeLogProps> = ({ visible, localCsgroupId, onClose }) => {

    /**********************************************/
    const [queryForm, setQueryForm] = useState<{ localCsgroupId: number, pageNum: number, pageSize: number }>({ localCsgroupId, pageNum: 1, pageSize: 20 })
    const getUserDecodeList = useAjax((params) => getUserDecodeListApi(params))
    /**********************************************/

    useEffect(() => {
        getUserDecodeList.run({ ...queryForm, localCsgroupId })
    }, [queryForm, localCsgroupId])

    return (
        <Modal
            title={<strong>服务商授权解密查询</strong>}
            open={visible}
            onCancel={onClose}
            footer={null}
            className='modalResetCss'
            width={800}
        >
            <Table
                columns={[
                    {
                        title: '本地企微ID',
                        dataIndex: 'localCorpId',
                        key: 'localCorpId',
                        width: 100,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        }
                    },
                    {
                        title: '本地客服号ID',
                        dataIndex: 'localCorpUserId',
                        key: 'localCorpUserId',
                        width: 100,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        }
                    },
                    {
                        title: '客服号名称',
                        dataIndex: 'getLocalCorpUserName',
                        key: 'getLocalCorpUserName',
                        width: 100,
                        ellipsis: true,
                        align: 'center',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        }
                    },
                    {
                        title: '腾讯客服号ID',
                        dataIndex: 'tencentCorpUserId',
                        key: 'tencentCorpUserId',
                        width: 200,
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        }
                    }
                ]}
                dataSource={getUserDecodeList.data?.records}
                size="small"
                loading={getUserDecodeList?.loading}
                scroll={{ y: 500 }}
                rowKey={'id'}
                pagination={{
                    total: getUserDecodeList.data?.total,
                    defaultPageSize: 20,
                    current: getUserDecodeList.data?.current,
                    pageSize: getUserDecodeList.data?.size
                }}
                onChange={(pagination) => {
                    const { current, pageSize } = pagination
                    setQueryForm({ ...queryForm, pageNum: current as number, pageSize: pageSize as number || 20 })
                }}
            />
        </Modal>
    );
};

export default React.memo(UserDecodeLog);