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

import Tables from "@/components/Tables"
import { useAjax } from "@/Hook/useAjax"
import { createAdBatchApi, CreateAdProps } from "@/services/launchAdq/createAd"
import { getSysAdcreativeInfo } from "@/services/launchAdq/creative"
import { PromotedObjectType } from "@/services/launchAdq/enum"
import { getTagsList } from "@/services/launchAdq/global"
import { getSysAdgroupsInfo } from "@/services/launchAdq/localAd"
import { getsysTargetingInfo } from "@/services/launchAdq/targeting"
import { CloseOutlined, EditOutlined, QuestionCircleOutlined, SearchOutlined } from "@ant-design/icons"
import { Button, Card, Col, Empty, Row, Select, Space, Spin, Tooltip, Image, message, Popover } from "antd"
import React, { useEffect, useRef, useState } from "react"
import { useModel } from "umi"
import AdModal from "../../components/adModal"
import CreativeModal from "../../components/creativeModal"
import CrowdPackModal from "../../components/crowdPackModal"
import DataSourceModal from "../../components/dataSourceModal"
import GoodsModal from "../../components/goodsModal"
import IdModal from "../../components/idModal"
import LookLanding from "../../components/lookLanding"
import PageModal from "../../components/pageModal"
import SelectCloud from "../../components/selectCloud"
import TargetingModal from "../../components/targetingModal"
import TargetingTooltip from "../../components/targetingTooltip"
import { WxAutoButton } from "../../req"
import AdcreativeCol from "./adcreativeCol"
import AdgroupsCol from "./adgroupsCol"
import style from './index.less'
import Selector from "./selector"
import SubmitModal from "./submitModal"
import columns from "./tableConfig"

