ad-manage/src/components/EarlyWarning/ruleLog.tsx

import { useAjax } from "@/Hook/useAjax"
import TableData from "@/pages/launchSystemNew/components/TableData"
import { GetAdWarningLogRuleProps, getAdWarningLogRuleListApi } from "@/services/adMonitor/earlyWarning"
import { Drawer, Input, Select, Space } from "antd"
import React, { useEffect, useState } from "react"
import { ruleLogTableConfig } from "./tableConfig"

export const OperationType = [
    { label: '告警', value: 0 },
    { label: '暂停广告', value: 1 },
    { label: '广告置顶标黄', value: 5 },
    { label: '广告置顶标红', value: 6 }
]
export const OperationTypeObj = { 0: '告警', 1: '暂停广告', 5: '广告置顶标黄', 6: '广告置顶标红' }

interface Props {
    ruleName: string,
    ruleId: number,
    onClose?: () => void
    visible?: boolean
}
/**
 * 通过规则获取日志
 * @returns 
 */
const RuleLog: React.FC<Props> = ({ ruleName, ruleId, onClose, visible }) => {

    /****************************/
    const [queryForm, setQueryForm] = useState<GetAdWarningLogRuleProps>({ pageNum: 1, pageSize: 20, ruleId })
    const getAdWarningLogRuleList = useAjax((params) => getAdWarningLogRuleListApi(params))
    /****************************/

    useEffect(() => {
        getAdWarningLogRuleList.run(queryForm)
    }, [queryForm])

    return <Drawer title={`${ruleName} 操作日志`} placement="right" width={'70%'} onClose={onClose} open={visible}>
        <TableData
            size="small"
            isCard={false}
            columns={() => ruleLogTableConfig()}
            ajax={getAdWarningLogRuleList}
            dataSource={getAdWarningLogRuleList?.data?.records}
            loading={getAdWarningLogRuleList?.loading}
            total={getAdWarningLogRuleList?.data?.total}
            page={queryForm.pageNum}
            pageSize={queryForm.pageSize}
            onChange={({ pagination }: any) => {
                let { current, pageSize } = pagination
                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                newQueryForm.pageNum = current
                newQueryForm.pageSize = pageSize
                setQueryForm(newQueryForm)
            }}
            gutter={[0, 10]}
            scroll={{ x: 1200 }}
            leftChild={<Space>
                <Input placeholder="请输入广告账号" allowClear value={queryForm.accountId} onChange={(e) => setQueryForm({ ...queryForm, accountId: e.target.value, pageNum: 1 })} />
                <Input placeholder="请输入广告ID" allowClear value={queryForm.adgroupId} onChange={(e) => setQueryForm({ ...queryForm, adgroupId: e.target.value, pageNum: 1 })} />
                <Select
                    style={{ width: 150 }}
                    showSearch
                    allowClear
                    placeholder="选择操作类型"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                    }
                    value={queryForm.operationType}
                    onChange={(e) => setQueryForm({ ...queryForm, operationType: e, pageNum: 1 })}
                >
                    {OperationType.map((item, index) => <Select.Option value={item.value} key={item.value}>{item.label}</Select.Option>)}
                </Select>
            </Space>}
        />
    </Drawer>
}

export default React.memo(RuleLog)