import { useAjax } from "@/Hook/useAjax"
import { getBackLogApi } from "@/services/gameData/order"
import { Modal, Table } from "antd"
import React, { useState } from "react"
import columnsLog from "./logTableConfig"


interface Props {
    orderId: string,
    backTableName: string
}
/**
 * 回传日志
 * @returns 
 */
const LogA: React.FC<Props> = ({ orderId, backTableName }) => {

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

    const getBackLog = useAjax((params) => getBackLogApi(params))
    /*****************************/

    const logHandle = () => {
        setVisible(true)
        getBackLog.run({ type: backTableName, orderId })
    }

    return <>
        <a onClick={logHandle}>日志</a>
        {visible && <Modal
            title={`${orderId} 订单日志`}
            visible={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            width={900}
            bodyStyle={{padding: '0 10px'}}
        >
            <Table columns={columnsLog()} rowKey={'id'} scroll={{ x: 1000 }} dataSource={getBackLog?.data} loading={getBackLog.loading}/>
        </Modal>}
    </>
}

export default React.memo(LogA)