import { useAjax } from "@/Hook/useAjax";
import { getLogChatUserInfoListApi, GetLogChatUserInfoListProps } from "@/pages/weComTask/API/groupChat";
import { Modal, Table } from "antd";
import React, { useEffect, useState } from "react";


/**
 * 客户详情
 * @param param0 
 * @returns 
 */
const UserInfo: React.FC<{ id: number, count: number, title?: string, status?: 1 | 3 | 4 | 5 | null }> = ({ id, count, title, status }) => {

    /*********************************************/
    const [queryForm, setQueryForm] = useState<GetLogChatUserInfoListProps>({ id, pageNum: 1, pageSize: 20, status })
    const [visible, setVisible] = useState<boolean>(false);
    const getLogChatUserInfoList = useAjax((params) => getLogChatUserInfoListApi(params))
    /*********************************************/

    useEffect(() => {
        if (visible) {
            getLogChatUserInfoList.run(queryForm);
        }
    }, [id, visible, queryForm])

    return <>
        <a onClick={() => setVisible(true)}>{count || 0}</a>
        {visible && <Modal
            title={<strong>{title || '客户详情'}</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            width={1100}
            footer={null}
        >
            <Table
                dataSource={getLogChatUserInfoList?.data?.data?.records}
                columns={[
                    {
                        title: '手机UUID',
                        dataIndex: 'corpUserPhoneUuid',
                        key: 'corpUserPhoneUuid',
                        width: 100,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '客户名称',
                        dataIndex: 'nickName',
                        key: 'nickName',
                        width: 100,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '客户ID',
                        dataIndex: 'externalUserId',
                        key: 'externalUserId',
                        width: 120,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '企业名称',
                        dataIndex: 'corpName',
                        key: 'corpName',
                        width: 120,
                        ellipsis: true,
                        align: 'center',
                        render: (text) => text || '--'
                    },
                    {
                        title: '企业ID',
                        dataIndex: 'corpId',
                        key: 'corpId',
                        width: 120,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '客服号名称',
                        dataIndex: 'corpUserName',
                        key: 'corpUserName',
                        width: 120,
                        ellipsis: true,
                        align: 'center',
                        render: (text) => text || '--'
                    },
                    {
                        title: '客服号ID',
                        dataIndex: 'corpUserId',
                        key: 'corpUserId',
                        width: 90,
                        ellipsis: true,
                        align: 'center'
                    },
                ]}
                rowKey={'id'}
                bordered={true}
                size='small'
                scroll={{ y: 500, x: 1000 }}
                loading={getLogChatUserInfoList?.loading}
                pagination={{
                    current: getLogChatUserInfoList?.data?.data?.current,
                    pageSize: getLogChatUserInfoList?.data?.data?.size,
                    total: getLogChatUserInfoList?.data?.data?.total,
                    showSizeChanger: true,
                    onChange: (page, pageSize) => {
                        setQueryForm({ ...queryForm, pageNum: page, pageSize })
                    }
                }}
            />
        </Modal>}
    </>
}

export default React.memo(UserInfo);