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


const KfhDetails: React.FC<{ chatLogId: number }> = ({ chatLogId }) => {

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

    const getProjectKfhDetailsList = useAjax((params) => getProjectKfhDetailsListApi(params))
    /****************************************/

    useEffect(() => {
        if (chatLogId && visible) {
            getProjectKfhDetailsList.run(chatLogId);
        }
    }, [chatLogId, visible])

    return <>
        <a onClick={() => setVisible(true)}>详情</a>
        {visible && <Modal
            title={<strong>客服号详情</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            width={1200}
            footer={null}
        >
            <Table
                size='small'
                bordered
                rowKey={'corpUserId'}
                dataSource={getProjectKfhDetailsList?.data?.data || []}
                scroll={{ y: 1000 }}
                columns={[
                    {
                        title: '拉客户的主体ID',
                        dataIndex: 'corpId',
                        key: 'corpId',
                        width: 120,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '拉客户的客服号ID',
                        dataIndex: 'corpUserId',
                        key: 'corpUserId',
                        width: 120,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '拉客户的客服号名称',
                        dataIndex: 'corpUserName',
                        key: 'corpUserName',
                        width: 120,
                        ellipsis: true,
                    },
                    {
                        title: '手机UUID',
                        dataIndex: 'corpUserPhoneUuid',
                        key: 'corpUserPhoneUuid',
                        width: 140,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '标签组ID',
                        dataIndex: 'tagGroupId',
                        key: 'tagGroupId',
                        width: 120,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '标签名',
                        dataIndex: 'tagName',
                        key: 'tagName',
                        width: 120,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '标签ID',
                        dataIndex: 'tagId',
                        key: 'tagId',
                        width: 180,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '标签名数量',
                        dataIndex: 'tagNameCount',
                        key: 'tagNameCount',
                        width: 60,
                        align: 'center'
                    },
                ]}
            />
        </Modal>}
    </>
}

export default React.memo(KfhDetails);