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

import { CreateAdProps } from "@/services/launchAdq/createAd"
import { BaseResult } from "@ahooksjs/use-request/lib/types"
import { CloseOutlined, DownOutlined } from "@ant-design/icons"
import { Button, Col, Dropdown, Empty, Menu, message, Popover, Space, Spin, Tooltip } from "antd"
import React, { useCallback, useEffect, useState } from "react"
import TargetingModal from "../../../components/targetingModal"
import TargetingPup from "./modal"
import TargetingTooltip from "../../../components/targetingTooltip"
import CrowdPackModal from "../../../components/crowdPackModal"
import style from '../index.less'
import { ModalConfig } from "./modal"
import ExpandModal from "@/pages/launchSystemNew/components/expandModal"
import { ExpandTargeting } from "@/services/launchAdq/enum"
type Props = {
    queryForm: Partial<CreateAdProps>,
    setQueryForm: React.Dispatch<React.SetStateAction<Partial<CreateAdProps>>>,
    setAccountCreateLogs: React.Dispatch<React.SetStateAction<{
        adAccountId: number;
        id: number;
        userActionSetsList?: any[];
        productList?: any;
        conversionList?: any;
        customAudienceList?: any;
        excludedCustomAudienceList?: any;
        pageList?: any;
    }[]>>,
    getSysAdgroups: BaseResult<any, any>,
    getsysTargeting: BaseResult<any, any>,
    accountCreateLogs: any[],
    geoLocationList: any[],
    modelList: any[],
    clearData: () => void,
    cpDel: (index: number, num: number, key: string) => void,
}
function TargetIng(props: Props) {
    let { queryForm, getSysAdgroups, getsysTargeting, accountCreateLogs, geoLocationList, modelList, setQueryForm, clearData, cpDel, setAccountCreateLogs } = props
    const [adModalConfig, setAdModalConfig] = useState<ModalConfig>({//新建广告弹窗
        visible: false,
        type: 'add'
    })
    const [dxVisible, setDxVisible] = useState<boolean>(false) // 选择定向弹窗控制
    const [cpVisible, setCpVisible] = useState<boolean>(false) // 选择设置名称弹窗控制
    const [expandVisible, setExpandVisible] = useState<boolean>(false) // 自动扩量弹窗控制

    // 设置变量
    const handleAdModalConfig = useCallback((arg: ModalConfig) => {
        setAdModalConfig({ ...adModalConfig, ...arg })
    }, [adModalConfig])
    // 获取定向详情
    const getInfo = useCallback((sysTargetingId) => {
        getsysTargeting.run(sysTargetingId).then(res => {
            setQueryForm({ ...queryForm, sysTargetingId: sysTargetingId, sysTargeting: { ...res, isTemplate: false } });
            setDxVisible(false);
            clearData()
        })
    }, [queryForm])

    return <Col className={style.conRightBorder}>
        <div className={style.top}>
            定向
            {/* (queryForm.sysAdgroup?.bidMode === 'BID_MODE_CPM' || queryForm.sysAdgroup?.bidMode === 'BID_MODE_CPC') &&  */}
            <Dropdown
                overlay={<Menu style={{ padding: 0 }} items={[
                    {
                        key: '1',
                        label: <>
                            {accountCreateLogs?.length > 0 && queryForm?.sysTargeting ? <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>}
                        </>
                    },
                    {
                        key: '2',
                        label: <>
                            {accountCreateLogs?.length > 0 && queryForm?.sysTargeting ? <Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setExpandVisible(true)}>自动扩量</Button> : <Tooltip title={accountCreateLogs?.length > 0 ? `请先添加定向` : `请先选择媒体账户`}>
                                <Button type="link" style={{ fontSize: 12, padding: 0 }}>自动扩量</Button>
                            </Tooltip>}
                        </>
                    }
                ]} />}
            >
                <a onClick={e => e.preventDefault()}>
                    <Space>
                        扩展
                        <DownOutlined />
                    </Space>
                </a>
            </Dropdown>

            {queryForm.sysTargeting && <a onClick={() => {
                setQueryForm({ ...queryForm, sysTargeting: undefined, sysTargetingId: undefined })
                setAccountCreateLogs([])
            }}>清空</a>}
        </div>
        <div className={style.center}>
            <Spin spinning={getsysTargeting.loading}>
                <div className={style.centerContent}>
                    {queryForm?.sysTargeting ? <>
                        {queryForm.expandEnabled && <div className={style.popoverContent}>
                            <div><strong>自动扩量：</strong> <span style={{ color: "#5a5a5a" }}>开启</span></div>
                            <div><strong>不可突破定向：</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.expandTargeting?.map(item => ExpandTargeting[item]).toString() || '无'}</span></div>
                            {accountCreateLogs?.map((item: any, index: number) => {
                                if (item?.coldStartAudienceList) {
                                    return <div className={style.acc} key={index}>
                                        <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
                                        {item?.coldStartAudienceList?.length > 0 && <>
                                            <div className={style.accName}>扩量种子人群</div>
                                            {
                                                item?.coldStartAudienceList?.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, 'coldStartAudienceList')
                                                    }} /></div>
                                                })
                                            }
                                        </>}
                                    </div>
                                } else {
                                    return null
                                }
                            })}
                        </div>}

                        {accountCreateLogs?.some((item: any) => item?.customAudienceList?.length > 0) ?
                            <>
                                {queryForm.sysTargeting && <Popover
                                    content={<div className={style.popover}>
                                        <TargetingTooltip data={queryForm.sysTargeting} geoLocationList={geoLocationList} modelList={modelList} />
                                    </div>}
                                    trigger="hover"
                                    placement="right"
                                >
                                    <div className={style.popoverContent}>
                                        <div><strong>定向名称：</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.targetingName}</span></div>
                                        <div><strong>定向描述：</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.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><strong>定向名称：</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.targetingName}</span></div>
                                <div><strong>定向描述：</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.description || '<空>'}</span></div>
                                <TargetingTooltip data={queryForm?.sysTargeting} geoLocationList={geoLocationList} modelList={modelList} />
                            </>}


                    </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                </div>
            </Spin>
        </div>
        <div className={style.bottom}>
            <Space size={20}>
                <span onClick={() => { setDxVisible(true) }}>{queryForm?.sysTargeting ? '重选定向' : '选择定向'}</span>
                <span onClick={() => { handleAdModalConfig(queryForm?.sysTargeting ? { visible: true, type: 'edit' } : { visible: true, type: 'add' }) }}>{queryForm?.sysTargeting ? '编辑定向' : '新建定向'}</span>
            </Space>
        </div>
        {/* 选择定向 */}
        {dxVisible && <TargetingModal visible={dxVisible} onClose={() => setDxVisible(false)} onChange={getInfo} sysTargetingId={queryForm?.sysTargetingId} />}
        {/* 选择定向包 */}
        {cpVisible && <CrowdPackModal visible={cpVisible} data={accountCreateLogs} onClose={() => setCpVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setCpVisible(false); clearData() }} />}
        {/* 设置自动扩量 */}
        {expandVisible && <ExpandModal
            visible={expandVisible}
            sysTargeting={queryForm.sysTargeting}
            expandData={{ expandEnabled: queryForm.expandEnabled || false, expandTargeting: queryForm.expandTargeting || [] }}
            data={accountCreateLogs}
            onClose={() => setExpandVisible(false)}
            onChange={(e, expandData) => {
                setAccountCreateLogs(e);
                setQueryForm({ ...queryForm, ...expandData })
                setExpandVisible(false)
                clearData()
            }}
        />}
        {/* 新建定向包 */}
        {adModalConfig.visible && <TargetingPup visible={adModalConfig.visible} PupFn={handleAdModalConfig} callback={(values: any) => {
            if (queryForm?.expandEnabled && queryForm?.expandTargeting && queryForm?.expandTargeting?.length > 0) {
                message.error('不可突破定向已重置，需要请重新设置')
                setQueryForm({ ...queryForm, sysTargeting: values, expandTargeting: [] });
            } else {
                setQueryForm({ ...queryForm, sysTargeting: values });
            }
            setDxVisible(false);
            clearData();
            handleAdModalConfig({ visible: false, dataInfo: null, type: 'add' })
        }} type={adModalConfig.type} dataInfo={queryForm.sysTargeting} />}
    </Col>
}

export default TargetIng