const CreateAd: React.FC = () => {

    /*************************/
    const { getAdAccount } = useModel('useLaunchAdq.useAdAuthorize')
    const [queryForm, setQueryForm] = useState<Partial<CreateAdProps>>({
        campaignName: '',  // 计划名称
        campaignType: 'CAMPAIGN_TYPE_NORMAL', // 计划类型 CAMPAIGN_TYPE_NORMAL CAMPAIGN_TYPE_SEARCH 
        promotedObjectType: 'PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT', // 推广目标类型
        speedMode: 'SPEED_MODE_STANDARD', // 投放速度模式
        sysAdgroupId: undefined,  // 广告组内容
        sysTargetingId: undefined,  // 定向包 id
        adgroupName: undefined,  // 广告名称
        configuredStatus: 'AD_STATUS_SUSPEND',  // 广告状态
        sysAdcreativeId: undefined, // 创意ID
        sysPageId: undefined, // 落地页Id
    })
    const [accountCreateLogs, setAccountCreateLogs] = useState<{ adAccountId: number, id: number, userActionSetsList?: number, productList?: any, conversionList?: any, customAudienceList?: any, excludedCustomAudienceList?: any, pageList?: any }[]>([])  // 账户

    const [adVisible, setAdVisible] = useState<boolean>(false) // 选择广告弹窗控制
    const [dxVisible, setDxVisible] = useState<boolean>(false) // 选择定向弹窗控制
    const [creativeVisible, setCreativeVisible] = useState<boolean>(false) // 选择创意弹窗控制
    const [goodsVisible, setGoodsVisible] = useState<boolean>(false) // 选择商品弹窗控制
    const [sourceVisible, setSourceVisible] = useState<boolean>(false) // 选择数据源弹窗控制
    const [idVisible, setIdVisible] = useState<boolean>(false) // 选择转化ID弹窗控制
    const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false) // 选择转化ID弹窗控制
    const [lookVisible, setLookVisible] = useState<boolean>(false) // 选择转化ID弹窗控制
    const [subVisible, setSubVisible] = useState<boolean>(false) // 选择设置名称弹窗控制
    const [cpVisible, setCpVisible] = useState<boolean>(false) // 选择设置名称弹窗控制
    const [pageVisible, setPageVisible] = useState<boolean>(false) // 选择云端落地页控制
    const [wxButtonList, setWxButtonList] = useState<WxAutoButton[]>([])
    const [tableData, setTableData] = useState<any[]>([])   // 预览表格
    const [tableSelect, setTableSelect] = useState<any[]>([])
    const [geoLocationList, setGeoLocationList] = useState<any>({}) // 所有地域列表
    const [modelList, setModelList] = useState<any>({})  // 所有品牌手机
    const { init, get } = useModel('useLaunchAdq.useBdMediaPup')


    const tagsList_REGION = useAjax((params) => getTagsList(params))
    const tagsList_MODEL = useAjax((params) => getTagsList(params))
    const getSysAdgroups = useAjax((params) => getSysAdgroupsInfo(params))
    const getsysTargeting = useAjax((params) => getsysTargetingInfo(params))
    const getSysAdcreative = useAjax((params) => getSysAdcreativeInfo(params))
    const createAdBatch = useAjax((params) => createAdBatchApi(params))
    /*************************/

    /**数据回填 */
    useEffect(() => {
        let adqAdData = localStorage.getItem('ADQAD')
        if (adqAdData) {
            const { queryForm, accountCreateLogs } = JSON.parse(adqAdData)
            setQueryForm({ ...queryForm })
            setAccountCreateLogs(accountCreateLogs)
        }
    }, [])

    // 设置地域
    useEffect(() => {
        tagsList_REGION.run({ type: 'REGION' }).then(res => {
            if (res) {
                setGeoLocationList(() => (res as any[])?.reduce((prev: any, cur: { id: number }) => {
                    prev[cur.id] = cur
                    return prev
                }, {}))
            }
        })
        tagsList_MODEL.run({ type: 'DEVICE_BRAND_MODEL' }).then(res => {
            if (res) {
                setModelList(() => (res as any[])?.reduce((prev: any, cur: { id: number }) => {
                    prev[cur.id] = cur
                    return prev
                }, {}))
            }
        })
    }, [])

    // 获取账户列表
    useEffect(() => {
        getAdAccount.run()
        init({ mediaType: 'PAGE' })
    }, [])

    /** 获取广告详情 */
    useEffect(() => {
        if (queryForm?.sysAdgroupId) {
            getSysAdgroups.run(queryForm?.sysAdgroupId)
        }
    }, [queryForm?.sysAdgroupId])

    useEffect(() => {
        if (getSysAdgroups?.data?.bidMode !== 'BID_MODE_CPM' && accountCreateLogs?.length > 0) {
            let newAccountCreateLogs = accountCreateLogs?.map((item: any) => {
                if (item?.customAudienceList) {
                    delete item?.customAudienceList
                }
                return { ...item }
            })
            setAccountCreateLogs([...newAccountCreateLogs])
        }
    }, [getSysAdgroups?.data?.bidMode])

    /** 获取创意详情 */
    useEffect(() => {
        if (queryForm?.sysAdcreativeId) {
            getSysAdcreative.run(queryForm?.sysAdcreativeId)
        }
    }, [queryForm?.sysAdcreativeId])

    /** 获取定向详情 */
    useEffect(() => {
        if (queryForm?.sysTargetingId) {
            getsysTargeting.run(queryForm?.sysTargetingId)
        }
    }, [queryForm?.sysTargetingId])

    /** 获取落地页详情 */
    useEffect(() => {
        if (queryForm?.sysPageId) {
            get.run({ mediaType: 'PAGE', sysMediaId: queryForm?.sysPageId }).then(res => {
                if (!Object.keys(res)?.includes('fail')) {
                    let data = res
                    let pageElementsSpecList = data?.pageSpecsList[0]?.pageElementsSpecList
                    setWxButtonList(() => (pageElementsSpecList as any[])?.filter((item: { elementType: string }) => item?.elementType === 'ENTERPRISE_WX'))
                } else {
                    setQueryForm({ ...queryForm, sysPageId: undefined })
                }
            })
        }
    }, [queryForm?.sysPageId])

    /** 删除商品内容 */
    const goodsDel = (index: number) => {
        let newArr = JSON.parse(JSON.stringify(accountCreateLogs))
        delete newArr[index].productList
        setAccountCreateLogs(newArr)
    }

    /** 删除云端内容 */
    const pageDel = (index: number) => {
        let newArr = JSON.parse(JSON.stringify(accountCreateLogs))
        delete newArr[index].pageList
        setAccountCreateLogs(newArr)
    }

    /** 删除数据源 */
    const sourceDel = (index: number, num: number) => {
        let newArr = JSON.parse(JSON.stringify(accountCreateLogs))
        newArr[index].userActionSetsList?.splice(num, 1)
        setAccountCreateLogs(newArr)
    }

    /** 删除人群包 */
    const cpDel = (index: number, num: number, key: string) => {
        let newArr = JSON.parse(JSON.stringify(accountCreateLogs))
        newArr[index][key]?.splice(num, 1)
        setAccountCreateLogs(newArr)
    }

    /** 设置落地页 */
    const setPage = (e: any) => {
        setQueryForm({ ...queryForm, sysPageId: e[0]?.id || undefined })
        setSelectImgVisible(false)
    }

    /** 预览 */
    const preview = () => {
        if (accountCreateLogs?.length === 0) {
            message.error('请选择媒体账户')
            return
        }
        if (!queryForm.promotedObjectType) {
            message.error('请选择推广目标')
            return
        }
        if (!queryForm.sysAdgroupId) {
            message.error('请先设置广告基本信息')
            return
        }
        if (!queryForm.sysTargetingId) {
            message.error('请选择定向')
            return
        }
        if (!queryForm.sysAdcreativeId) {
            message.error('请设置创意的基本信息')
            return
        }
        if (!accountCreateLogs?.every((item: any) => item.pageList?.length > 0)) { // 所有都选云端
            if (!queryForm.sysPageId) {
                message.error('请选择落地页')
                return
            }
        }
        let data = accountCreateLogs.map((item: any, index) => {
            return { ...item, ...queryForm, sysAdGroupData: getSysAdgroups?.data, targetingData: getsysTargeting?.data, sysAdcreativeData: { ...getSysAdcreative?.data }, pageData: get?.data }
        })
        console.log('data--->', data)
        setTableData(data)
    }

    const submit = (data: { adgroupName: string, campaignName: string }) => {
        console.log(111111, tableSelect);
        let params = { ...queryForm, ...data }
        let accountLogs = tableSelect.map((item: any) => {
            // userActionSetsList 数据源  productList 商品
            let data: any = { adAccountId: item.id }
            if (item?.userActionSetsList?.length > 0) { // 数据源
                data.userActionSets = item?.userActionSetsList?.map((item: any) => ({ id: item?.id, type: item?.type }))
            }
            if (item?.productList?.length > 0) { // 商品
                data.productId = item?.productList[0].productOuterId
                data.productCatalogId = item?.productList[0].productCatalogId
            }
            if (item?.customAudienceList?.length > 0) {
                data.customAudience = item?.customAudienceList?.map((item: any) => item.id)
            }
            if (item?.excludedCustomAudienceList?.length > 0) {
                data.excludedCustomAudience = item?.excludedCustomAudienceList?.map((item: any) => item.id)
            }
            if (item?.pageList) {
                data.pageId = item?.pageList[0].id
            }
            return data
        })
        params.accountCreateLogs = accountLogs
        createAdBatch.run(params).then(res => {
            if (res) {
                sessionStorage.setItem('CAMP', data?.campaignName)
                message.success('创建成功')
                window.location.href = '/#/launchSystemNew/launchManage/taskList'
            }
        })
    }

    /** 清除数据 */
    const clearData = () => {
        setTableData([])
        setTableSelect([])
    }

    /** 存为预设 */
    const severBd = () => {
        // queryForm accountCreateLogs
        localStorage.setItem('ADQAD', JSON.stringify({
            queryForm,
            accountCreateLogs
        }))
        message.success('存储成功')
    }

    /** 清除 */
    const delBdPlan = () => {
        localStorage.removeItem('ADQAD')
        setAccountCreateLogs([])
        setQueryForm({
            campaignName: '',  // 计划名称
            campaignType: 'CAMPAIGN_TYPE_NORMAL', // 计划类型 CAMPAIGN_TYPE_NORMAL CAMPAIGN_TYPE_SEARCH 
            promotedObjectType: 'PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT', // 推广目标类型
            speedMode: 'SPEED_MODE_STANDARD', // 投放速度模式
            sysAdgroupId: undefined,  // 广告组内容
            sysTargetingId: undefined,  // 定向包 id
            adgroupName: undefined,  // 广告名称
            configuredStatus: 'AD_STATUS_SUSPEND',  // 广告状态
            sysAdcreativeId: undefined, // 创意ID
            sysPageId: undefined, // 落地页Id
        })
    }

    return <Space direction="vertical" style={{ width: '100%' }}>
        <Card title={<div className={style.cardTitle}>配置区</div>} className={style.createAd} hoverable>
            <Space>
                <Selector label="媒体账户">
                    <Select
                        mode="multiple"
                        style={{ minWidth: 200 }}
                        placeholder="请选择媒体账户"
                        maxTagCount={1}
                        allowClear
                        bordered={false}
                        filterOption={(input: any, option: any) =>
                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                        }
                        value={accountCreateLogs?.map((item: { id: number }) => item?.id)}
                        onChange={(e, option) => {
                            setAccountCreateLogs(option?.map((item: any) => ({ adAccountId: item?.children, id: item?.value })))
                            clearData()
                        }}
                    >
                        {getAdAccount?.data?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.accountId}</Select.Option>)}
                        {/* <Select.OptGroup label="Engineer">
                            <Select.Option value="20632113">20632113</Select.Option>
                        </Select.OptGroup> */}
                    </Select>
                </Selector>

                <Selector label="推广目标">
                    <Select style={{ width: 200 }} value={queryForm?.promotedObjectType} placeholder="请选择推广目标" bordered={false} showSearch filterOption={(input: any, option: any) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    } onChange={(e) => { setQueryForm({ ...queryForm, promotedObjectType: e }); clearData() }}>
                        {Object.keys(PromotedObjectType).map(key => {
                            return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
                        })}
                    </Select>
                </Selector>
            </Space>

            <div className={style.cardBody}>
                <Row className={style.content}>
                    <Col span={16} className={style.conLeft}>
                        <Row className={`${style.conTitle} ${style.conRightBorder}`}><Col span={24}>广告</Col></Row>
                        <Row className={style.items}>
                            {/* =============广告基本信息=========== */}
                            <Col className={style.conRightBorder}>
                                <div className={style.top}>
                                    广告基本信息
                                </div>
                                <div className={style.center}>
                                    <Spin spinning={getSysAdgroups.loading}>
                                        <div className={style.centerContent}>
                                            {(getSysAdgroups?.data && queryForm?.sysAdgroupId) ? <AdgroupsCol data={getSysAdgroups?.data} /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                                        </div>
                                    </Spin>
                                </div>
                                <div className={style.bottom}>
                                    {queryForm?.promotedObjectType ? <span onClick={() => { setAdVisible(true) }}>{getSysAdgroups?.data ? '修改' : '添加'}</span> : <Tooltip title="请先选择推广目标">
                                        <span>添加</span>
                                    </Tooltip>}
                                </div>
                            </Col>
                            {/* =============定向包=========== */}
                            <Col className={style.conRightBorder}>
                                <div className={style.top}>
                                    定向
                                    {getSysAdgroups?.data?.bidMode === 'BID_MODE_CPM' && <>{accountCreateLogs?.length > 0 && queryForm?.sysTargetingId ? <Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setCpVisible(true)}>选择定向包</Button> : <Tooltip title={accountCreateLogs?.length > 0 ? `请先添加定向` : `请先选择媒体账户`}>
                                        <Button type="link" style={{ fontSize: 12, padding: 0 }}>选择定向包</Button>
                                    </Tooltip>}</>}
                                </div>
                                <div className={style.center}>
                                    <Spin spinning={getsysTargeting.loading}>
                                        <div className={style.centerContent}>
                                            {queryForm?.sysTargetingId ? <>
                                                {accountCreateLogs?.some((item: any) => item?.customAudienceList?.length > 0) ? <>
                                                    {getsysTargeting?.data && <Popover
                                                        content={<div className={style.popover}>
                                                            <TargetingTooltip data={getsysTargeting?.data} geoLocationList={geoLocationList} modelList={modelList} />
                                                        </div>}
                                                        trigger="hover"
                                                        placement="right"
                                                    >
                                                        <div className={style.popoverContent}>
                                                            <div>定向名称: <span>{getsysTargeting?.data?.targetingName}</span></div>
                                                            <div>定向描述: <span>{getsysTargeting?.data?.description || '<空>'}</span></div>
                                                        </div>
                                                    </Popover>}
                                                    {accountCreateLogs?.map((item: any, index: number) => {
                                                        if (item?.customAudienceList) {
                                                            return <div className={style.acc} key={index}>
                                                                <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
                                                                {item?.customAudienceList?.length > 0 && <>
                                                                    <div className={style.accName}>定向用户群</div>
                                                                    {
                                                                        item?.customAudienceList?.map((pack: { name: string, id: number }, index1: number) => {
                                                                            return <div className={style.accCon} key={pack.id}>{pack.name}<CloseOutlined className={style.close} onClick={() => {
                                                                                cpDel(index, index1, 'customAudienceList')
                                                                            }} /></div>
                                                                        })
                                                                    }
                                                                </>}
                                                                {item?.excludedCustomAudienceList?.length > 0 && <>
                                                                    <div className={style.accName} style={{ marginTop: 5 }}>排除用户群</div>
                                                                    {
                                                                        item?.excludedCustomAudienceList?.map((pack: { name: string, id: number }, index1: number) => {
                                                                            return <div className={style.accCon} key={pack.id}>{pack.name}<CloseOutlined className={style.close} onClick={() => {
                                                                                cpDel(index, index1, 'excludedCustomAudienceList')
                                                                            }} /></div>
                                                                        })
                                                                    }
                                                                </>}
                                                            </div>
                                                        } else {
                                                            return null
                                                        }
                                                    })}
                                                </> : <>
                                                    <div>定向名称: <span>{getsysTargeting?.data?.targetingName}</span></div>
                                                    <div>定向描述: <span>{getsysTargeting?.data?.description || '<空>'}</span></div>
                                                    <TargetingTooltip data={getsysTargeting?.data} geoLocationList={geoLocationList} modelList={modelList} />
                                                </>}


                                            </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                                        </div>
                                    </Spin>
                                </div>
                                <div className={style.bottom}><span onClick={() => { setDxVisible(true) }}>{getsysTargeting?.data ? '修改' : '添加'}</span></div>
                            </Col>
                            {/* =============商品=========== */}
                            <Col className={style.conRightBorder}>
                                <div className={style.top}>
                                    商品{/* <span>已选：{1}</span> */}
                                </div>
                                <div className={style.center}>
                                    <div className={style.centerContent}>
                                        {accountCreateLogs?.map((item: any, index: number) => {
                                            if (item?.productList) {
                                                return <div className={style.acc} key={index}>
                                                    <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
                                                    {
                                                        item?.productList?.map((pack: { productName: string, author: string, id: number }, index: number) => {
                                                            return <div className={style.accCon} key={pack.id}>{pack.productName}<CloseOutlined className={style.close} onClick={() => {
                                                                goodsDel(index)
                                                            }} /></div>
                                                        })
                                                    }
                                                </div>
                                            } else {
                                                return null
                                            }
                                        })}
                                    </div>
                                </div>
                                <div className={style.bottom}>
                                    {accountCreateLogs?.length > 0 ? <span onClick={() => { setGoodsVisible(true) }}>编辑</span> : <Tooltip title="请先选择媒体账户">
                                        <span>编辑</span>
                                    </Tooltip>}
                                </div>
                            </Col>
                            {/* 数据源 */}
                            <Col className={style.conRightBorder}>
                                <div className={style.top}>
                                    数据源 {/* <span>已选：{1}</span> */}
                                </div>
                                <div className={style.center}>
                                    {/* userActionSetsList */}
                                    <div className={style.centerContent}>
                                        {accountCreateLogs?.map((item: any, index: number) => {
                                            if (item?.userActionSetsList && item?.userActionSetsList?.length > 0) {
                                                return <div className={style.acc} key={index}>
                                                    <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
                                                    {
                                                        item?.userActionSetsList?.map((pack: { name: string, type: string, id: number }, index1: number) => {
                                                            return <div className={style.accCon} key={pack.id}> <span className={style.title}>{pack.name}{' > '}{pack.type}</span> <CloseOutlined className={style.close} onClick={() => {
                                                                sourceDel(index, index1)
                                                            }} /></div>
                                                        })
                                                    }
                                                </div>
                                            } else {
                                                return null
                                            }
                                        })}
                                    </div>
                                </div>
                                <div className={style.bottom}>
                                    {accountCreateLogs?.length > 0 ? <span onClick={() => { setSourceVisible(true) }}>编辑</span> : <Tooltip title="请先选择媒体账户">
                                        <span>编辑</span>
                                    </Tooltip>}
                                </div>
                            </Col>
                        </Row>
                    </Col>
                    {/* =============广告创意=========== */}
                    <Col span={8} className={style.conRight}>
                        <Row className={style.conTitle}><Col span={24}>广告创意</Col></Row>
                        <Row className={style.items}>
                            {/* 创意 */}
                            <Col span={12} className={style.conRightBorder}>
                                <div className={style.top}>创意基本信息</div>
                                <div className={style.center}>
                                    <Spin spinning={getSysAdcreative.loading}>
                                        <div className={style.centerContent}>
                                            {(getSysAdcreative?.data && queryForm?.sysAdcreativeId) && <AdcreativeCol data={getSysAdcreative?.data} />}
                                        </div>
                                    </Spin>
                                </div>
                                <div className={style.bottom}>{queryForm?.sysAdgroupId ? <>
                                    <Button type="link" onClick={() => { setCreativeVisible(true) }}>{queryForm?.sysAdcreativeId ? '修改' : '添加'}</Button>
                                </> : <Tooltip title="请先设置广告">
                                    <Button type="link"><span>添加</span></Button>
                                </Tooltip>}
                                </div>
                            </Col>
                            {/* 落地页 */}
                            <Col span={12} >
                                <div className={style.top}>
                                    <span>落地页 <Tooltip title="云端落地页优先于本地落地页">
                                        <QuestionCircleOutlined />
                                    </Tooltip></span>
                                    {wxButtonList?.length > 0 && <Button type="link" size="small">配置客服</Button>}
                                </div>
                                <div className={style.center}>
                                    <Spin spinning={get.loading}>
                                        <div className={style.centerContent}>
                                            {accountCreateLogs?.some((item: any) => item.pageList?.length > 0 || (queryForm?.sysPageId && (get?.data && !Object.keys(get?.data)?.includes('fail'))))  ? <>
                                                {(queryForm?.sysPageId && !accountCreateLogs?.every((item: any) => item.pageList?.length > 0)) && <>
                                                    <div>落地页名称：{get?.data?.pageName || ''}</div>
                                                    <div>分享名称：{get?.data?.shareContentSpec?.shareTitle || ''}</div>
                                                    <div>分享描述：{get?.data?.shareContentSpec?.shareDescription || ''}</div>
                                                    <div style={{ marginBottom: 10 }}>原生推广页顶部素材预览：
                                                        <div>{get?.data?.pageSpecsList && get?.data?.pageSpecsList[0]?.pageElementsSpecList?.filter((item: any, index: number) => index === 0)?.map((item: { elementType: 'TOP_IMAGE' | 'TOP_VIDEO' | 'TOP_SLIDER', topImageSpec: any, topSliderSpec: any, topVideoSpec: any }, index: number) => {
                                                            switch (item?.elementType) {
                                                                case 'TOP_IMAGE':
                                                                    return <Image width={80} src={item.topImageSpec.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} key={index} />
                                                                case 'TOP_SLIDER':
                                                                    return <Space wrap key={index}>
                                                                        {item?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <Image width={70} src={url} style={{ borderRadius: 8 }} key={'TOP_SLIDER' + index} />)}
                                                                    </Space>
                                                                case 'TOP_VIDEO':
                                                                    return <video src={item.topVideoSpec.videoUrl} width={150} controls key={index}></video>
                                                            }
                                                        })}</div>
                                                    </div>
                                                </>}
                                                {accountCreateLogs?.map((item: any, index: number) => {
                                                    if (item?.pageList && item?.pageList?.length > 0) {
                                                        return <div className={style.acc} key={index}>
                                                            <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
                                                            {
                                                                item?.pageList?.map((pack: { pageName: string, type: string, id: number }, index1: number) => {
                                                                    return <div className={style.accCon} key={pack.id}> <span className={style.title}>{pack.pageName}</span> <CloseOutlined className={style.close} onClick={() => {
                                                                        pageDel(index)
                                                                    }} /></div>
                                                                })
                                                            }
                                                        </div>
                                                    } else {
                                                        return null
                                                    }
                                                })}
                                            </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                                        </div>
                                    </Spin>
                                </div>
                                <div className={style.bottom}>{queryForm?.sysAdcreativeId ? <>
                                    {queryForm?.sysPageId && <Button type="link" onClick={() => { setLookVisible(true) }}>查看</Button>}
                                    <Button type="link" onClick={() => { setSelectImgVisible(true) }}>{queryForm?.sysPageId ? '修改' : '选择落地页'}</Button>
                                    {accountCreateLogs?.length > 0 ? <Button type="link" onClick={() => { setPageVisible(true) }}>云端落地页</Button> : <Tooltip title="请先选择媒体账户">
                                        <Button type="link">云端落地页</Button>
                                    </Tooltip>}
                                </> : <Tooltip title="请先设置创意">
                                    <Button type="link"><span>选择落地页</span></Button>
                                </Tooltip>}
                                </div>
                            </Col>
                        </Row>
                    </Col>
                </Row>
                {/* =============广告底部按钮=========== */}
                <Space className={style.bts}>
                    <Button type='primary' onClick={severBd}>存为预设</Button>
                    <Button type='primary' onClick={preview}><SearchOutlined /> 批量预览广告</Button>
                    <Button onClick={delBdPlan}>清空配置/预设</Button>
                </Space>
            </div>
        </Card>

        <Card
            className={style.createAd}
            hoverable
            extra={tableData?.length > 0 ? <Space>
                <span>推广计划总数：{accountCreateLogs?.length}</span>
                <span>广告总数：{accountCreateLogs?.length}</span>
                {tableSelect?.length > 0 && <span> 已选：<span style={{ color: '#1890FF' }}>{tableSelect?.length}</span> 条</span>}
                {
                    <Button type='primary' onClick={() => {
                        if (tableSelect.length === 0) {
                            message.error('请选择要提交的计划！')
                            return
                        };
                        setSubVisible(true)
                    }}>批量提交审核</Button>
                }
            </Space> : false
            }
        >
            {tableData?.length > 0 ? <div className={style.cardBody}>
                <div className={style.content} style={{ marginTop: 20 }}>
                    <Tables
                        columns={columns()}
                        dataSource={tableData}
                        total={0}
                        size="small"
                        bordered
                        scroll={{ x: 1800 }}
                        rowSelection={{
                            selectedRowKeys: tableSelect?.map((item: any) => item?.id.toString()),
                            onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
                                setTableSelect(selectedRows)
                            }
                        }}
                    />
                </div>
            </div> : <div style={{ minHeight: 400, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <Empty description="请先完成模块配置后，再预览广告计划" />
            </div>}
        </Card>


        {/* 选择广告 */}
        {adVisible && <AdModal visible={adVisible} onClose={() => setAdVisible(false)} promotedObjectType={queryForm.promotedObjectType as string} onChange={(e) => { setQueryForm({ ...queryForm, sysAdgroupId: e, sysAdcreativeId: undefined }); setAdVisible(false); clearData() }} sysAdgroupId={queryForm?.sysAdgroupId} />}
        {/* 选择定向 */}
        {dxVisible && <TargetingModal visible={dxVisible} onClose={() => setDxVisible(false)} onChange={(e) => { setQueryForm({ ...queryForm, sysTargetingId: e }); setDxVisible(false); clearData() }} sysTargetingId={queryForm?.sysTargetingId} />}
        {/* 选择创意 */}
        {creativeVisible && <CreativeModal siteSet={getSysAdgroups?.data?.siteSet} visible={creativeVisible} onClose={() => setCreativeVisible(false)} onChange={(e) => { setQueryForm({ ...queryForm, sysAdcreativeId: e }); setCreativeVisible(false); clearData() }} sysAdcreativeId={queryForm?.sysAdcreativeId} promotedObjectType={queryForm.promotedObjectType as string} />}
        {/* 选择商品 */}
        {goodsVisible && <GoodsModal visible={goodsVisible} data={accountCreateLogs} onClose={() => setGoodsVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setGoodsVisible(false); clearData() }} />}
        {/* 选择数据源 */}
        {sourceVisible && <DataSourceModal visible={sourceVisible} data={accountCreateLogs} onClose={() => setSourceVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false); clearData() }} />}
        {/* 选择转化ID */}
        {idVisible && <IdModal visible={idVisible} data={accountCreateLogs} onClose={() => setIdVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false); clearData() }} />}
        {/* 选择定向包 */}
        {cpVisible && <CrowdPackModal visible={cpVisible} data={accountCreateLogs} onClose={() => setCpVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setCpVisible(false); clearData() }} />}
        {/* 选择ADQ落地页 */}
        {pageVisible && <PageModal visible={pageVisible} data={accountCreateLogs} onClose={() => setPageVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setPageVisible(false); clearData() }} />}
        {/* 选择素材 */}
        {selectImgVisible && <SelectCloud visible={selectImgVisible} onClose={() => setSelectImgVisible(false)} onChange={setPage} isBack={false} />}
        {/* 查看落地页 */}
        {lookVisible && <LookLanding visible={lookVisible} onClose={() => setLookVisible(false)} id={queryForm?.sysPageId as any} />}
        {/* 设置名称 */}
        {subVisible && <SubmitModal data={getSysAdgroups?.data} visible={subVisible} onClose={() => setSubVisible(false)} onChange={submit} ajax={createAdBatch} />}
    </Space>
}


export default CreateAd