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

import React, { useCallback, useState } from 'react'
import { Button, Col, Space, Spin, Tabs, Tooltip, } from 'antd'
import style from '../index.less'
import CreativeModal from "../../../components/creativeModal"
import { CreateAdProps } from '@/services/launchAdq/createAd'
import { BaseResult } from '@ahooksjs/use-request/lib/types'
import { ModalConfig } from '../ad'
import AdcreativeCol from "../adcreativeCol"
import CreativePup from './modal'
import { CopyOutlined } from '@ant-design/icons'

type Props = {
    queryForm: Partial<CreateAdProps>,
    setQueryForm: React.Dispatch<React.SetStateAction<Partial<CreateAdProps>>>,
    getSysAdgroups: BaseResult<any, any>,
    getSysAdcreative: BaseResult<any, any>,
    clearData: () => void,
    targetKey: string,
    page_checked: boolean,
    set_targetKey: (key: string) => void
}
function Creative(props: Props) {
    let { queryForm, getSysAdgroups, getSysAdcreative, setQueryForm, clearData, targetKey, set_targetKey } = props
    const [adModalConfig, setAdModalConfig] = useState<ModalConfig>({//新建广告弹窗
        visible: false,
        type: 'add'
    })
    const [creativeVisible, setCreativeVisible] = useState<boolean>(false) // 选择创意弹窗控制

    // 设置变量
    const handleAdModalConfig = useCallback((arg: ModalConfig) => {
        setAdModalConfig({ ...adModalConfig, ...arg })
    }, [adModalConfig])

    // 获取创意详情
    const getInfo = useCallback((sysAdcreativeId) => {
        getSysAdcreative.run(sysAdcreativeId).then(res => {
            let arr = queryForm.taskMediaMaps || []
            let { createTime, ...params } = res
            arr[targetKey] = { sysAdcreative: { ...params, isTemplate: false,sysAdcreativeId:params.id } }
            setQueryForm({ ...queryForm, sysAdcreativeId, taskMediaMaps: arr });
            setCreativeVisible(false);
            clearData()
        })
    }, [queryForm, targetKey])

    // tabs新增和删除
    const onEdit = useCallback((targetKey: string | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, action: 'add' | 'remove') => {
        if (queryForm.taskMediaMaps) {
            if (action === 'add') {
                setQueryForm({ ...queryForm, taskMediaMaps: [...queryForm.taskMediaMaps, { sysAdcreative: '' }] })
                set_targetKey(queryForm.taskMediaMaps.length.toString())
            } else {
                let arr = queryForm.taskMediaMaps || []
                let adqPageArr = queryForm.adqPageList || []
                let pageArr = queryForm.pageList || []
                if (arr.length > 1) {
                    arr = arr.filter((item, index) => index.toString() !== targetKey)
                    adqPageArr = adqPageArr?.filter((item, index) => index.toString() !== targetKey)
                    pageArr = pageArr?.filter((item, index) => index.toString() !== targetKey)
                } else {
                    arr = [{ sysAdcreative: '' }]
                    adqPageArr = []
                    pageArr = []
                }
                set_targetKey((Number(targetKey) === 0 ? 0 : Number(targetKey) - 1).toString())
                setQueryForm({ ...queryForm, taskMediaMaps: arr, pageList: pageArr, adqPageList: adqPageArr })
            }
        }
    }, [queryForm])

    // 复制当前创意
    const copyBefore = () => {
        if (queryForm.taskMediaMaps) {
            let taskMediaMaps = queryForm.taskMediaMaps
            let taskMediaMap = queryForm.taskMediaMaps[targetKey]
            taskMediaMaps.push(JSON.parse(JSON.stringify(taskMediaMap)))
            setQueryForm({ ...queryForm, taskMediaMaps: taskMediaMaps })
        }
    }

    return <Col span={12} className={style.conRightBorder}>
        <div className={style.top}>创意基本信息
            {queryForm.taskMediaMaps && queryForm.taskMediaMaps?.length > 0 && <a onClick={() => {
                setQueryForm({ ...queryForm, taskMediaMaps: [], sysAdcreativeId: undefined, pageList: [], adqPageList: [] })
                set_targetKey('0')
            }}>全部清空</a>}
        </div>
        <div className={style.center}>
            <Tabs
                size={'small'}
                onEdit={onEdit}
                type="editable-card"
                activeKey={targetKey}
                tabBarExtraContent={queryForm.taskMediaMaps?.[targetKey]?.sysAdcreative ? {
                    right: <Tooltip title="复制当前创意">
                        <Button icon={<CopyOutlined />} style={{ marginLeft: 4 }} type="link" onClick={copyBefore}></Button>
                    </Tooltip>
                } : {}}
                onChange={(key) => { set_targetKey(key) }}
            >
                {queryForm?.taskMediaMaps?.map((item, index) => {
                    return <Tabs.TabPane key={index} tab={'创意' + (index + 1)}>
                        <Spin spinning={getSysAdcreative.loading}>
                            <div className={style.centerContent}>
                                {item?.sysAdcreative && <AdcreativeCol data={item.sysAdcreative} />}
                            </div>
                        </Spin>
                    </Tabs.TabPane>
                })}
            </Tabs>
        </div>
        <div className={style.bottom}>
            <Space size={20}>
                {queryForm?.sysAdgroup ? <>
                    <span onClick={() => { setCreativeVisible(true) }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative ? '重选创意' : '选择创意'}</span>
                </> : <Tooltip title="请先设置广告">
                    <span>选择创意</span>
                </Tooltip>}
                {queryForm?.sysAdgroup ? <>
                    <span onClick={() => { handleAdModalConfig(queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative ? { visible: true, type: 'edit' } : { visible: true, type: 'add' }) }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative ? '编辑创意' : '新建创意'}</span>
                </> : <Tooltip title="请先设置广告">
                    <span>新建创意</span>
                </Tooltip>}
            </Space>
        </div>
        {/* 选择创意 */}
        {creativeVisible && <CreativeModal siteSet={getSysAdgroups?.data?.siteSet} visible={creativeVisible} onClose={() => setCreativeVisible(false)} onChange={getInfo} sysAdcreativeId={queryForm?.sysAdcreativeId} promotedObjectType={queryForm.promotedObjectType as string} />}
        {/* 创建创意 */}
        {adModalConfig.visible && <CreativePup visible={adModalConfig.visible} type={adModalConfig.type} PupFn={handleAdModalConfig} callback={(values: any) => {
            let arr = queryForm.taskMediaMaps || []
            let adqPageArr: any = queryForm.adqPageList || []
            let pageArr: any = queryForm.pageList || []
            adqPageArr[targetKey as string] = null//清除adq落地页
            pageArr[targetKey as string] = null//清除本地落地页
            arr[targetKey] = { sysAdcreative: values }
            setQueryForm({ ...queryForm, taskMediaMaps: arr, adqPageList: adqPageArr, pageList: pageArr }); setCreativeVisible(false); clearData();
            handleAdModalConfig({ visible: false, dataInfo: null, type: 'add' })
        }} dataInfo={queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative} queryForm={queryForm} />}
    </Col>
}
export default Creative