ad-manage/src/pages/launchSystemNew/launchManage/taskList/creativeForm.tsx

import { useAjax } from "@/Hook/useAjax";
import { AdcreativeTemplate, AdcreativeTemplateList } from "@/services/launchAdq";
import { get_adcreative_template, get_adcreative_template_list } from "@/services/launchAdq/global";
import { mySet } from "@/utils/arrFn";
import { DeleteOutlined, DownOutlined, UpOutlined } from "@ant-design/icons";
import { Button, Form, Popconfirm, Radio, Spin } from "antd"
import React, { forwardRef, useEffect, useImperativeHandle, useState } from "react"
import { useModel } from "umi";
import SelectCloud from "../../components/selectCloud";
import TextAideInput from "../../components/textAideInput";
import { outAdcreativeTemplateIdFun } from "../localAd/adenum";
import style from './index.less'

interface Props {
    template: { siteSet: string[], promotedObjectType: string },
    index: number,
    isDel: boolean,
    delOri?: () => void
    data?: any
}
/**
 * 批量Form
 * @returns 
 */
const CreativeForm = forwardRef((props: Props, ref) => {

    /**************************/
    const { data, template, index, delOri, isDel } = props
    const [form] = Form.useForm();
    let adcreativeElementsType = Form.useWatch('adcreativeElementsType', form)
    let adcreativeTemplateId = Form.useWatch('adcreativeTemplateId', form)

    const [adcreative_template_list, set_adcreative_template_list] = useState<AdcreativeTemplateList[]>([])
    const [adcreative_template, set_adcreative_template] = useState<AdcreativeTemplate>()
    const [conversionList, setConversionList] = useState<any>(null)
    const [materialConfig, setMaterialConfig] = useState<{ adcreativeTemplateId?: number, type: string, cloudSize: { relation: string, width: number, height: number }[], list: any[], max: number }>({
        type: '',//类型
        cloudSize: [],//素材搜索条件
        list: [],//素材
        max: 1,//素材数量
    })//素材配置
    const [pupState, setPupState] = useState({
        kp_show: false,
        xd_show: false,
        sj_show: false,
        bq_show: false,
        sp_show: false
    })
    const [isOpen, setIsOpen] = useState<boolean>(true)
    const [isErr, setIsErr] = useState<boolean>(false)
    const [selectImgVisible, set_selectImgVisible] = useState(false)


    const { init } = useModel('useLaunchAdq.useBdMediaPup')

    const getAdcreativeTemplateList = useAjax((params) => get_adcreative_template_list(params))
    const getAdcreativeTemplate = useAjax((params) => get_adcreative_template(params))
    /**************************/

    //子组件暴露方法
    useImperativeHandle(ref, () => ({
        handleOk
    }));

    const handleOk = () => {
        return new Promise((resolve: (value: unknown) => void, reject: (reason?: any) => void) => {
            form.validateFields().then(values => {
                setIsErr(false)
                resolve(values)
            }).catch(err => {
                setIsErr(true)
                reject(err)
            })
        })
    }

    // 获取创意形式列表
    useEffect(() => {
        if (template && template?.siteSet?.length > 0 && template?.promotedObjectType) {
            getAdcreativeTemplateList.run({
                siteSet: template?.siteSet,
                promotedObjectType: template?.promotedObjectType,
                campaignType: 'CAMPAIGN_TYPE_NORMAL',
            }).then(res => {
                let newArr: any = []
                // 过滤掉相同的和即将下线的
                if (!res) {
                    return
                }
                Object.values(res)?.forEach((arr: any) => {
                    Array.isArray(arr) && arr?.forEach((item: any) => {
                        if (newArr.length > 0) {
                            if (outAdcreativeTemplateIdFun(item.adcreativeTemplateId) && newArr.every((i: { adcreativeTemplateId: any }) => i.adcreativeTemplateId !== item.adcreativeTemplateId)) {
                                newArr.push(item)
                            } else {
                                // 找出通用创意
                                newArr = newArr?.map((arr: { adcreativeTemplateId: any }) => {
                                    if (arr.adcreativeTemplateId === item.adcreativeTemplateId) {
                                        return { ...arr, isGeneral: true }
                                    }
                                    return arr
                                })
                            }
                        } else {
                            if (outAdcreativeTemplateIdFun(item.adcreativeTemplateId)) {
                                newArr.push(item)
                            }
                        }
                    })
                })
                set_adcreative_template_list(newArr)
            })
        }
    }, [template, form])

    // 获取创意形式详情
    useEffect(() => {
        // CAMPAIGN_TYPE_NORMAL
        if (template?.siteSet?.length > 0 && template?.promotedObjectType && adcreativeTemplateId) {
            if (adcreativeTemplateId) {
                getAdcreativeTemplate.run({
                    siteSet: template?.siteSet,
                    promotedObjectType: template?.promotedObjectType,
                    adcreativeTemplateId
                }).then(res => {
                    if (res?.length > 0) {
                        set_adcreative_template(res[0])
                    }
                })
            }
        }
    }, [template?.siteSet, template?.promotedObjectType, adcreativeTemplateId])

    //每次选中创意设置该展示的界面
    useEffect(() => {
        let states = {
            kp_show: false,
            xd_show: true,
            sj_show: false,
            bq_show: false,
            sp_show: false
        }
        let values: any = { pageType: 'PAGE_TYPE_CANVAS_WECHAT', }
        if (adcreative_template) {
            let pageList = adcreative_template?.landingPageConfig?.supportPageTypeList
            let pageType = pageList?.length ? pageList[0]?.pageType : null
            //数据展示组件
            if (adcreative_template.adcreativeAttributes.some(item => item.name === 'conversion_data_type' || item.name === 'conversion_target_type')) {
                let arr = adcreative_template.adcreativeAttributes?.filter((item: { name: string; }) => item.name === 'conversion_data_type' || item.name === 'conversion_target_type')
                let newObj: any = {}
                arr.forEach((item) => {
                    let arr: any[] = mySet(item.propertyDetail.enumDetail.enumeration)
                    newObj[item.name] = arr
                })
                setConversionList(newObj)

                states = { ...states, sj_show: true }
                if (newObj.conversion_data_type) {
                    values = { ...values, conversionDataType: newObj.conversion_data_type[0].value }
                }
                if (newObj.conversion_target_type) {
                    values = { ...values, conversionTargetType: newObj.conversion_target_type[0].value }
                }
            }
            //行动按钮组件存在
            if (states.xd_show) {
                let linkNameList = (pageList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkNameType?.list
                let linkPageList = (pageList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkPageType?.list
                if (linkNameList) {
                    let linkNameType = linkNameList[0]?.linkNameType
                    let linkPageType = linkPageList[0]?.linkPageType
                    values = { ...values, linkNameType, linkPageType }
                } else {
                    states = { ...states, xd_show: false }
                }
            }
            // 视频结束页 end_page
            if (adcreative_template.adcreativeElements.some(item => item.name === 'end_page')) {
                // let endPageType =adcreative_template?.adcreativeElements?.filter(item=>item.name === 'end_page_type')[0]?.enumProperty?.enumeration
                values = { ...values, endPageType: 'END_PAGE_AVATAR_NICKNAME_HIGHLIGHT' }
                states = { ...states, sp_show: true }
            }
            setPupState(states)
            form.setFieldsValue(values)
        }
    }, [adcreative_template])

    // 版位改变清空数据
    useEffect(() => {
        if (materialConfig.adcreativeTemplateId && adcreativeTemplateId !== materialConfig.adcreativeTemplateId) {
            setMaterialConfig({ ...materialConfig, adcreativeTemplateId: undefined, list: [] })
        }
    }, [adcreativeTemplateId, materialConfig])

    // 切换创意形式默认选中第一个
    useEffect(() => {
        // 设置默认选中第一个
        if (adcreativeElementsType && adcreative_template_list?.length > 0) {
            let adcreativeTemplateIdArr = adcreative_template_list?.filter(item => item.adcreativeTemplateStyle === adcreativeElementsType)
            form.setFieldsValue({ adcreativeTemplateId: adcreativeTemplateIdArr[0].adcreativeTemplateId })
        }
    }, [adcreativeElementsType, adcreative_template_list])

    return <div className={style.originality} key={index} style={isOpen ? { borderColor: isErr ? 'red' : '#e4e4e4' } : { height: 44, overflow: 'hidden', borderColor: isErr ? 'red' : '#e4e4e4' }}>
        <div className={style.head} onClick={() => { setIsOpen(!isOpen) }}>
            <div>创意{index}</div>
            <div>
                {isDel && <Popconfirm placement="top" title="是否放弃该创意" onConfirm={(e) => { e?.stopPropagation(); delOri && delOri() }} okText="Yes" cancelText="No">
                    <Button type="link" size='small' className={style.clear} style={{ color: 'red' }} onClick={(e) => { e?.stopPropagation() }}><DeleteOutlined /></Button>
                </Popconfirm>}
                <Button
                    type="link"
                    size='small'
                    style={{ color: '#000' }}
                >
                    {isOpen ? <UpOutlined /> : <DownOutlined />}
                </Button>
            </div>
        </div>
        <div>
            <div style={{ height: 20 }}></div>
            <Form
                form={form}
                labelCol={{ span: 4 }}
                labelWrap={true}
                labelAlign="left"
                initialValues={
                    {
                        adcreativeElementsType: '视频'
                    }
                }
            >
                <Form.Item label="创意形式" name='adcreativeElementsType'>
                    <Radio.Group >
                        <Radio.Button value="视频">视频</Radio.Button>
                        <Radio.Button value="图片">图片</Radio.Button>
                    </Radio.Group>
                </Form.Item>

                <Spin tip="Loading..." spinning={getAdcreativeTemplateList?.loading} style={{ width: '100%' }}>
                    <Form.Item style={{ marginLeft: 155 }} name='adcreativeTemplateId'>
                        <Radio.Group className={style.adcreative_template}>
                            {adcreative_template_list?.filter(item => item.adcreativeTemplateStyle === adcreativeElementsType)?.map((item: any) => {
                                return <Radio.Button value={item.adcreativeTemplateId} key={item.adcreativeTemplateId}>
                                    <div className={style.adcreative_template_item}>
                                        {item.isGeneral && <span style={{ color: '#4080ff', fontSize: 10 }}>所选版位通投</span>}
                                        <img src={item.adcreativeSampleImage} />
                                        <span style={{ fontSize: 12, height: 20, lineHeight: '20px' }}>{item.adcreativeTemplateAppellation}</span>
                                        <span style={{ fontSize: 12, height: 20, lineHeight: '20px' }}>{item.adcreativeTemplateId}</span>
                                    </div>
                                </Radio.Button>
                            })}
                        </Radio.Group>
                    </Form.Item>

                    {/* 优先展示视频或图片 */}
                    {adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'image_list' || item.name === 'short_video1' || item.name === 'video' || item.name === 'image').map(item => {
                        return <Form.Item label={item.description} rules={[{ required: true, message: '请选择素材!' }]} key={item.name} name={item.name}>
                            {/* 视频 */}
                            {
                                (item.name === 'short_video1' || item.name === 'video') && <div className={`${style.box} ${style.video}`} onClick={() => {
                                    init({ mediaType: 'VIDEO', cloudSize: adcreativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: item.restriction.videoRestriction.minWidth, height: item.restriction.videoRestriction.minHeight }]], maxSize: item.restriction.videoRestriction.fileSize * 1024 })
                                    setTimeout(() => {
                                        set_selectImgVisible(true)
                                        setMaterialConfig({
                                            ...materialConfig,
                                            type: item.name,
                                            max: 1,
                                            adcreativeTemplateId
                                        })
                                    }, 100)
                                }}>
                                    <p>
                                        {
                                            materialConfig?.list[0] ? <video src={materialConfig?.list[0].url} controls /> : <>
                                                <span>{`推荐尺寸（${adcreativeTemplateId === 1708 ? 1280 : item.restriction.videoRestriction.minWidth} x ${adcreativeTemplateId === 1708 ? 720 : item.restriction.videoRestriction.minHeight}）`}</span>
                                                <span>{`${item.restriction.videoRestriction.fileFormat?.map(str => str?.replace('MEDIA_TYPE_', ''))};< ${item.restriction.videoRestriction.fileSize / 1024}M;时长 ≥ ${item.restriction.videoRestriction.minDuration}s,≤ ${item.restriction.videoRestriction.maxDuration}s,必须带有声音`}</span>
                                            </>
                                        }
                                    </p>
                                </div>
                            }
                            {/* 单图 */}
                            {
                                item.name === 'image' && <div className={`${style.box} ${style.image}`} onClick={() => {
                                    init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]], maxSize: item.restriction.imageRestriction.fileSize * 1024 })
                                    setTimeout(() => {
                                        set_selectImgVisible(true)
                                        setMaterialConfig({
                                            ...materialConfig,
                                            type: item.name,
                                            max: 1,
                                            adcreativeTemplateId
                                        })
                                    }, 100)

                                }}>
                                    <p>
                                        {materialConfig?.list[0] ? <img src={materialConfig?.list[0].url} /> : <>
                                            <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
                                            <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
                                        </>
                                        }
                                    </p>
                                </div>
                            }
                            {/* 多图 */}
                            {
                                item.name === 'image_list' && <div className={`${style.box} ${item.arrayProperty.maxNumber >= 3 ? style.image_list : style.image}`} onClick={() => {
                                    init({ mediaType: 'IMG', num: item.arrayProperty.maxNumber, cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]], maxSize: item.restriction.imageRestriction.fileSize * 1024 })
                                    setTimeout(() => {
                                        set_selectImgVisible(true)
                                        setMaterialConfig({
                                            ...materialConfig,
                                            type: item.name,
                                            max: item.arrayProperty.maxNumber,
                                            adcreativeTemplateId
                                        })
                                    }, 100)
                                }}>
                                    {
                                        Array(item.arrayProperty.maxNumber).fill('').map((arr, index) => {
                                            return <p key={index}>
                                                {
                                                    materialConfig?.list[index] ? <img src={materialConfig?.list[index].url} /> : <>
                                                        <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
                                                        <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
                                                    </>
                                                }

                                            </p>
                                        })
                                    }
                                </div>
                            }
                        </Form.Item>
                    })}

                    {/* 过滤了不必传和品牌名称，品牌标识图（外部传）短视频结构（组装使用） */}
                    {adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'description').map(item => {
                        let maxNum = adcreativeTemplateId === 1708 ? pupState.xd_show ? 10 : item.restriction.textRestriction.maxLength : item.restriction.textRestriction.maxLength
                        return <div key={item.fieldType}>
                            <Form.Item label={item.description} name={item.name} rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${maxNum}}`)), message: '请输入正确的' + item.description }]}>
                                <TextAideInput placeholder={'请输入' + item.description} style={{ width: 500 }} maxTextLength={maxNum} />
                            </Form.Item>
                        </div>
                    })}
                </Spin>
            </Form>
        </div>


        {/* 选择素材 */}
        {selectImgVisible && <SelectCloud
            visible={selectImgVisible}
            onClose={() => set_selectImgVisible(false)}
            sliderImgContent={materialConfig.list}
            onChange={(content) => {
                if (content.length > 0) {
                    form.setFieldsValue({ [materialConfig.type]: materialConfig.type })
                }
                setMaterialConfig({ ...materialConfig, list: content })
                set_selectImgVisible(false)
                console.log(content)
            }} />
        }
    </div>
})


export default React.memo(CreativeForm)