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 } from "@ant-design/icons"
import { Button, Col, Empty, Popover, Space, Spin, Tooltip } from "antd"
import React, { useCallback, 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"
type Props = {
    queryForm: Partial<CreateAdProps>,
    setQueryForm: React.Dispatch<React.SetStateAction<Partial<CreateAdProps>>>,
    setAccountCreateLogs: React.Dispatch<React.SetStateAction<{
        adAccountId: number;
        id: number;
        userActionSetsList?: number | undefined;
        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 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}>
            定向
            {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>}</>}
            {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?.sysTargetingId ? <>
                        {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>定向名称: <span>{queryForm?.sysTargeting?.targetingName}</span></div>
                                    <div>定向描述: <span>{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>定向名称: <span>{queryForm?.sysTargeting?.targetingName}</span></div>
                            <div>定向描述: <span>{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() }} />}
        {/* 新建定向包 */}
        {adModalConfig.visible && <TargetingPup visible={adModalConfig.visible} PupFn={handleAdModalConfig} callback={(values: any) => {
            setQueryForm({ ...queryForm, sysTargeting: values, }); setDxVisible(false); clearData();
            handleAdModalConfig({ visible: false, dataInfo: null, type: 'add' }) 
        }} type={adModalConfig.type} dataInfo={queryForm.sysTargeting} />}
    </Col>
}

export default TargetIng