qc-iaaSystem/src/components/QueryForm/queryFormNovel.tsx

import { useAjax } from "@/Hook/useAjax"
import { AD_STATUS_ENUM, BID_MODE_ENUM, MARKETING_GOAL_ENUM, MARKETING_TARGET_TYPE_ENUM, OPTIMIZATIONGOAL_ENUM, PromotedObjectType } from "@/pages/iaaData/const"
import { getPutUserListApi } from "@/services/iaaData"
import { Button, Col, Form, Row, Space, DatePicker, Select, Input, InputNumber } from "antd"
import { RangePickerProps } from "antd/lib/date-picker"
import React, { useEffect, useState } from "react"
import { useModel } from "umi"

interface Props {
    onChange?: (data: any) => void
    /** 默认值 */
    initialValues?: any

    /** 是否开启 广告账号 搜索 */
    isAccountId?: boolean
    /** 是否开启 当前出价 搜索 */
    isCpaBid?: boolean
    /** 是否开启 广告名称 搜索 */
    isAdgroupName?: boolean
    /** 是否开启 广告ID 搜索 */
    isAdgroupId?: boolean
    /** 是否开启 创意名称 搜索 */
    isDynamicCreativeName?: boolean
    /** 是否开启 创意ID 搜索 */
    isDynamicCreativeId?: boolean

    /** 是否开启 腾讯备注 搜索 */
    isMemo?: boolean
    /** 是否开启 本地备注 搜索 */
    isRemark?: boolean

    /** 是否开启 投手 搜索 */
    isPutUserId?: boolean
    /** 是否开启 投手 搜索 */
    isPutUserIdList?: boolean
    /** 是否开启 出价方式 搜索 */
    isPricing?: boolean,
    /** 是否开启 广告状态 搜索 */
    isStatus?: boolean,
    /** 是否开启 删除状态 搜索 */
    isDeleted?: boolean,
    /** 是否开启 是否深度优化 搜索 */
    isDeepConversionSpec?: boolean,
    /** 是否开启 启用禁用状态 搜索 */
    isConfiguredStatus?: boolean,

    /** 是否开启 营销目的 搜索 */
    isMarketingGoal?: boolean,
    /** 是否开启 营销目的 搜索 */
    isMarketingTargetType?: boolean,
    /** 是否开启 推广目标类型 搜索 */
    isPromotedObjectType?: boolean,
    /** 是否开启 推广目标名称 搜索 */
    isPromotedObjectName?: boolean,
    /** 是否开启 优化目标类型 搜索 */
    isOptimizationGoal?: boolean,
    /** 是否开启 投放模式 搜索 */
    isDeliveryMode?: boolean,


    /** 是否开启 日期 搜索 */
    day1?: RangePickerProps
    /** 是否开启 日期 搜索 */
    day2?: RangePickerProps
    /** 是否开启 日期 搜索 */
    day3?: RangePickerProps

    /** 是否开启 最小总消耗 搜索 */
    isCostTotalMin?: boolean
    /** 是否开启 最低总千次曝光成本 搜索 */
    isThousandDisplayPriceTotalMin?: boolean
    /** 是否开启 最低转化数 搜索 */
    isConversionsCountTotalMin?: boolean
    /** 是否开启 激活首日广告变现ROI 搜索 */
    isIncomeRoi1?: boolean
    /** 是否开启 注册成本 搜索 */
    isRegCost?: boolean
    /** 是否开启 注册成本（平台上报+广告主上报 搜索 */
    isRegCostPla?: boolean
    /** 是否开启 点击均价 搜索 */
    isCpc?: boolean
}
/**
 * 游戏数据系统 请求参数
 * @returns 
 */
