import { UnorderedListOutlined } from '@ant-design/icons';
import { Button, Modal, Spin } from 'antd';
import React, { useEffect } from 'react';
import '../../../../../tencentAdPutIn/index.less';
import { getUserListListApi } from '@/services/adqV3/global';
import { useAjax } from '@/Hook/useAjax';

/**
 * UserInfo是一个React函数组件，用于展示用户信息页面
 * 该组件没有参数和返回值，它通过返回一个包含用户信息页面的JSX元素来工作
 * 选择使用函数组件而不是类组件是因为用户信息页面通常不涉及复杂的组件状态管理
 * 此外，通过使用函数组件，可以利用React的Hooks特性，进一步简化组件逻辑
 */
const UserInfo: React.FC<{ data: any }> = ({ data }) => {
    // 返回一个包含用户信息页面布局的JSX元素
    // 这里使用了简单的HTML元素来构建页面结构，包括一个标题和一段描述

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

    const getUserListList = useAjax((params) => getUserListListApi(params))
    /************************************/

    useEffect(() => { 
        if (data?.groupId && visible) {
            getUserListList.run({ groupId: data.groupId })
        }
    }, [data?.groupId, visible]);

    return <>
        <Button icon={<UnorderedListOutlined />} style={{ border: 'none', fontSize: 12 }} size='small' onClick={() => setVisible(true)}>详情</Button>
        {visible && <Modal
            title={<strong>客服组详情</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            className='modalResetCss'
        >
            <Spin spinning={getUserListList.loading} tip='正在加载数据，请稍后...'>
                <p>客服组名称：{data?.groupName || '--'}</p>
                <p>客服人数：{getUserListList?.data?.length || 0}</p>
                <div style={{ display: 'flex' }}>
                    <p>已选客服：</p>
                    <div>{getUserListList?.data?.map((item: { tencentCorpUserId: string; corpUserName: string; }) => {
                        return <div key={item.tencentCorpUserId}>{item.corpUserName + `（${item.tencentCorpUserId}）`}</div>
                    })}</div>
                </div>
            </Spin>
        </Modal>}
    </>;
};

export default React.memo(UserInfo);