ad-manage/src/pages/launchSystemV3/tencentAdPutIn/create/Target/index.tsx

import React, { useContext, useState } from "react"
import style from '../index.less'
import { Button, Typography } from "antd"
import { PlusCircleOutlined, PlusOutlined, RedoOutlined } from "@ant-design/icons"
import SelectTarget from "./selectTarget"
import { DispatchAddelivery } from ".."
import { useModel } from "umi"
import DataItem from "./dataItem"
import AddTarget from "./addTarget"
const { Title } = Typography;

/**
 * 定向
 * @returns 
 */
const Target: React.FC = () => {

    /***************************************/
    const { geoLocationList, modelList } = useModel('useLaunchV3.useTargeting')
    const { addelivery, setAddelivery, clearData } = useContext(DispatchAddelivery)!;
    const { targeting, adgroups } = addelivery
    const [addVisible, setAddVisible] = useState<boolean>(false)
    const [addTemVisible, setAddTemVisible] = useState<boolean>(false)
    const [modifyDta, setModifyDta] = useState<any>()
    const [modifyLength, setModifyLength] = useState<number>()
    /***************************************/


    return <>
        <div className={`${style.settingsBody_content_row} ${style.row2}`}>
            <div className={style.title}>
                <span>定向 <span className={style.selected}>已选 {targeting?.length || 0}</span></span>
                {targeting?.length > 0 && <Button type="link" size="small" style={{ fontSize: 11, padding: 0 }} onClick={() => setAddelivery({ ...addelivery, targeting: [] })}><RedoOutlined />清空</Button>}
            </div>
            <div className={style.detail}>
                <div className={style.detail_body}>
                    {targeting?.length > 0 && <>
                        <Title level={5} style={{ fontSize: 12 }}>全部相同</Title>
                        {targeting?.map((item: { targetingName: any; targeting: any, id?: number }, index: number) => <div key={index}>
                            <DataItem
                                geoLocationList={geoLocationList}
                                modelList={modelList}
                                key={index}
                                targeting={{ targetingName: item.targetingName, ...item.targeting }}
                                onClear={() => {
                                    let newTargeting: any[] = JSON.parse(JSON.stringify(targeting))
                                    setAddelivery({ ...addelivery, targeting: newTargeting.filter((_, i) => index !== i) })
                                }}
                                onModify={() => {
                                    setModifyLength(index)
                                    setModifyDta({ targetingName: item?.id ? ('修_' + item.targetingName) : item.targetingName, ...item.targeting })
                                    setAddTemVisible(true)
                                }}
                            />
                        </div>)}
                    </>}
                </div>
                <div className={style.detail_footer}>
                    <Button
                        type="link"
                        icon={<PlusOutlined />}
                        style={{ padding: 0, fontSize: 12 }}
                        onClick={() => {
                            setModifyDta(undefined)
                            setAddTemVisible(true)
                            setModifyLength(undefined)
                        }}
                        disabled={!(adgroups && Object.keys(adgroups)?.length > 0)}
                    >
                        新增
                    </Button>
                    <Button disabled={!(adgroups && Object.keys(adgroups)?.length > 0)} type="link" icon={<PlusCircleOutlined />} style={{ padding: 0, fontSize: 12 }} onClick={() => setAddVisible(true)}>添加</Button>
                </div>
            </div>
        </div>


        {/* 添加定向 */}
        {addVisible && <SelectTarget
            value={targeting?.filter(item => item?.id)}
            visible={addVisible}
            onClose={() => {
                setAddVisible(false)
            }}
            onChange={(target) => {
                // 获取当前新增的，不是模板复制的全是当前和模板没关系
                let currentTarget = targeting?.filter((item: { id: any }) => !item?.id) || []
                setAddelivery({ ...addelivery, targeting: [...target, ...currentTarget] })
                setAddVisible(false)
            }}
        />}

        {/* 新增修改定向模板 */}
        {addTemVisible && <AddTarget
            value={modifyDta}
            isBackVal={true}
            visible={addTemVisible}
            onClose={() => {
                setAddTemVisible(false)
                setModifyDta(undefined)
            }}
            onChange={(newTargeting) => {
                setAddTemVisible(false)
                setModifyDta(undefined)
                let newTarget: any[] = JSON.parse(JSON.stringify(targeting || []))
                if (modifyLength !== undefined) {
                    newTarget[modifyLength] = newTargeting
                } else {
                    newTarget.push(newTargeting)
                }
                setModifyLength(undefined)
                setAddelivery({ ...addelivery, targeting: newTarget })
                clearData()
            }}
        />}
    </>
}

export default React.memo(Target)