ad-manage/src/pages/launchSystemNew/launchManage/createAd/ad/index.tsx

import { CreateAdProps } from '@/services/launchAdq/createAd'
import { Col, Empty, Space, Spin, Tooltip } from 'antd'
import React, { useCallback, useState } from 'react'
import style from '../index.less'
import AdgroupsCol from "../adgroupsCol"
import { BaseResult } from '@ahooksjs/use-request/lib/types'
import AdModal from "../../../components/adModal"
import WeChatAdModal from "./modal/wechat"
import LeadAdModal from "./modal/leadAd"
import { useAjax } from '@/Hook/useAjax'
import { getOptimizationGoalPermissions } from '@/services/launchAdq/global'
type Props = {
    queryForm: Partial<CreateAdProps>,
    setQueryForm: React.Dispatch<React.SetStateAction<Partial<CreateAdProps>>>,
    getSysAdgroups: BaseResult<any, any>,
    clearData: () => void
}
export interface ModalConfig {
    visible: boolean;
    title?: string;
    type?: 'add' | 'look' | 'edit',
    dataInfo?: null
}
function Ad(props: Props) {
    let { queryForm, getSysAdgroups, setQueryForm, clearData } = props
    const queryOptimizationGoalPermissions = useAjax((params) => getOptimizationGoalPermissions(params))
    const [adVisible, setAdVisible] = useState<boolean>(false) // 选择广告弹窗控制
    const [adModalConfig, setAdModalConfig] = useState<ModalConfig>({//新建广告弹窗
        visible: false,
        type: 'add'
    })
    // 设置变量
    const handleAdModalConfig = useCallback((arg: ModalConfig) => {
        setAdModalConfig({ ...adModalConfig, ...arg })
    }, [adModalConfig])
    // 获取广告详情
    const getInfo = useCallback((sysAdgroupId) => {
        getSysAdgroups.run(sysAdgroupId).then(res => {
            setQueryForm({
                ...queryForm,
                sysAdgroupId,
                sysAdcreativeId: undefined,//清空创意ID
                taskMediaMaps: [],//清空创意
                sysAdgroup: { ...res, isTemplate: false },
            });
            setAdVisible(false);
            clearData()
        })
    }, [queryForm])
    return <Col className={style.conRightBorder}>
        <div className={style.top}>
            广告基本信息
            {queryForm.sysAdgroup && <a onClick={() => {
                setQueryForm({ ...queryForm, sysAdgroup: undefined, sysAdgroupId: undefined, sysAdcreativeId: undefined, pageList: [], taskMediaMaps: [] })
            }}>清空</a>}
        </div>
        <div className={style.center}>
            <Spin spinning={getSysAdgroups.loading}>
                <div className={style.centerContent}>
                    {queryForm?.sysAdgroup ? <AdgroupsCol data={queryForm?.sysAdgroup} /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                </div>
            </Spin>
        </div>
        <div className={style.bottom}>
            <Space size={20}>
                {queryForm?.promotedObjectType ? <span onClick={() => { setAdVisible(true) }}>{queryForm?.sysAdgroup ? '重选广告' : '选择广告'}</span> : <Tooltip title="请先选择推广目标">
                    <span>选择广告</span>
                </Tooltip>}
                {queryForm?.promotedObjectType ? <span onClick={() => { handleAdModalConfig(queryForm?.sysAdgroup ? { visible: true, type: 'edit' } : { visible: true, type: 'add' }) }}>{queryForm?.sysAdgroup ? '编辑广告' : '新建广告'}</span> : <Tooltip title="请先选择推广目标">
                    <span>新建广告</span>
                </Tooltip>}
            </Space>
        </div>
        {/* 选择广告 */}
        {adVisible && <AdModal visible={adVisible} onClose={() => setAdVisible(false)} promotedObjectType={queryForm.promotedObjectType as string} onChange={getInfo} sysAdgroupId={queryForm?.sysAdgroupId} />}
        {/* 微信公众号广告弹窗 */}
        {adModalConfig.visible && queryForm.promotedObjectType === "PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT" && <WeChatAdModal visible={adModalConfig.visible} PupFn={handleAdModalConfig} callback={(values) => {
            let siteSet = JSON.parse(JSON.stringify(values?.siteSet || []))
            let newQueryForm = { ...queryForm, sysAdgroup: values, sysAdcreativeId: undefined }
            if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps?.length > 0) {
                let tSiteSet = JSON.parse(JSON.stringify(queryForm?.taskMediaMaps[0]?.sysAdcreative?.siteSet || []))
                if (!(siteSet.length === tSiteSet.length && siteSet.filter((t: any) => !tSiteSet.includes(t)))) {
                    newQueryForm.taskMediaMaps = []
                }
            }
            setQueryForm(newQueryForm); setAdVisible(false); clearData()
            handleAdModalConfig({ visible: false, dataInfo: null, type: 'add' })
        }} type={adModalConfig.type} dataInfo={queryForm.sysAdgroup} queryForm={queryForm} ajax={queryOptimizationGoalPermissions} />}
        {/* 收集线索广告弹窗 */}
        {adModalConfig.visible && queryForm.promotedObjectType === "PROMOTED_OBJECT_TYPE_LEAD_AD" && <LeadAdModal visible={adModalConfig.visible} PupFn={handleAdModalConfig} callback={(values) => {
            let siteSet = JSON.parse(JSON.stringify(values?.siteSet || []))
            let newQueryForm = { ...queryForm, sysAdgroup: values, sysAdcreativeId: undefined }
            if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps?.length > 0) {
                let tSiteSet = JSON.parse(JSON.stringify(queryForm?.taskMediaMaps[0]?.sysAdcreative?.siteSet || []))
                if (!(siteSet.length === tSiteSet.length && siteSet.filter((t: any) => !tSiteSet.includes(t)))) {
                    newQueryForm.taskMediaMaps = []
                }
            }
            setQueryForm(newQueryForm); setAdVisible(false); clearData()
            handleAdModalConfig({ visible: false, dataInfo: null, type: 'add' })
        }} type={adModalConfig.type} dataInfo={queryForm.sysAdgroup} queryForm={queryForm} ajax={queryOptimizationGoalPermissions} />}
    </Col>
}
export default Ad