import { useAjax } from '@/Hook/useAjax';
import { getMpChangeRecordListApi } from '@/pages/weComTask/API/global';
import { Modal, Table } from 'antd';
import React, { useEffect } from 'react';


interface ChatLogProps {
    corpId: string;
    chatData: any;
    visible?: boolean;
    onClose?: () => void;
}

/**
 * 群聊变更记录
 * @returns 
 */
const ChatLog: React.FC<ChatLogProps> = ({ corpId, chatData, visible, onClose }) => {

    /*********************************************/
    const getMpChangeRecordList = useAjax((params) => getMpChangeRecordListApi(params))
    /*********************************************/

    useEffect(() => {
        if (corpId && chatData?.chatId) {
            getMpChangeRecordList.run({ corpId, chatId: chatData.chatId })
        }
    }, [corpId, chatData])

    return <Modal
        title={<strong>{chatData?.chatName} 群聊变更记录</strong>}
        open={visible}
        onCancel={onClose}
        footer={null}
        width={700}
        maskClosable={false}
    >
        <Table
            dataSource={getMpChangeRecordList?.data?.data}
            loading={getMpChangeRecordList?.loading}
            columns={[
                {
                    title: '公众号',
                    dataIndex: 'mpAccount',
                    key: 'mpAccount',
                    ellipsis: true,
                    align: 'center',
                    width: 100,
                    render: (text: any) => { 
                        return text?.name || '--';
                    },
                },
                {
                    title: '开始时间',
                    dataIndex: 'beginTime',
                    key: 'beginTime',
                    ellipsis: true,
                    align: 'center',
                    width: 130
                },
                {
                    title: '结束时间',
                    dataIndex: 'endTime',
                    key: 'endTime',
                    ellipsis: true,
                    align: 'center',
                    width: 130,
                    render: (text: any) => {
                        return text || '--';
                    }
                },
                {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                    ellipsis: true,
                    align: 'center',
                    width: 130
                },
            ]}
            scroll={{ y: 450 }}
            rowKey={'id'}
            bordered
            size='small'
        />
    </Modal>;
};

export default React.memo(ChatLog);