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

import { Card, Form, Input, InputNumber, Space, Switch, Tooltip } from "antd"
import React, { useContext } 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";


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

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

    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 goal = Form.useWatch(['deepConversionSpec', deepConversionType === 'DEEP_CONVERSION_BEHAVIOR' ? 'deepConversionBehaviorSpec' : 'deepConversionWorthSpec', 'goal'], form);
    /****************************************/


    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 (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>
        {(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}

            {((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='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)