import { useAjax } from "@/Hook/useAjax"
import { getRelationGroupListApi } from "@/services/adqV3/global"
import { LinkOutlined } from "@ant-design/icons"
import { Button, Modal, Table } from "antd"
import React, { useState } from "react"


const AssociateCSG: React.FC<{ localCorpCsgroupId: number }> = ({ localCorpCsgroupId }) => {

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

    const getRelationGroupList = useAjax((params) => getRelationGroupListApi(params))
    /****************************************/

    const getList = () => {
        setVisible(true)
        getRelationGroupList.run({ localCorpCsgroupId })
    }

    return <>
        <Button icon={<LinkOutlined />} style={{ border: 'none', fontSize: 12, padding: 0 }} size='small' onClick={getList}>已关联客服组</Button>

        {visible && <Modal
            title={<strong>已关联腾讯客服组</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            width={650}
        >
            <Table
                columns={[
                    {
                        title: '客服组名称',
                        dataIndex: 'groupName',
                        key: 'groupName',
                        width: 300,
                        ellipsis: true,
                        render(value, records) {
                            return <span style={{ fontSize: 12 }}>{value}（{records.groupId}）</span>
                        }
                    },
                    {
                        title: 'AccountId',
                        dataIndex: 'accountId',
                        key: 'accountId',
                        render(value) {
                            return <span style={{ fontSize: 12 }}>{value}</span>
                        }
                    }
                ]}
                dataSource={getRelationGroupList.data}
                size="small"
                loading={getRelationGroupList?.loading}
                scroll={{ y: 500 }}
                rowKey={'groupId'}
            />
        </Modal>}
    </>
}


export default React.memo(AssociateCSG)