const QueryFormNovel: React.FC<Props> = (props) => {

    /**************************/
    const { initialState } = useModel('@@initialState');
    const {
        onChange, initialValues, isAccountId, isAdgroupName, isAdgroupId, isDynamicCreativeName, isDynamicCreativeId, isMemo, isRemark, isCpaBid, isPutUserId, isPutUserIdList, isPricing, isStatus, isMarketingGoal, isMarketingTargetType, isPromotedObjectType, isPromotedObjectName, isOptimizationGoal, isDeliveryMode, isDeleted, isDeepConversionSpec, isConfiguredStatus, day1, day2, day3,
        isCostTotalMin, isThousandDisplayPriceTotalMin, isConversionsCountTotalMin, isIncomeRoi1, isRegCost, isRegCostPla, isCpc
    } = props
    const [form] = Form.useForm()
    const [putUserList, setPutUserList] = useState<{ label: string, value: string }[]>([])

    const getPutUserList = useAjax((params) => getPutUserListApi(params))
    /**************************/

    useEffect(() => {
        if ((isPutUserId || isPutUserIdList) && initialState?.productType) {
            getPutUserList.run({ productType: initialState?.productType }).then(res => {
                if (res?.data) {
                    setPutUserList(Object.keys(res.data).map(key => ({ value: key, label: res.data[key] })))
                }
            })
        }
    }, [isPutUserId, isPutUserIdList, initialState?.productType])

    const onFinish = (data: any) => {
        console.log('更新了字段---->', data);
        onChange && onChange(data)
    }

    return <Form layout="inline" className='queryForm' initialValues={initialValues} name="basic" form={form} onFinish={onFinish}>
        <Row gutter={[0, 6]}>

            {/* 广告账号 */}
            {isAccountId && <Col><Form.Item name='accountId'>
                <Input placeholder="广告账号" style={{ width: 150 }} />
            </Form.Item></Col>}

            {/* 广告名称 */}
            {isAdgroupName && <Col><Form.Item name='adgroupName'>
                <Input placeholder="广告名称" style={{ width: 150 }} />
            </Form.Item></Col>}

            {/* 广告ID */}
            {isAdgroupId && <Col><Form.Item name='adgroupId'>
                <Input placeholder="广告ID" style={{ width: 150 }} />
            </Form.Item></Col>}

            {/* 创意名称 */}
            {isDynamicCreativeName && <Col><Form.Item name='dynamicCreativeName'>
                <Input placeholder="创意名称" style={{ width: 150 }} />
            </Form.Item></Col>}

            {/* 创意ID */}
            {isDynamicCreativeId && <Col><Form.Item name='dynamicCreativeId'>
                <Input placeholder="创意ID" style={{ width: 150 }} />
            </Form.Item></Col>}

            {/* 腾讯备注 */}
            {isMemo && <Col><Form.Item name='memo'>
                <Input placeholder="腾讯备注" style={{ width: 150 }} />
            </Form.Item></Col>}

            {/* 腾讯备注 */}
            {isRemark && <Col><Form.Item name='remark'>
                <Input placeholder="本地备注" style={{ width: 150 }} />
            </Form.Item></Col>}

            {/* 出价 */}
            {isCpaBid && <Col><Form.Item name='cpaBid'>
                <InputNumber placeholder="出价" style={{ width: 120 }} />
            </Form.Item></Col>}

            {/* 投手 */}
            {isPutUserId && <Col><Form.Item name='putUserId'>
                <Select
                    showSearch
                    allowClear
                    style={{ minWidth: 120 }}
                    placeholder={'投手'}
                    filterOption={(input, option) =>
                        (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    maxTagCount={1}
                    loading={getPutUserList.loading}
                    options={putUserList}
                />
            </Form.Item></Col>}

            {/* 投手多选 */}
            {isPutUserIdList && <Col><Form.Item name='putUserIdList'>
                <Select
                    showSearch
                    allowClear
                    mode="multiple"
                    style={{ minWidth: 120 }}
                    placeholder={'投手'}
                    filterOption={(input, option) =>
                        (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    maxTagCount={1}
                    loading={getPutUserList.loading}
                    options={putUserList}
                />
            </Form.Item></Col>}

            {/* 出价方式 */}
            {isPricing && <Col><Form.Item name='pricing'>
                <Select
                    showSearch
                    allowClear
                    style={{ width: 120 }}
                    placeholder={'出价方式'}
                    filterOption={(input, option) =>
                        (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    options={Object.keys(BID_MODE_ENUM).map(key => ({ label: BID_MODE_ENUM[key as keyof typeof BID_MODE_ENUM], value: key }))}
                />
            </Form.Item></Col>}


            {/* 广告状态 */}
            {isStatus && <Col><Form.Item name='status'>
                <Select
                    showSearch
                    allowClear
                    mode="multiple"
                    style={{ width: 120 }}
                    placeholder={'广告状态'}
                    filterOption={(input, option) =>
                        (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    options={Object.keys(AD_STATUS_ENUM).map(key => ({ label: AD_STATUS_ENUM[key as keyof typeof AD_STATUS_ENUM], value: key }))}
                />
            </Form.Item></Col>}

            {/* 营销目的 */}
            {isMarketingGoal && <Col><Form.Item name='marketingGoal'>
                <Select
                    showSearch
                    allowClear
                    style={{ width: 120 }}
                    placeholder={'营销目的'}
                    filterOption={(input, option) =>
                        (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    options={Object.keys(MARKETING_GOAL_ENUM).map(key => ({ label: MARKETING_GOAL_ENUM[key as keyof typeof MARKETING_GOAL_ENUM], value: key }))}
                />
            </Form.Item></Col>}

            {/* 推广内容资产类型 */}
            {isMarketingTargetType && <Col><Form.Item name='marketingTargetType'>
                <Select
                    showSearch
                    allowClear
                    style={{ width: 120 }}
                    placeholder={'推广内容资产类型'}
                    filterOption={(input, option) =>
                        (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    options={Object.keys(MARKETING_TARGET_TYPE_ENUM).map(key => ({ label: MARKETING_TARGET_TYPE_ENUM[key as keyof typeof MARKETING_TARGET_TYPE_ENUM], value: key }))}
                />
            </Form.Item></Col>}

            {/* 推广目标 */}
            {isPromotedObjectType && <Col><Form.Item name='promotedObjectType'>
                <Select
                    showSearch
                    allowClear
                    style={{ width: 120 }}
                    placeholder={'推广目标'}
                    filterOption={(input, option) =>
                        (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    options={Object.keys(PromotedObjectType).map(key => ({ label: PromotedObjectType[key as keyof typeof PromotedObjectType], value: key }))}
                />
            </Form.Item></Col>}

            {/* 推广目标名称 */}
            {isPromotedObjectName && <Col><Form.Item name='promotedObjectName'>
                <Input placeholder="推广目标名称" style={{ width: 150 }} />
            </Form.Item></Col>}

            {/* 优化目标 */}
            {isOptimizationGoal && <Col><Form.Item name='optimizationGoal'>
                <Select
                    showSearch
                    allowClear
                    style={{ width: 120 }}
                    placeholder={'优化目标'}
                    filterOption={(input, option) =>
                        (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    options={Object.keys(OPTIMIZATIONGOAL_ENUM).map(key => ({ label: OPTIMIZATIONGOAL_ENUM[key as keyof typeof OPTIMIZATIONGOAL_ENUM], value: key }))}
                />
            </Form.Item></Col>}

            {/* 投放模式 */}
            {isDeliveryMode && <Col><Form.Item name='deliveryMode'>
                <Select
                    placeholder='投放模式'
                    style={{ width: 120, minWidth: 120 }}
                    showSearch
                    allowClear
                    filterOption={(input: any, option: any) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }
                    mode="multiple"
                >
                    <Select.Option value={'DELIVERY_MODE_CUSTOMIZE'}>自定义创意</Select.Option>
                    <Select.Option value={'DELIVERY_MODE_COMPONENT'}>组件化创意</Select.Option>
                </Select>
            </Form.Item></Col>}

            {/* 是否删除 */}
            {isDeleted && <Col><Form.Item name='deleted'>
                <Select
                    showSearch
                    allowClear
                    style={{ width: 120 }}
                    placeholder={'是否删除？'}
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                </Select>
            </Form.Item></Col>}

            {/* 是否删除 */}
            {isDeepConversionSpec && <Col><Form.Item name='isDeepConversionSpec'>
                <Select
                    showSearch
                    allowClear
                    style={{ width: 120 }}
                    placeholder={'是否深度优化'}
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                </Select>
            </Form.Item></Col>}

            {/* 启用禁用状态 */}
            {isConfiguredStatus && <Col><Form.Item name='configuredStatus'>
                <Select
                    placeholder='启用禁用状态'
                    style={{ minWidth: 120 }}
                    showSearch
                    allowClear
                    filterOption={(input: any, option: any) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }
                    mode="multiple"
                >
                    <Select.Option value={'AD_STATUS_NORMAL'}>有效</Select.Option>
                    <Select.Option value={'AD_STATUS_SUSPEND'}>暂停</Select.Option>
                </Select>
            </Form.Item></Col>}

            {/* 日期选择框 */}
            {day1 && <Col><Form.Item name='day1'>
                {/* @ts-ignore */}
                <DatePicker.RangePicker style={{ width: 250 }} {...day1} />
            </Form.Item></Col>}

            {/* 日期选择框 */}
            {day2 && <Col><Form.Item name='day2'>
                {/* @ts-ignore */}
                <DatePicker.RangePicker style={{ width: 250 }} {...day2} />
            </Form.Item></Col>}

            {/* 日期选择框 */}
            {day3 && <Col><Form.Item name='day3'>
                {/* @ts-ignore */}
                <DatePicker.RangePicker style={{ width: 250 }} {...day3} />
            </Form.Item></Col>}

            {/* 最小总消耗 */}
            {isCostTotalMin && <Col><Form.Item name='costTotalMin'>
                <InputNumber placeholder="最小总消耗" style={{ width: 100 }} />
            </Form.Item></Col>}

            {/* 最低转化数 */}
            {isConversionsCountTotalMin && <Col><Form.Item name='conversionsCountTotalMin'>
                <InputNumber placeholder="最低转化数" style={{ width: 100 }} />
            </Form.Item></Col>}

            {/* 最低总千次曝光成本 */}
            {isThousandDisplayPriceTotalMin && <Col><Form.Item name='thousandDisplayPriceTotalMin'>
                <InputNumber placeholder="最低总千次曝光成本" style={{ width: 150 }} />
            </Form.Item></Col>}

            {/* 激活首日广告变现ROI */}
            {isIncomeRoi1 && <>
                <Col><Form.Item name='incomeRoi1Min'>
                    <InputNumber placeholder="激活首日广告变现ROI最小值" style={{ width: 200 }} />
                </Form.Item></Col>
                <Col><Form.Item name='incomeRoi1Max'>
                    <InputNumber placeholder="激活首日广告变现ROI最大值" style={{ width: 200 }} />
                </Form.Item></Col>
            </>}

            {/* 注册成本（平台上报+广告主上报 */}
            {isRegCost && <>
                <Col><Form.Item name='regCostMin'>
                    <InputNumber placeholder="注册成本最小值" style={{ width: 120 }} />
                </Form.Item></Col>
                <Col><Form.Item name='regCostMax'>
                    <InputNumber placeholder="注册成本最大值" style={{ width: 120 }} />
                </Form.Item></Col>
            </>}

            {/* 注册成本（平台上报+广告主上报 */}
            {isRegCostPla && <>
                <Col><Form.Item name='regCostPlaMin'>
                    <InputNumber placeholder="注册成本最小值(平台上报...)" style={{ width: 180 }} />
                </Form.Item></Col>
                <Col><Form.Item name='regCostPlaMax'>
                    <InputNumber placeholder="注册成本最大值(平台上报...)" style={{ width: 180 }} />
                </Form.Item></Col>
            </>}

            {/* 注册成本（平台上报+广告主上报 */}
            {isCpc && <>
                <Col><Form.Item name='cpcMin'>
                    <InputNumber placeholder="点击均价最小值" style={{ width: 120 }} />
                </Form.Item></Col>
                <Col><Form.Item name='cpcMax'>
                    <InputNumber placeholder="点击均价最大值" style={{ width: 120 }} />
                </Form.Item></Col>
            </>}

            <Col>
                <Space>
                    <Button type="primary" htmlType="submit">搜索</Button>
                    <Button onClick={() => form.resetFields()}>重置</Button>
                </Space>
            </Col>
        </Row>
    </Form>
}


export default React.memo(QueryFormNovel)