ad-manage/src/pages/launchSystemV3/tencentAdPutIn/create/Ad/adgroupsPrice.tsx

import { Card, Form, Input, InputNumber, Space, Switch, Tooltip } from "antd"
import React, { useContext, useEffect, useState } from "react"
import { DispatchAd } from "./newCreateAd";
import New1Radio from "@/pages/launchSystemV3/components/New1Radio";
import { BID_ALL_OCATION_MODE, BID_MODE_ENUM, BID_SCENE_NORMAL_ENUM, OPTIMIZATIONGOAL_ENUM, ROI_ALL_OCATION_MODE, SMART_BID_TYPE_ENUM } from "../../const";
import { QuestionCircleFilled } from "@ant-design/icons";
import { toCamelCase } from "@/utils/utils";
import style from '../index.less'


/**
 * 出价与预算
 * @returns 
 */
const AdgroupsPrice: React.FC = () => {

    /****************************************/
    const { form, setOGPparams, OGPParams, putInType, smartDeliveryGoalRules } = useContext(DispatchAd)!;

    const [smartDeliveryGoalSpecRules, setSmartDeliveryGoalSpecRules] = useState<PULLIN.SmartDeliveryGoalSpecProps[]>([])
    const [smartDeliveryGoalSpecName, setSmartDeliveryGoalSpecName] = useState<string>('spec')

    const siteSet = Form.useWatch('siteSet', form)
    const bidMode = Form.useWatch('bidMode', form)
    const bidAllocationMode = Form.useWatch('bidAllocationMode', form)
    const roiAllocationMode = Form.useWatch(['deepConversionSpec', 'deepConversionWorthSpec', 'roiAllocationMode'], form)
    const optimizationGoal = Form.useWatch('optimizationGoal', form)
    const smartBidType = Form.useWatch('smartBidType', form)
    const bidScene = Form.useWatch('bidScene', form)
    const autoAcquisitionEnabled = Form.useWatch('autoAcquisitionEnabled', form)
    const automaticSiteEnabled = Form.useWatch('automaticSiteEnabled', form)
    const deepConversionType = Form.useWatch(['deepConversionSpec', 'deepConversionType'], form);
    const deliveryMethod = Form.useWatch('deliveryMethod', form);
    const smartDeliverySceneSpec = Form.useWatch('smartDeliverySceneSpec', form);
    const goal = Form.useWatch(['deepConversionSpec', deepConversionType === 'DEEP_CONVERSION_BEHAVIOR' ? 'deepConversionBehaviorSpec' : 'deepConversionWorthSpec', 'goal'], form);
    /****************************************/

    useEffect(() => {
        if (deliveryMethod === 'SMART' && smartDeliveryGoalRules?.length && smartDeliverySceneSpec?.smartDeliveryGoal) {
            const rule = smartDeliveryGoalRules.find(item => item.value === smartDeliverySceneSpec.smartDeliveryGoal)
            const smartDeliveryGoalSpecRules = rule?.parameter_definitions?.smart_delivery_goal_spec
            setSmartDeliveryGoalSpecRules(smartDeliveryGoalSpecRules || [])
            const smartDeliveryGoalSpecName = toCamelCase(rule?.smart_delivery_goal_spec_name || "")
            setSmartDeliveryGoalSpecName(smartDeliveryGoalSpecName)
        }
    }, [smartDeliveryGoalRules, smartDeliverySceneSpec, deliveryMethod])

    return <Card
        title={<strong style={{ fontSize: 18 }}>出价与预算</strong>}
        className="cardResetCss"
    >
        <Form.Item
            label={<Space>
                <strong>计费方式</strong>
                <Tooltip title={`设置了优化目标CPM、CPC、CPA不可选`}>
                    <QuestionCircleFilled />
                </Tooltip>
            </Space>}
            name='bidMode'
            rules={[{ required: true, message: '请选择计费方式' }]}
        >
            <New1Radio
                data={Object.keys(BID_MODE_ENUM).filter(key => {
                    if (deliveryMethod === 'SMART') return key === 'BID_MODE_OCPM';
                    if (siteSet?.some((name: string) => ['SITE_SET_CHANNELS', 'SITE_SET_MOMENTS'].includes(name)) || automaticSiteEnabled) {
                        return key === 'BID_MODE_OCPM' || key === 'BID_MODE_CPM'
                    } else {
                        return true
                    }
                })?.map(key => ({ label: BID_MODE_ENUM[key as keyof typeof BID_MODE_ENUM], value: key, disabled: optimizationGoal && ['BID_MODE_CPM', 'BID_MODE_CPC', 'BID_MODE_CPA'].includes(key) ? true : false }))}
                onChange={(e) => {
                    // form.setFieldsValue({ siteSet: defaultSiteSet })
                    setOGPparams({ ...OGPParams, automaticSiteEnabled: e, bidMode: e as string })
                    if (e === "BID_MODE_CPM" || e === "BID_MODE_CPC") {
                        form.setFieldsValue({
                            optimizationGoal: null,
                            smartBidType: null,
                            bidScene: null,
                            // bidAmount:null,
                            bidStrategy: null,
                            autoAcquisitionEnabled: false,
                            autoAcquisitionBudget: null,
                            dailyBudget: null,
                        })
                    } else {
                        form.setFieldsValue({
                            optimizationGoal: "OPTIMIZATIONGOAL_ECOMMERCE_ORDER",
                            smartBidType: "SMART_BID_TYPE_CUSTOM",
                            bidScene: "BID_SCENE_NORMAL_AVERAGE",
                            bidAmount: '1000',
                            bidStrategy: "BID_STRATEGY_TARGET_COST",
                            autoAcquisitionEnabled: false,
                            autoAcquisitionBudget: null,
                            dailyBudget: null,
                        })
                    }
                }}
            />
        </Form.Item>

        {deliveryMethod === 'NORMAL' ? <>
            {/* 常规3.0 */}
            {(bidMode === 'BID_MODE_OCPM' || bidMode === 'BID_MODE_OCPC') && <>
                {putInType === 'GAME' ? <Form.Item label={<strong>出价场景</strong>} name='bidScene' rules={[{ required: true, message: '请选择出价场景' }]}>
                    <New1Radio data={Object.keys(BID_SCENE_NORMAL_ENUM).map(key => ({ label: BID_SCENE_NORMAL_ENUM[key as keyof typeof BID_SCENE_NORMAL_ENUM], value: key }))} />
                </Form.Item> : <Form.Item label={<strong>出价类型</strong>} name='smartBidType' rules={[{ required: true, message: '请选择出价类型' }]}>
                    <New1Radio data={Object.keys(SMART_BID_TYPE_ENUM).map(key => ({ label: SMART_BID_TYPE_ENUM[key as keyof typeof SMART_BID_TYPE_ENUM], value: key }))} />
                </Form.Item>}
            </>}

            {(putInType === 'GAME' ? bidScene !== 'BID_SCENE_NORMAL_MAX' : smartBidType !== 'SMART_BID_TYPE_SYSTEMATIC') && <>
                <Form.Item label={<strong>出价分配方式</strong>} name='bidAllocationMode' rules={[{ required: true, message: '请选择出价分配方式' }]}>
                    <New1Radio data={BID_ALL_OCATION_MODE} />
                </Form.Item>

                {bidAllocationMode === 1 ? <Form.Item label={<strong>出价</strong>} name='bidAmount' rules={[{ required: true, message: '请输入价格' }]}>
                    <Input
                        placeholder={`请输入价格`}
                        style={{ width: 480 }}
                        suffix={`元/${optimizationGoal ? OPTIMIZATIONGOAL_ENUM[optimizationGoal as keyof typeof OPTIMIZATIONGOAL_ENUM] : ['BID_MODE_OCPM', 'BID_MODE_OCPC'].includes(bidMode) ? '千次曝光' : '点击'}`}
                    />
                </Form.Item> : <Form.Item label={<strong>{bidAllocationMode === 2 ? '随机出价' : '阶梯出价'}</strong>} required>
                    <Space>
                        <Form.Item name='bidAmountMin' rules={[{ required: true, message: '请输入价格最小值' }]} noStyle>
                            <Input
                                placeholder={`请输入价格最小值`}
                                style={{ width: 200 }}
                            />
                        </Form.Item>
                        <span>-</span>
                        <Form.Item name='bidAmountMax' rules={[{ required: true, message: '请输入价格最大值' }]} noStyle>
                            <Input
                                placeholder={`请输入价格最大值`}
                                style={{ width: 200 }}
                            />
                        </Form.Item>
                        <span>元/{optimizationGoal ? OPTIMIZATIONGOAL_ENUM[optimizationGoal as keyof typeof OPTIMIZATIONGOAL_ENUM] : ['BID_MODE_OCPM', 'BID_MODE_OCPC'].includes(bidMode) ? '千次曝光' : '点击'}</span>
                    </Space>
                </Form.Item>}


                {deepConversionType === 'DEEP_CONVERSION_BEHAVIOR' ? <>
                    <Form.Item label={<strong>深度目标出价</strong>} name={['deepConversionSpec', 'deepConversionBehaviorSpec', 'bidAmount']} rules={[{ required: true, message: '请输入深度目标出价' }]}>
                        <Input style={{ width: 480 }} suffix={`元/${OPTIMIZATIONGOAL_ENUM[goal as keyof typeof OPTIMIZATIONGOAL_ENUM] || '优化目标'}`} placeholder={`请输入深度目标出价，范围0.1~10000`} />
                    </Form.Item>
                </> :
                    deepConversionType === 'DEEP_CONVERSION_WORTH' ? <>
                        <Form.Item label={<strong>ROI分配方式</strong>} name={['deepConversionSpec', 'deepConversionWorthSpec', 'roiAllocationMode']} rules={[{ required: true, message: '请选择ROI分配方式' }]}>
                            <New1Radio data={ROI_ALL_OCATION_MODE} />
                        </Form.Item>
                        {roiAllocationMode === 1 ? <Form.Item
                            label={<strong>期望ROI</strong>}
                            name={['deepConversionSpec', 'deepConversionWorthSpec', 'expectedRoi']}
                            rules={[
                                { required: true, message: '请输入期望ROI' },
                                { type: 'number', ...(goal === 'GOAL_1DAY_MONETIZATION_ROAS' ? { min: 0.001, max: 50, message: '范围0.001~50' } : { min: 0.001, max: 1000, message: '范围0.001~1000' }) },
                                {
                                    validator: (_: any, value: string) => {
                                        if (!value || /^\d+(\.\d{0,3})?$/.test(value)) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('请输入最多三位小数'));
                                    }
                                }
                            ]}
                        >
                            <InputNumber style={{ width: 480 }} placeholder={`期望ROI目标范围${goal === 'GOAL_1DAY_MONETIZATION_ROAS' ? '0.001~50' : '0.001~1000'}，输入0.05，表示ROI目标为5%`} />
                        </Form.Item> : <Form.Item label={<strong>{roiAllocationMode === 2 ? '随机ROI' : '阶梯ROI'}</strong>} required>
                            <Space>
                                <Form.Item
                                    name={['deepConversionSpec', 'deepConversionWorthSpec', 'expectedRoiMin']}
                                    rules={[
                                        { required: true, message: '请输入期望ROI最小值' },
                                        { type: 'number', ...(goal === 'GOAL_1DAY_MONETIZATION_ROAS' ? { min: 0.001, max: 50, message: '范围0.001~50' } : { min: 0.001, max: 1000, message: '范围0.001~1000' }) },
                                        {
                                            validator: (_: any, value: string) => {
                                                if (!value || /^\d+(\.\d{0,3})?$/.test(value)) {
                                                    return Promise.resolve();
                                                }
                                                return Promise.reject(new Error('请输入最多三位小数'));
                                            }
                                        }
                                    ]}
                                    noStyle
                                >
                                    <InputNumber
                                        placeholder={`请输入期望ROI最小值`}
                                        style={{ width: 228 }}
                                    />
                                </Form.Item>
                                <span>-</span>
                                <Form.Item
                                    name={['deepConversionSpec', 'deepConversionWorthSpec', 'expectedRoiMax']}
                                    rules={[
                                        { required: true, message: '请输入期望ROI最大值' },
                                        { type: 'number', ...(goal === 'GOAL_1DAY_MONETIZATION_ROAS' ? { min: 0.001, max: 50, message: '范围0.001~50' } : { min: 0.001, max: 1000, message: '范围0.001~1000' }) },
                                        {
                                            validator: (_: any, value: string) => {
                                                if (!value || /^\d+(\.\d{0,3})?$/.test(value)) {
                                                    return Promise.resolve();
                                                }
                                                return Promise.reject(new Error('请输入最多三位小数'));
                                            }
                                        }
                                    ]}
                                    noStyle
                                >
                                    <InputNumber
                                        placeholder={`请输入期望ROI最大值`}
                                        style={{ width: 228 }}
                                    />
                                </Form.Item>
                            </Space>
                        </Form.Item>}
                    </> : null}
                {optimizationGoal === 'OPTIMIZATIONGOAL_24H_FIRSTPAY' && <Form.Item
                    style={{ marginBottom: 10 }}
                    label={<Space>
                        <strong>一方数据跑量加强</strong>
                        <Tooltip title={<div>
                            <p>基于您规范回传的一方数据，系统将其作为补充样本针对性优化OCPX模型，并助力提升广告投放拿量能力</p>
                        </div>}>
                            <QuestionCircleFilled />
                        </Tooltip>
                    </Space>}
                    name='ecomPkamSwitch'
                    valuePropName="checked"
                    help="注意账号需要开通权限"
                >
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                </Form.Item>}
                {((bidMode === 'BID_MODE_OCPM' || bidMode === 'BID_MODE_OCPC') && (putInType === 'GAME' ? bidScene !== 'BID_SCENE_NORMAL_MAX' : smartBidType !== 'SMART_BID_TYPE_SYSTEMATIC')) && <>
                    <Form.Item
                        style={{ marginBottom: 10 }}
                        label={<Space>
                            <strong>一键起量</strong>
                            <Tooltip title={<div>
                                <p>1. 一键起量原理：给该广告提供一笔起量预算，系统会在 6 小时内快速花完预算，帮助广告激进探索，获取更多曝光，期间转化成本可能高于预期；</p>
                                <p>
                                    <span>2. 一键起量注意事项：</span><br />
                                    探索中任何原因导致广告暂停播放，都会导致起量中止，且恢复播放后也不会再继续探索； 一键起量期间产生的消耗不赔付，但转化计入赔付门槛判断；你可以在该广告的一键起量状态中止或结束时，重新设置起量预算，开始一次新的起量周期
                                </p>
                                <p>
                                    <span>点击查看</span><a href="https://e.qq.com/ads/helpcenter/detail?cid=3532&pid=2004" target="__blank">赔付规则</a><br />
                                    <span>点击了解</span><a href="https://e.qq.com/ads/helpcenter/detail?cid=3532&pid=2005" target="__blank">一键起量</a>
                                </p>
                            </div>}>
                                <QuestionCircleFilled />
                            </Tooltip>
                        </Space>}
                        name='autoAcquisitionEnabled'
                        valuePropName="checked"
                    >
                        <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                    </Form.Item>
                    {/* 一键起量开启时才出现 */}
                    {autoAcquisitionEnabled && <Form.Item
                        name='autoAcquisitionBudget'
                        rules={[{ required: true, message: '请输入起量预算' }]}
                        help={<div>
                            <span>1. 一键起量期间产生的消耗不赔付，但转化计入赔付门槛判断</span><br />
                            <span>2. 一键起量可能导致转化成本高于预期，且起量结束后不一定能持续消耗</span>
                        </div>}
                    >
                        <Input placeholder='请输入起量预算，建议设置为出价的10倍，范围 200~100000 元，不能低于出价' style={{ width: 560 }} suffix="元" />
                    </Form.Item>}
                </>}
            </>}
        </> : <>
            {/* 智投 */}
            <Form.Item label={<strong>出价分配方式</strong>} name='bidAllocationMode' rules={[{ required: true, message: '请选择出价分配方式' }]}>
                <New1Radio data={BID_ALL_OCATION_MODE} />
            </Form.Item>
            <Form.Item label={<strong>投放目标出价</strong>} required>
                <Card bordered className="cardResetCss newCss" bodyStyle={{ padding: 0, backgroundColor: '#fafafa' }}>
                    {smartDeliveryGoalSpecRules.map((item, index) => {
                        return <div className={style.newSpace} key={index}>
                            <div className={style.newSpace_top}>
                                <div className={style.newSpace_title}>{item.title}</div>
                                {bidAllocationMode === 1 ? <Form.Item
                                    style={{ marginBottom: 0 }}
                                    name={['smartDeliverySceneSpec', 'smartDeliveryGoalSpec', smartDeliveryGoalSpecName, toCamelCase(item.field_name)]}
                                    rules={[
                                        { required: item.required, message: `请输入${item.title}` },
                                        {
                                            validator: (_: any, value: string) => {
                                                if (value === undefined || value === null || value === '') return Promise.resolve();
                                                const num = parseFloat(value);
                                                if (isNaN(num)) return Promise.reject(new Error('请输入有效的数字'));
                                                if (num < item.min || num > item.max) return Promise.reject(new Error(`范围${item.min}~${item.max}`));
                                                return Promise.resolve();
                                            }
                                        },
                                        {
                                            validator: (_: any, value: string) => {
                                                const regex = new RegExp(`^\\d+(\\.\\d{0,${item.decimal_length}})?$`);
                                                if (!value || regex.test(value)) {
                                                    return Promise.resolve();
                                                }
                                                return Promise.reject(new Error(`请输入最多${item.decimal_length}位小数`));
                                            }
                                        }
                                    ]}
                                >
                                    <Input style={{ width: 480 }} placeholder={item.placeholder} suffix={item.unitTips} />
                                </Form.Item> : <Space>
                                    <Form.Item
                                        style={{ marginBottom: 0 }}
                                        name={['smartDeliverySceneSpec', 'smartDeliveryGoalSpec', smartDeliveryGoalSpecName, toCamelCase(item.field_name + '_min')]}
                                        rules={[
                                            { required: item.required, message: `请输入${item.title}最小值` },
                                            {
                                                validator: (_: any, value: string) => {
                                                    if (value === undefined || value === null || value === '') return Promise.resolve();
                                                    const num = parseFloat(value);
                                                    if (isNaN(num)) return Promise.reject(new Error('最小值请输入有效的数字'));
                                                    if (num < item.min || num > item.max) return Promise.reject(new Error(`最小值范围${item.min}~${item.max}`));
                                                    return Promise.resolve();
                                                }
                                            },
                                            {
                                                validator: (_: any, value: string) => {
                                                    const regex = new RegExp(`^\\d+(\\.\\d{0,${item.decimal_length}})?$`);
                                                    if (!value || regex.test(value)) {
                                                        return Promise.resolve();
                                                    }
                                                    return Promise.reject(new Error(`最小值请输入最多${item.decimal_length}位小数`));
                                                }
                                            }
                                        ]}
                                        noStyle
                                    >
                                        <Input style={{ width: 240 }} placeholder={item.placeholder + '最小值'} />
                                    </Form.Item>
                                    <span>-</span>
                                    <Form.Item
                                        style={{ marginBottom: 0 }}
                                        name={['smartDeliverySceneSpec', 'smartDeliveryGoalSpec', smartDeliveryGoalSpecName, toCamelCase(item.field_name + '_max')]}
                                        rules={[
                                            { required: item.required, message: `请输入${item.title}最大值` },
                                            {
                                                validator: (_: any, value: string) => {
                                                    if (value === undefined || value === null || value === '') return Promise.resolve();
                                                    const num = parseFloat(value);
                                                    if (isNaN(num)) return Promise.reject(new Error('最大值请输入有效的数字'));
                                                    if (num < item.min || num > item.max) return Promise.reject(new Error(`最大值范围${item.min}~${item.max}`));
                                                    return Promise.resolve();
                                                }
                                            },
                                            {
                                                validator: (_: any, value: string) => {
                                                    const regex = new RegExp(`^\\d+(\\.\\d{0,${item.decimal_length}})?$`);
                                                    if (!value || regex.test(value)) {
                                                        return Promise.resolve();
                                                    }
                                                    return Promise.reject(new Error(`最大值请输入最多${item.decimal_length}位小数`));
                                                }
                                            }
                                        ]}
                                        noStyle
                                    >
                                        <Input style={{ width: 240 }} placeholder={item.placeholder + '最大值'} />
                                    </Form.Item>
                                    <span>{item.unitTips}</span>
                                </Space>}
                            </div>
                        </div>
                    })}
                </Card>
            </Form.Item>
        </>}

        <Form.Item label={<strong>广告日预算</strong>} name='dailyBudget' rules={[{ required: (smartBidType === 'SMART_BID_TYPE_SYSTEMATIC' || bidScene === 'BID_SCENE_NORMAL_MAX'), message: '请输入广告日预算' }]}>
            <Input placeholder={`广告日预算${(smartBidType === 'SMART_BID_TYPE_SYSTEMATIC' || bidScene === 'BID_SCENE_NORMAL_MAX') ? '' : ', 不填默认为不限'}`} style={{ width: 480 }} suffix="元/天" />
        </Form.Item>

    </Card>
}

export default React.memo(AdgroupsPrice)