import { Avatar, Modal, Space, Table, Typography } from "antd"
import React, { useEffect, useState } from "react"
import { EyeOutlined, UserOutlined } from "@ant-design/icons"
import { useAjax } from "@/Hook/useAjax"
import { getSelectCorpUserIdsByQcUuidListApi } from "../../../API/home"
const { Text } = Typography;

const CorpUserDetails: React.FC<{ name: string, avatar: string, corpUserIdCount: number, qcUuid: string }> = ({ name, avatar, corpUserIdCount, qcUuid }) => {

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

    const getSelectCorpUserIdsByQcUuidList = useAjax((params) => getSelectCorpUserIdsByQcUuidListApi(params))
    /*******************************************/

    useEffect(() => {
        if (visible && qcUuid) {
            getSelectCorpUserIdsByQcUuidList.run({ qcUuid })
        }
    }, [qcUuid, visible])

    return <>
        <Space>
            <span>{corpUserIdCount}</span>
            <a onClick={() => setVisible(true)}><EyeOutlined /></a>
        </Space>

        {visible && <Modal
            title={<strong>所在客服下详情</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            width={1000}
            footer={null}
        >
            <Table
                columns={[
                    {
                        title: '企业名称',
                        dataIndex: 'corpName',
                        key: 'corpName',
                        width: 180,
                        ellipsis: true,
                        render: (text: string) => text || '--'
                    },
                    {
                        title: '企业ID',
                        dataIndex: 'corpId',
                        key: 'corpId',
                        width: 300,
                        ellipsis: true,
                        render: (text: string) => {
                            return text ? <Text copyable>{text}</Text> : '--'
                        }
                    },
                    {
                        title: '客户名称',
                        dataIndex: 'name',
                        key: 'name',
                        width: 150,
                        align: 'center',
                        render: () => {
                            return <Space>
                                <Avatar shape="square" size={20} icon={<UserOutlined />} src={avatar} />
                                <Text>{name}</Text>
                            </Space>
                        }
                    },
                    {
                        title: '客服号名称',
                        dataIndex: 'corpUserName',
                        key: 'corpUserName',
                        ellipsis: true,
                        width: 150,
                        render: (text: string) => text || '--'
                    },
                    {
                        title: '客服号ID',
                        dataIndex: 'corpUserId',
                        key: 'corpUserId',
                        ellipsis: true,
                        width: 300,
                        render: (text: string) => {
                            return text ? <Text copyable>{text}</Text> : '--'
                        }
                    }
                ]}
                scroll={{ y: 460 }}
                bordered
                pagination={{
                    defaultPageSize: 20
                }}
                dataSource={getSelectCorpUserIdsByQcUuidList.data?.data}
                loading={getSelectCorpUserIdsByQcUuidList.loading}
                rowKey="corpUserId"
            />
        </Modal>}
    </>
}

export default React.memo(CorpUserDetails)