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 { getDztSelectCorpIdsByQcUuidListApi, GetProps } from "@/pages/weComTask/API/heavyPowderMAS"
const { Text } = Typography;

const CorpDetails: React.FC<{ name: string, avatar: string, corpIdCount: number, qcUuid: string, corpS: GetProps }> = ({ name, avatar, corpIdCount, qcUuid, corpS }) => {

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

    const getSelectCorpIdsByQcUuidList = useAjax((params) => getDztSelectCorpIdsByQcUuidListApi(params))
    /*******************************************/

    useEffect(() => {
        if (visible && qcUuid && corpS?.aCorpIds.length > 0 && corpS?.bCorpIds.length > 0) {
            getSelectCorpIdsByQcUuidList.run({ qcUuid, ...corpS })
        }
    }, [qcUuid, corpS, visible])

    return <>
        <Space>
            <span>{corpIdCount}</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,
                    },
                    {
                        title: '企业ID',
                        dataIndex: 'corpId',
                        key: 'corpId',
                        width: 280,
                        ellipsis: true,
                        render: (text: string) => {
                            return <Text copyable>{text}</Text>
                        }
                    },
                    {
                        title: '客户名称',
                        dataIndex: 'name',
                        key: 'name',
                        align: 'center',
                        width: 145,
                        render: () => {
                            return <Space>
                                <Avatar shape="square" size={20} icon={<UserOutlined />} src={avatar} />
                                <Text>{name}</Text>
                            </Space>
                        }
                    },
                    {
                        title: '客户ID',
                        dataIndex: 'externalUserId',
                        key: 'externalUserId',
                        render: (text: string) => {
                            return <Text copyable>{text}</Text>
                        }
                    }
                ]}
                scroll={{ y: 460 }}
                bordered
                pagination={{
                    defaultPageSize: 20
                }}
                dataSource={getSelectCorpIdsByQcUuidList.data?.data}
                loading={getSelectCorpIdsByQcUuidList.loading}
                rowKey="corpId"
            />
        </Modal>}
    </>
}

export default React.memo(CorpDetails)