import { useAjax } from "@/Hook/useAjax"
import { Button, Modal, Table, Tag } from "antd"
import React, { useEffect, useState } from "react"
import { TableConfigLog } from "./tableConfig"
import { getDisbandChatLogListApi, getDisbandChatLogListProps } from "@/pages/weComTask/API/global"



const DisbandChatLog: React.FC<{ corpId: string }> = ({ corpId }) => {

    /***************************************/
    const [visible, setVisible] = useState<boolean>(false)
    const [queryParams, setQueryParmas] = useState<getDisbandChatLogListProps>({ pageNum: 1, pageSize: 20, corpId })

    const getDisbandChatLogList = useAjax((params) => getDisbandChatLogListApi(params))
    /***************************************/

    useEffect(() => {
        if (visible) {
            getDisbandChatLogList.run({ ...queryParams, corpId })
        }
    }, [queryParams, visible, corpId])

    return <>
        <Button onClick={() => {
            setQueryParmas({ pageNum: 1, pageSize: 20, corpId })
            setVisible(true)
        }}>解散群聊日志</Button>

        {visible && <Modal
            title={<strong>解散群聊日志</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            width={700}
        >
            <Table
                dataSource={getDisbandChatLogList?.data?.data?.records}
                loading={getDisbandChatLogList?.loading}
                columns={TableConfigLog()}
                scroll={{ y: 450 }}
                rowKey={(s) => {
                    return s.id
                }}
                bordered
                size='small'
                pagination={{
                    total: getDisbandChatLogList?.data?.data?.total,
                    showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                    showSizeChanger: true,
                    showLessItems: true,
                    defaultCurrent: 1,
                    defaultPageSize: 20,//默认初始的每页条数
                    current: getDisbandChatLogList?.data?.data?.current || 1,
                    pageSize: getDisbandChatLogList?.data?.data?.size || 20,
                    onChange: (page, pageSize) => {
                        setQueryParmas({ ...queryParams, pageNum: page, pageSize })
                    }
                }}
            />
        </Modal>}
    </>
}

export default React.memo(DisbandChatLog)