ad-manage/src/pages/launchSystemNew/launchManage/localAd/ad/modal.tsx

import React, { useCallback } from 'react'
import { Modal, Form, Input, Divider, Select, Radio, DatePicker, Switch } from 'antd'
import { SiteSetEnum, BidModeEnum, OptimizationGoalEnum, BidStrategyEnum } from '@/services/launchAdq/enum'
import { ModalConfig } from '.'
import moment from 'moment';
const { RangePicker }: { RangePicker: any } = DatePicker;
let DatePickers: any = DatePicker
interface Props {
    title?: string,
    visible: boolean,
    PupFn: (arg: ModalConfig) => void,
    callback: (params: any) => void
}
function AdModal(props: Props) {
    let { visible, title, PupFn ,callback} = props
    const [form] = Form.useForm();
    let dateType = Form.useWatch('dateType', form)
    let bidMode = Form.useWatch('bidMode', form)
    let smartBidType = Form.useWatch('smartBidType', form)
    let autoAcquisitionEnabled = Form.useWatch('autoAcquisitionEnabled', form)
    // let siteSet = Form.useWatch('siteSet', form)

    // 确定事件
    const handleOk = useCallback(() => {
        form.validateFields().then(values => {
            let newValues = JSON.parse(JSON.stringify(values))
            if (newValues.dateType === '2') {
                newValues['beginDate'] = moment(newValues.date).format('YYYY-MM-DD')
            } else {
                newValues['beginDate'] = moment(newValues.date[0]).format('YYYY-MM-DD')
                newValues['endDate'] = moment(newValues.date[1]).format('YYYY-MM-DD')
            }
            delete newValues['dateType']
            delete newValues['date']
            newValues['timeSeries'] = Array(336).fill(1).join('')
            callback(newValues)
        })
        // PupFn({ visible: false })
    }, [form])
    return <Modal
        visible={visible}
        title={title + '广告'}
        onCancel={() => { PupFn({ visible: false }) }}
        onOk={handleOk}
        width={900}
    >
        <Form
            form={form}
            labelCol={{ span: 3 }}
            initialValues={
                {
                    bidMode: 'BID_MODE_OCPM',
                    dateType: '2',
                    bidStrategy: 'BID_STRATEGY_AVERAGE_COST',
                    timeSeries: '1',
                    smartBidType: 'SMART_BID_TYPE_CUSTOM',
                    autoAcquisitionEnabled: false,
                }
            }
        >
            {/* ============================================================基本信息============================================================= */}
            <Divider orientation='center'>基本信息</Divider>
            <Form.Item label={<strong>广告名称</strong>} name='adgroupName' rules={[{ required: true, message: '请输入广告名称!' }]}>
                <Input placeholder='广告名称' style={{ width: 300 }} />
            </Form.Item>
            <Form.Item label={<strong>广告版位</strong>} name='siteSet' rules={[{ required: true, message: '请输入选择广告版位！' }]}>
                <Select mode='multiple' style={{ width: 300 }}>
                    {
                        Object.keys(SiteSetEnum).map(key => {
                            return <Select.Option value={key} key={key}>{SiteSetEnum[key]}</Select.Option>
                        })
                    }
                </Select>
            </Form.Item>
            {/* ============================================================排期与出价============================================================= */}
            <Divider orientation='center'>排期与出价</Divider>
            <Form.Item label={<strong>投放日期</strong>} name='dateType'>
                <Radio.Group >
                    <Radio.Button value="1">选择开始与结束日期</Radio.Button>
                    <Radio.Button value="2">长期投放</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {/* 投放日期的不同展示不同的日期选择 */}
            {
                dateType === '1' ? <Form.Item name='date' rules={[{ required: true, message: '请选择日期' }]}>
                    <RangePicker style={{ marginLeft: 107 }}></RangePicker>
                </Form.Item> : <Form.Item name='date' style={{ marginLeft: 107 }} rules={[{ required: true, message: '请选择日期' }]}>
                    <DatePickers />
                </Form.Item>
            }
            <Form.Item label={<strong>投放时段</strong>}>
                <Radio.Group name='timeSeries' defaultValue='1'>
                    <Radio.Button value={'1'}>全天投放</Radio.Button>
                </Radio.Group>
            </Form.Item>
            <Form.Item label={<strong>出价方式</strong>} name='bidMode'>
                <Radio.Group >
                    {
                        Object.keys(BidModeEnum).map(key => {
                            return <Radio.Button value={key} key={key} disabled={!key.includes('CPM')}>{BidModeEnum[key]}</Radio.Button>
                        })
                    }

                </Radio.Group>
            </Form.Item>
            {/* 出价方式为OCPM才展示 */}
            {
                bidMode === 'BID_MODE_OCPM' && <>
                    <Form.Item label={<strong>优化目标</strong>} name='optimizationGoal' rules={[{ required: true, message: '请选择优化目标' }]}>
                        <Select style={{ width: 300 }} showSearch filterOption={(input, option) =>
                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                        }>
                            {
                                Object.keys(OptimizationGoalEnum).map(key => {
                                    return <Select.Option value={key} key={key}>{OptimizationGoalEnum[key]}</Select.Option>
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item label={<strong>出价类型</strong>} name='smartBidType'>
                        <Radio.Group >
                            <Radio.Button value="SMART_BID_TYPE_CUSTOM">手动出价</Radio.Button>
                            <Radio.Button value="SMART_BID_TYPE_SYSTEMATIC">自动出价</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label={<strong>出价策略</strong>} name='bidStrategy'>
                        <Radio.Group >
                            {
                                Object.keys(BidStrategyEnum).map(key => {
                                    return <Radio.Button value={key} key={key} disabled={smartBidType === 'SMART_BID_TYPE_SYSTEMATIC' && key === 'BID_STRATEGY_PRIORITY_CAP_COST'}> {BidStrategyEnum[key]}</Radio.Button>
                                })
                            }
                        </Radio.Group>
                    </Form.Item>
                </>
            }
            {/* 出价类型为手动出价才展示 */}
            {
                smartBidType !== 'SMART_BID_TYPE_SYSTEMATIC' && <>
                    <Form.Item label={<strong>出价</strong>} name='bidAmount' rules={[{ required: true, message: '请输入价格' }]}>
                        <Input placeholder='输入价格 元/千次曝光' style={{ width: 300 }} />
                    </Form.Item>
                    {/* 当版位选择大于1时才出现 */}
                    {/* {siteSet?.length > 1 &&<Form.Item label={<strong>分版位出价</strong>} name='bidAdjustment'>
                        <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                    </Form.Item>} */}
                    <Form.Item label={<strong>一键起量</strong>} name='autoAcquisitionEnabled' valuePropName="checked">
                        <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                    </Form.Item>
                    {/* 一键起量开启时才出现 */}
                    {autoAcquisitionEnabled && <Form.Item label={<strong>起量预算</strong>} name='autoAcquisitionBudget' rules={[{ required: true, message: '请输入起量预算' }]}>
                        <Input placeholder='起量预算' style={{ width: 300 }} />
                    </Form.Item>}
                </>
            }
            <Form.Item label={<strong>广告日预算</strong>} name='dailyBudget'>
                <Input placeholder='不填默认为不限' style={{ width: 300 }} />
            </Form.Item>
        </Form>
    </Modal >
}
export default AdModal