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

import { Button, Card, Form, InputNumber, Modal, Select, Space, message } from "antd"
import React from "react"
import '../../index.less'
import { getRandomElements } from "@/utils/utils"
import { REGION_DATA } from "./const"

interface Props {
    target: any
    visible?: boolean,
    onClose?: () => void
    onChange?: (value: any) => void
}
const GenerateTarget: React.FC<Props> = ({ target, visible, onChange, onClose }) => {

    /*********************************/
    const [form] = Form.useForm();

    /*********************************/

    const handleOk = (values: any) => {
        const zhongguo = [156, 540000, 630000, 510000, 450000, 320000, 220000, 370000, 340000, 150000, 140000, 420000, 130000, 360000, 310000, 330000, 650000, 350000, 120000, 110000, 640000, 530000, 210000, 610000, 520000, 230000, 460000, 440000, 500000, 410000, 620000, 430000]
        const locationTypes = ["LIVE_IN"]
        const { regions, count } = values

        let regionsData = REGION_DATA.find(item => item.value === regions)
        let children = regionsData?.children || []

        interface Region {
            title: string;
            value: number;
            key: number;
            parentId?: number;
            disabled?: boolean;
            children?: Region[];
        }

        function getRegionPaths(region: Region, parentPath: string = ''): string[] {
            const currentPath = parentPath ? `${parentPath},${region.value}` : `${region.value}`;
            const paths = [];
            if (region?.children?.length) {
                for (const child of region.children) {
                    paths.push(...getRegionPaths(child, currentPath));
                }
            } else {
                paths.push(currentPath)
            }
            return paths;
        }

        function getAllPaths(regions: Region[]): string[] {
            let allPaths: string[] = [];
            for (const region of regions) {
                allPaths = allPaths.concat(getRegionPaths(region));
            }
            return allPaths;
        }

        let regionsList: string[] = getAllPaths(children);
        if (regionsList.length === 0) {
            message.error('请联系管理员')
            return
        }
        const getTarget = (count: number, regionsList: string[]): any => {
            let dataRandom = getRandomElements(regionsList, count)
            return dataRandom.map(item => {
                let r = item.split(',')
                let rData = children.find(c => c.value.toString() === r[0])
                let rName = rData?.title
                let regionsL = children.map(item => item.value)
                if (r.length > 1) {
                    let lChildren = rData?.children || []
                    let lData = lChildren.find(item => item.value.toString() === r[1])
                    let lName = lData?.title
                    let lRegionsL = lChildren.map(item => item.value)
                    console.log('target?.targeting?.regions', target?.targeting)
                    return {
                        ...target,
                        targetingName: `${regionsData?.title}无${rName}${lName}+` + target.targetingName,
                        targeting: {
                            ...(target?.targeting || {}),
                            geoLocation: {
                                locationTypes: (target?.targeting?.geoLocation?.locationTypes || locationTypes),
                                regions: [...((target?.targeting?.geoLocation?.regions || zhongguo) as number[]).filter(item => item !== regions), ...regionsL.filter(item => item.toString() !== r[0]), ...lRegionsL.filter(item => item.toString() !== r[1])]
                            }
                        }
                    }
                } else {
                    return {
                        ...target,
                        targetingName: `${regionsData?.title}无${rName}+` + target.targetingName,
                        targeting: {
                            ...(target?.targeting || {}),
                            geoLocation: {
                                locationTypes: (target?.targeting?.geoLocation?.locationTypes || locationTypes),
                                regions: [...((target?.targeting?.geoLocation?.regions || zhongguo) as number[]).filter(item => item !== regions), ...regionsL.filter(item => item.toString() !== r[0])]
                            }
                        }
                    }
                }
            })
        }
        let data: any[] = []
        if (target?.targeting?.geoLocation) {
            let oldregions: number[] = target.targeting.geoLocation.regions
            if (oldregions.includes(regions)) {
                data = data.concat(getTarget(count, regionsList))
            } else { // 不包含 regionsList
                message.error('当前地域已经排除了该省下的某个区或者县')
                return
            }
        } else {
            data = data.concat(getTarget(count, regionsList))
        }
        onChange?.(data)
    }

    return <Modal
        title={<strong>一键生成定向配置</strong>}
        visible={visible}
        className='modalResetCss'
        onCancel={onClose}
        bodyStyle={{ padding: '0 0 40px', position: 'relative', borderRadius: '0 0 8px 8px' }}
        footer={null}
    >
        <Form
            form={form}
            name="generateTarget"
            labelAlign='left'
            labelCol={{ span: 4 }}
            colon={false}
            style={{ backgroundColor: '#f1f4fc', maxHeight: 600, overflow: 'hidden', overflowY: 'auto', padding: '10px 10px 10px', borderRadius: '0 0 8px 8px' }}
            scrollToFirstError
            onFinishFailed={({ errorFields }) => {
                message.error(errorFields?.[0]?.errors?.[0])
            }}
            onFinish={handleOk}
            initialValues={{
                regions: 540000,
                count: 3
            }}
        >
            <Card
                title={<strong style={{ fontSize: 14 }}>生成设置</strong>}
                className="cardResetCss"
            >
                <Form.Item
                    label={<strong>地域差异</strong>}
                    name='regions'
                    rules={[
                        { required: true, message: '请选择' }
                    ]}
                >
                    <Select
                        placeholder="请选择"
                        showSearch
                        filterOption={(input, option) =>
                            ((option?.children ?? '') as any).toLowerCase().includes(input.toLowerCase())
                        }
                    >
                        {REGION_DATA.map(item => <Select.Option value={item.value} key={item.key}>{item.title}</Select.Option>)}
                    </Select>
                </Form.Item>
                <Form.Item
                    label={<strong>生成数量</strong>}
                    name='count'
                    rules={[
                        { required: true, message: '请输入生成数量' }
                    ]}
                >
                    <InputNumber max={20} style={{ width: '100%' }} placeholder="请输入生成数量" />
                </Form.Item>
            </Card>
            <Form.Item className="submit_pull">
                <Space>
                    <Button onClick={onClose}>取消</Button>
                    <Button type="primary" htmlType="submit" className="modalResetCss">
                        确定
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(GenerateTarget)