ad-manage/src/pages/launchSystemNew/components/adModal/index.tsx

import { FnAjax, useAjax } from "@/Hook/useAjax"
import { ListData, SysAdgroupsDTO } from "@/services/launchAdq"
import { getSysAdgroupsList } from "@/services/launchAdq/localAd"
import { Col, Input, message, Modal, Row } from "antd"
import React, { useCallback, useEffect, useState } from "react"
import TableData from "../TableData"
import tableConfig from "./tableConfig"


/** 广告选择 */
interface Props {
    promotedObjectType: string,
    visible?: boolean,
    onClose?: () => void,
    onChange?: (data: any) => void,
    sysAdgroupsId?: number
}
const AdModal: React.FC<Props> = (props) => {

    /**********************/
    const { visible, onClose, onChange, promotedObjectType, sysAdgroupsId } = props
    const [oldsearchData, setOldsearchData] = useState<any>(null)
    const sysAdgroupsList: FnAjax<ListData<SysAdgroupsDTO>> = useAjax((params) => getSysAdgroupsList(params))
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
    /**********************/

    // 回填
    useEffect(() => {
        if (sysAdgroupsId) {
            setSelectedRowKeys([sysAdgroupsId])
        }
    }, [sysAdgroupsId])
    
    // 初始获取列表
    useEffect(() => {
        getList({ pageSize: 20, pageNum: 1, promotedObjectType })
    }, [])
    // 获取列表
    const getList = useCallback((arg: { pageSize: number, pageNum: number, adgroupName?: string, promotedObjectType?: string }) => {
        Object.keys(arg).forEach(key => {
            !arg[key] && delete arg[key]
        })
        if (JSON.stringify(arg) !== JSON.stringify(oldsearchData)) {
            setOldsearchData(arg)
            sysAdgroupsList.run(arg)
        }
    }, [oldsearchData])


    // 确定
    const handleOk = () => {
        if (selectedRowKeys?.length) {
            if (sysAdgroupsId) {
                if (selectedRowKeys?.indexOf(sysAdgroupsId) === -1) {
                    onChange && onChange(selectedRowKeys.toString())
                } else {
                    onClose && onClose()
                }
            } else {
                onChange && onChange(selectedRowKeys.toString())
            }
        } else {
            message.error('请选择广告')
        }
    }

    return <Modal title={`选择广告`} bodyStyle={{ padding: 0 }} width={1000} visible={visible} onOk={handleOk} onCancel={() => { onClose && onClose() }}>
        <TableData
            hoverable={false}
            columns={tableConfig}
            ajax={sysAdgroupsList}
            dataSource={sysAdgroupsList?.data?.records}
            loading={sysAdgroupsList?.loading}
            scroll={{ y: 600 }}
            total={sysAdgroupsList?.data?.total}
            page={sysAdgroupsList?.data?.current}
            pageSize={sysAdgroupsList?.data?.size}
            rowSelection={{
                type: 'radio',
                selectedRowKeys: selectedRowKeys,
                onChange: (selectedRowKeys: React.Key[]) => {
                    setSelectedRowKeys(selectedRowKeys)
                }
            }}
            leftChild={<>
                <Row gutter={[10, 10]}>
                    <Col>
                        <Input
                            placeholder='广告名称'
                            allowClear
                            onBlur={(e) => {
                                let value = e.target.value
                                getList({ pageNum: 1, pageSize: 20, adgroupName: value })
                            }}
                            onKeyDownCapture={(e: any) => {
                                let key = e.key
                                if (key === 'Enter') {
                                    let value = e.target.value
                                    getList({ pageNum: 1, pageSize: 20, adgroupName: value })
                                }
                            }}
                            onChange={(e) => {
                                let value = e.target.value
                                if (!value) {
                                    getList({ pageNum: 1, pageSize: 20, adgroupName: value })
                                }
                            }}
                        />
                    </Col>
                </Row>
            </>}
            onChange={(props: any) => {
                let { sortData, pagination } = props
                let { current, pageSize } = pagination
                getList({ pageNum: current, pageSize })
            }}
        />

    </Modal>
}

export default React.memo(AdModal)