ad-manage/src/pages/launchSystemV3/tencentAdPutIn/create/addDynamic.tsx

import { Button, Card, Drawer, Empty, Popconfirm, Space, Spin, Table, Tabs, Typography, message } from "antd"
import React, { useEffect, useState } from "react"
import '../index.less'
import style from './index.less'
import Dynamic from "./Dynamic";
import Material from "./Material";
import MaterialText from "./MaterialText";
import PageList from "./PageList";
import { DispatchAddelivery } from ".";
import { CheckOutlined, SearchOutlined } from "@ant-design/icons";
import WechatAccount from "../../components/WechatAccount";
import { cartesianProduct, distributeArray } from "@/utils/utils";
import { columnsAddDynamic } from "./tableConfig";
import { useAjax } from "@/Hook/useAjax";
import { createDynamicTaskApi } from "@/services/adqV3";
import TacticsS from "./TacticsS";
const { Text, Title } = Typography;

/**
 * 新增创意
 * @returns 
 */
const AddDynamic: React.FC<PULLIN.NewAddDynamic> = ({ visible, onChange, onClose, adData: selectData, tactics }) => {

    /****************************************/
    const [addelivery, setAddelivery] = useState<PULLIN.AddeliveryProps>({ adgroups: {}, targeting: [], dynamic: {}, dynamicMaterialDTos: {}, dynamicCreativesTextDTOS: {}, mediaType: 0 })
    const { adgroups } = addelivery
    const [wechatVisible, setWechatVisible] = useState<boolean>(false) // 选择微信公众号弹窗控制
    const [materialData, setMaterialData] = useState<any>({}) // 素材数据
    const [textData, setTextData] = useState<any>({})
    const [accountCreateLogs, setAccountCreateLogs] = useState<PULLIN.AccountCreateLogsProps[]>([])  // 账户
    const [tableData, setTableData] = useState<any>({})
    const [activeKey, setActiveKey] = useState<string>()
    const [dynamicCount, setDynamicCount] = useState<number>(0)
    const [adData, setAdData] = useState<any[]>(selectData)

    const createDynamicTask = useAjax((params) => createDynamicTaskApi(params))
    /****************************************/

    useEffect(() => {
        if (tactics) {
            const {
                adData,
                addelivery,
                accountCreateLogs,
                materialData,
                textData
            } = JSON.parse(tactics.strategyValue)
            setAccountCreateLogs(accountCreateLogs)
            setAddelivery(addelivery)
            setAdData(adData)
            setMaterialData(materialData)
            setTextData(textData)
        } else if (selectData?.length > 0) {
            const { siteSet, marketingCarrierType, marketingGoal, marketingTargetType, sceneSpec, automaticSiteEnabled } = selectData[0]
            setAddelivery({ ...addelivery, adgroups: { marketingGoal, marketingCarrierType, siteSet, automaticSiteEnabled, sceneSpec, marketingAssetOuterSpec: { marketingTargetType } } })
            let AccountSet = new Set(selectData.map(item => item.accountId))
            setAccountCreateLogs([...AccountSet].map(accountId => ({ accountId })))
        }
    }, [selectData, tactics])

    const clearData = () => {
        setTableData([])
    }

    // 预览
    const preview = () => {
        if (accountCreateLogs?.length === 0) {
            message.error('请先选择媒体账户')
            return
        }
        const { adgroups, dynamic, dynamicMaterialDTos, dynamicCreativesTextDTOS, mediaType } = addelivery
        if (!(adgroups && Object.keys(adgroups).length)) {
            message.error('请先配置广告信息')
            return
        }
        if ((['MARKETING_TARGET_TYPE_WECHAT_OFFICIAL_ACCOUNT'].includes(adgroups?.marketingAssetOuterSpec?.marketingTargetType) || adgroups?.marketingCarrierType === 'MARKETING_CARRIER_TYPE_WECHAT_OFFICIAL_ACCOUNT') && !accountCreateLogs?.some(item => item?.wechatChannelList?.length)) {
            message.error('请先选择公众号')
            return
        }
        if (!(dynamic && Object.keys(dynamic).length)) {
            message.error('请先配置创意')
            return
        }
        if ((materialData && Object.keys(materialData).length) && !(dynamicMaterialDTos && Object.keys(dynamicMaterialDTos).length)) {
            message.error('请先配置创意素材')
            return
        }
        if ((textData && Object.keys(textData).length) && !(dynamicCreativesTextDTOS && Object.keys(dynamicCreativesTextDTOS).length)) {
            message.error('请先配置创意文案')
            return
        }
        if (!accountCreateLogs?.some(item => item?.pageList?.length)) {
            message.error('请先选择落地页')
            return
        }

        let newTableData = {}, newDynamicCount = 0

        let textType = dynamicCreativesTextDTOS.type
        let textDto = dynamicCreativesTextDTOS?.dynamicCreativesTextDetailDTOList || []
        let textDtoLenth = textDto.length
        let dynamicGroupLength = dynamicMaterialDTos?.dynamicGroup?.length || 0

        let newDynamicGroup: any = []
        if (![910].includes(dynamic.creativeTemplateId)) {
            newDynamicGroup = dynamicMaterialDTos?.dynamicGroup || []
            if (newDynamicGroup.length > 0 && [0, 1, 2, 3].includes(textType)) {
                if (textType === 0) {
                    newDynamicGroup = newDynamicGroup.map((item: any) => ({ ...item, textDto: textDto?.[0] }))
                } else if (textType === 1) {
                    newDynamicGroup = newDynamicGroup.map((item: any, index: number) => ({ ...item, textDto: textDto?.[index] }))
                } else if (textType === 2) {
                    newDynamicGroup = newDynamicGroup.map((item: any, index: number) => ({ ...item, textDto: textDto?.[index % textDtoLenth] }))
                } else if (textType === 3) {
                    if (mediaType === 0) {
                        newDynamicGroup = cartesianProduct(newDynamicGroup, textDto || [{}]).map((item) => {
                            let [dynamicGroup, textDtoData] = item
                            return {
                                ...dynamicGroup as any,
                                textDto: textDtoData
                            }
                        })
                    }
                }
            }
        }

        // 创意组平均分配到广告逻辑
        let averageAdDynamicList: any[] = []
        if ((mediaType === 1 || mediaType === 2) && newDynamicGroup.length) {
            let adLength = adData.length
            if (mediaType === 1) {
                if (adLength > dynamicGroupLength) {
                    message.error(`创意组分配规则选择“平均分配到广告”时，创意组总数必须大于等于广告总数。当前创意组数量：${dynamicGroupLength}，广告数量：${adLength}`)
                    return
                }
                averageAdDynamicList = distributeArray(newDynamicGroup, adLength)
            } else if (mediaType === 2) {
                if (adLength < dynamicGroupLength) {
                    message.error(`创意组分配规则选择“顺序分配到广告”时，创意组总数必须小于等于广告总数。当前创意组数量：${dynamicGroupLength}，广告数量：${adLength}`)
                    return
                }
            }
        }

        let accountIndex1 = 0
        adData.forEach((ad, index) => {
            let item = accountCreateLogs.find(a => a.accountId === ad.accountId) as PULLIN.AccountCreateLogsProps
            let averageAdDynamic = averageAdDynamicList?.[index]
            let data = [{
                id: ad.adgroupId + '_' + index,
                pageListDto: item.pageList,                   // 落地页
                adgroupsDto: ad,
                dynamicDto: dynamic,                          // 创意信息
                averageAdDynamic,
                rowSpan: mediaType === 1 ? averageAdDynamic.length : ([910].includes(dynamic.creativeTemplateId) ? item.pageList?.length : (textType === 3 ? textDtoLenth * dynamicGroupLength : dynamicGroupLength)) || 1
            }]

            let newData: any[] = []
            if ([910].includes(dynamic.creativeTemplateId)) {
                newData = cartesianProduct(data, item.pageList).map((item, index) => {
                    let [d1, pageList, num] = item
                    return {
                        ...d1,
                        id: d1.id + '_' + index,
                        pageListDto: [pageList],
                        dynamicDto: {
                            ...d1.dynamicDto,
                            dynamicCreativeName: d1.dynamicDto.dynamicCreativeName + num
                        }
                    }
                })
            } else {
                if (mediaType === 1) {
                    data.forEach(item => {
                        const { averageAdDynamic, ...ad } = item
                        if (textType === 3) {
                            let rowSpan = textDtoLenth * averageAdDynamic.length
                            cartesianProduct(textDto, averageAdDynamic).forEach((taad: any, index) => {
                                let [textValue, aad] = taad
                                newData.push({
                                    ...ad,
                                    id: ad.id + '_' + index,
                                    dynamicGroup: aad,
                                    textDto: textValue,
                                    rowSpan
                                })
                            })
                        } else {
                            averageAdDynamic.forEach((aad: any, index: number) => {
                                newData.push({
                                    ...ad,
                                    id: ad.id + '_' + index,
                                    dynamicGroup: aad,
                                    textDto: aad?.textDto
                                })
                            })
                        }
                    })
                } else if (mediaType === 2) {
                    data.forEach((item) => {
                        const { averageAdDynamic, ...ad } = item
                        if (textType === 3) {
                            cartesianProduct(textDto, [newDynamicGroup[accountIndex1 % newDynamicGroup.length]]).forEach((taad: any) => {
                                let [textValue, aad, index] = taad
                                newData.push({
                                    ...ad,
                                    id: ad.id + '_' + index,
                                    dynamicGroup: aad,
                                    textDto: textValue,
                                    rowSpan: textDto.length
                                })
                            })
                        } else {
                            let { textDto, ...dynamicGroup } = newDynamicGroup[accountIndex1 % newDynamicGroup.length]
                            newData.push({
                                ...ad,
                                dynamicGroup,
                                textDto,
                                rowSpan: 1
                            })
                        }
                        accountIndex1 += 1
                    })
                } else {
                    newData = cartesianProduct(data, newDynamicGroup.length > 0 ? newDynamicGroup : [{}]).map((item, index) => {
                        let [d1, group] = item
                        return {
                            ...d1,
                            id: d1.id + '_' + index,
                            dynamicGroup: group,
                            textDto: (group as any)?.textDto
                        }
                    })
                }
            }
            newDynamicCount += newData.length
            newTableData[ad.adgroupId] = newData
        })
        setDynamicCount(newDynamicCount)
        setActiveKey(adData?.[0].adgroupId?.toString())
        console.log('newTableData-->', newTableData)
        setTableData(newTableData)
    }

    // 提交
    const onSubmit = () => {
        const { dynamic, dynamicMaterialDTos, dynamicCreativesTextDTOS, mediaType } = addelivery

        let dynamicMaterialDTOS = []
        if (dynamic.deliveryMode === 'DELIVERY_MODE_CUSTOMIZE') {
            if ((materialData && Object.keys(materialData).length && dynamicMaterialDTos && Object.keys(dynamicMaterialDTos).length)) {
                let mType = Object.keys(materialData)[0];
                dynamicMaterialDTOS = dynamicMaterialDTos.dynamicGroup?.map((item: any) => {
                    if (mType === 'image') {
                        return [{
                            type: mType,
                            valueJson: JSON.stringify({
                                value: {
                                    imageUrl: item?.image_id?.url,
                                    imageId: item?.image_id?.id,
                                    materialType: item?.image_id?.materialType
                                }
                            })
                        }]
                    } else if (mType === 'image_list' || mType === 'element_story') {
                        let key = 'image_list'
                        if (mType === 'element_story') {
                            key = 'element_story'
                        }
                        let list = item?.[key]?.map((l: any) => {
                            return {
                                imageUrl: l?.url,
                                imageId: l?.id,
                                materialType: l?.materialType
                            }
                        })
                        return [{
                            type: mType,
                            valueJson: JSON.stringify({
                                value: {
                                    list
                                }
                            })
                        }]
                    } else if (['short_video', 'video'].includes(mType)) {
                        let value: any = {
                            materialType: item?.video_id?.materialType || item?.short_video1?.materialType || 0,
                            videoUrl: item?.video_id?.url || item?.short_video1?.url,
                            videoId: item?.video_id?.id || item?.short_video1?.id
                        }
                        if (item?.cover_id?.url) {
                            value.imageUrl = item?.cover_id?.url
                            value.imageId = item?.cover_id?.id
                            value.materialCoverType = item?.cover_id?.materialType
                        }
                        return [{
                            type: mType,
                            valueJson: JSON.stringify({
                                value
                            })
                        }]
                    }
                    return [{
                        type: mType,
                        valueJson: ''
                    }]
                })
            }
        } else {
            if (dynamicMaterialDTos && Object.keys(dynamicMaterialDTos).length) {
                dynamicMaterialDTOS = dynamicMaterialDTos.dynamicGroup?.map((item: { list: any[] }) => {
                    return item.list.map(l => {
                        if (Array.isArray(l)) {
                            return {
                                type: 'image_list',
                                valueJson: JSON.stringify({
                                    value: {
                                        list: l?.map((i: any) => {
                                            return {
                                                imageUrl: i?.url,
                                                imageId: i?.id,
                                                materialType: i?.materialType
                                            }
                                        })
                                    }
                                })
                            }
                        } else if (l?.url?.includes('mp4')) {
                            return {
                                type: 'video',
                                valueJson: JSON.stringify({
                                    value: {
                                        materialType: l?.materialType,
                                        videoUrl: l?.url,
                                        videoId: l?.id
                                    }
                                })
                            }
                        } else {
                            return {
                                type: 'image',
                                valueJson: JSON.stringify({
                                    value: {
                                        imageUrl: l?.url,
                                        imageId: l?.id,
                                        materialType: l?.materialType
                                    }
                                })
                            }
                        }
                    })
                })
            }
        }

        let accountIdParamDTOMap: any = {}
        accountCreateLogs.forEach(item => {
            let { pageList, productList, userActionSetsList, accountId, wechatChannelList } = item

            let userActionSetsListDto = userActionSetsList?.map((item: any) => ({ id: item?.userActionSetId, type: item?.type })) // dataSourceId

            let map: any = {
                userActionSetsList: userActionSetsListDto,
                pageList: pageList?.map((item: { pageId: any }) => item.pageId)
            }
            if (productList) {
                map.productDTOS = productList?.map(item => {
                    return { productId: item.marketingAssetId }
                })
            }
            if (wechatChannelList) {
                map.wechatChannelId = wechatChannelList?.[0]?.wechatOfficialAccountId
            }

            accountIdParamDTOMap[accountId] = map
        })
        let dynamicCreativesDTO = { ...dynamic, mediaType }
        if (dynamic.deliveryMode === 'DELIVERY_MODE_COMPONENT') {
            dynamicCreativesDTO.creativeTemplateId = 711
        }
        let params = {
            accountAdgroupMaps: adData.map(item => `${item.accountId},${item.adgroupId}`),
            dynamicCreativesDTO,
            dynamicCreativesTextDTOS,
            dynamicMaterialDTOS,
            accountIdParamDTOMap
        }
        createDynamicTask.run(params).then(res => {
            if (res) {
                message.success('创建任务提交成功')
                onChange?.()
            }
        })
    }

    return <Drawer
        title={<strong>添加创意</strong>}
        visible={visible}
        width={1500}
        onClose={onClose}
        bodyStyle={{ backgroundColor: '#f1f4fc', padding: '0 10px 10px' }}
    >
        <Space direction="vertical" style={{ width: '100%' }}>
            <Spin spinning={false}>
                <Card
                    size="small"
                    title={<div className={style.cardTitle}>配置区</div>}
                    className={style.createAd}
                >
                    <Space wrap>
                        {(adgroups?.marketingAssetOuterSpec?.marketingTargetType === 'MARKETING_TARGET_TYPE_WECHAT_OFFICIAL_ACCOUNT' || adgroups?.marketingCarrierType === 'MARKETING_CARRIER_TYPE_WECHAT_OFFICIAL_ACCOUNT') && <Button type="primary" danger={!accountCreateLogs?.some(item => item?.wechatChannelList?.length)} onClick={() => { setWechatVisible(true) }}>{accountCreateLogs?.some(item => item?.wechatChannelList?.length) ? <>重新选择公众号 <CheckOutlined style={{ color: '#FFFFFF' }} /></> : '请选择公众号'}</Button>}
                    </Space>
                    <div className={style.settingsBody}>
                        <div className={style.settingsBody_content}>
                            <DispatchAddelivery.Provider
                                value={{
                                    addelivery,
                                    setAddelivery,
                                    accountCreateLogs,
                                    setAccountCreateLogs,
                                    materialData,
                                    setMaterialData,
                                    textData,
                                    setTextData,
                                    clearData
                                }}>
                                <div className={style.settingsBody_content_right}>
                                    <div className={`${style.settingsBody_content_row} ${style.row1}`}>
                                        <div className={style.title}>
                                            <span>广告信息</span>
                                        </div>
                                        <div className={style.detail}>
                                            <div className={style.detail_body}>
                                                <Title level={5} style={{ fontSize: 12 }}>已选广告</Title>
                                                {adData?.map(item => {
                                                    return <div key={item.adgroupId}>
                                                        <div className={style.text}><Text ellipsis={{ tooltip: true }}>{item.adgroupName}</Text></div>
                                                    </div>
                                                })}
                                            </div>
                                        </div>
                                    </div>
                                    {/* 创意 */}
                                    <Dynamic />
                                    {/* 创意素材 */}
                                    <Material adData={adData} />
                                </div>
                                <div className={style.settingsBody_content_left}>
                                    {/* 创意文案 */}
                                    <MaterialText />
                                    {/* 落地页 */}
                                    <PageList />
                                </div>
                            </DispatchAddelivery.Provider>
                        </div>
                    </div>

                    <Space className={style.bts} wrap>
                        <TacticsS strategyValue={{
                            adData: adData.map(item => {
                                const { accountId, adgroupName, adgroupId, siteSet, marketingCarrierType, marketingGoal, marketingTargetType, sceneSpec, automaticSiteEnabled } = item
                                return {
                                    siteSet, marketingCarrierType, marketingGoal, marketingTargetType, sceneSpec, automaticSiteEnabled,
                                    accountId,
                                    adgroupId,
                                    adgroupName
                                }
                            }),
                            addelivery,
                            accountCreateLogs,
                            materialData,
                            textData
                        }} />
                        <Button type='primary' onClick={preview}><SearchOutlined />预览广告</Button>
                    </Space>

                    {/* 选择公众号 */}
                    {wechatVisible && <WechatAccount
                        visible={wechatVisible}
                        data={accountCreateLogs}
                        onClose={() => setWechatVisible(false)}
                        onChange={(e) => {
                            setAccountCreateLogs(e);
                            setWechatVisible(false);
                            clearData()
                        }}
                    />}
                </Card>
            </Spin>

            <Card
                className={style.createAd}
            >
                {activeKey && tableData && Object.keys(tableData)?.length > 0 ? <div className={style.cardBody}>
                    <Tabs
                        onChange={(e) => { setActiveKey(e) }}
                        type="card"
                        activeKey={activeKey}
                        tabBarExtraContent={<Space>
                            <span>创意总数：{dynamicCount}</span>
                            <Popconfirm
                                title="确定提交？"
                                onConfirm={onSubmit}
                            >
                                <Button type='primary' loading={createDynamicTask.loading}>提交创建</Button>
                            </Popconfirm>
                        </Space>}
                    >
                        {adData.map(item => <Tabs.TabPane tab={item.adgroupId} key={item.adgroupId} />)}
                    </Tabs>
                    <div className={style.content} style={{ marginTop: 20 }}>
                        <Table
                            columns={columnsAddDynamic()}
                            dataSource={tableData[activeKey]}
                            size="small"
                            bordered
                            scroll={{ x: 1200 }}
                            rowKey={'id'}
                            pagination={{
                                defaultPageSize: 50
                            }}
                        />
                    </div>
                </div> : <div style={{ minHeight: 400, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <Empty description="请先完成模块配置后，再预览广告计划" />
                </div>}
            </Card>
        </Space>
    </Drawer>
}

export default React.memo(AddDynamic)