ad-manage/src/pages/launchSystemV3/tencentAdPutIn/create/MaterialText/newText.tsx

import TextAideInput from "@/pages/launchSystemV3/components/TextAideInput"
import { extractAndFilterBracketsContent, txtLength } from "@/utils/utils"
import { Button, Card, Form, Modal, Popconfirm, Radio, Space, message } from "antd"
import React, { useEffect, useState } from "react"
import { TextTypeList } from "../../const"
import { DeleteOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
import AddTextS from "./addTextS"
import style from '../index.less'
import styles from '../Material/index.less'
import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews"

interface Props {
    textData: any,
    dynamicMaterialDTos: any,
    mediaType: 0 | 1 | 2,
    deliveryMode?: string,
    value?: any,
    visible?: boolean
    onClose?: () => void
    onChange?: (value: any) => void
}

/**
 * 创意文案
 * @param param0 
 * @returns 
 */
const NewText: React.FC<Props> = ({ visible, onClose, onChange, value, textData, dynamicMaterialDTos, mediaType, deliveryMode }) => {

    /*************************************/
    const [form] = Form.useForm();
    const type = Form.useWatch('type', form)
    const textDto = Form.useWatch('textDto', form)

    const [textList, setTextList] = useState<PULLIN.TextDtoProps[]>([])
    const [desVisible, setDesVisible] = useState<boolean>(false)
    const [addSTitle, setAddStitle] = useState<string>()
    const [newText, setNewText] = useState<{ description?: string[], title?: string[] }>({})
    /*************************************/

    const handleOk = (values: any) => {
        console.log(values)
        const { type, textDto } = values
        onChange?.({
            type,
            dynamicCreativesTextDetailDTOList: textDto
        })
    }

    useEffect(() => {
        if (value && Object.keys(value).length) {
            const { type, dynamicCreativesTextDetailDTOList } = value
            form.setFieldsValue({ type, textDto: dynamicCreativesTextDetailDTOList })
        }
    }, [value])

    useEffect(() => {
        if (textData && Object.keys(textData)) {
            let newText: { description?: string[], title?: string[] } = {}
            let data = Object.values(textData).map((item: any) => {
                let content = item.children.content
                if (item.name === 'description') {
                    newText.description = ['']
                } else if (item.name === 'title') {
                    newText.title = ['']
                }
                return { label: content.description, restriction: content.restriction, value: item.name, required: item.required, arrayProperty: item?.arrayProperty }
            })
            setNewText(newText)
            if (!(value && Object.keys(value).length)) { form.setFieldsValue({ textDto: [newText] }) }
            setTextList(data)
        }
    }, [textData, value])

    // 一一对应显示素材
    const showMaterial = (index: number) => {
        const dynamicGroup = dynamicMaterialDTos?.dynamicGroup
        if (dynamicGroup && Object.keys(dynamicGroup).length) {
            let dynamic = dynamicGroup[index]
            const keys = Object.keys(dynamic)
            if (deliveryMode === "DELIVERY_MODE_CUSTOMIZE") {
                return <div className={style.detail_body_m}>
                    {(keys.includes('video_id') || keys.includes('short_video1')) ? <>
                        <div className={style.video}>
                            <VideoNews src={dynamic?.video_id?.url || dynamic?.short_video1?.url} style={{ width: 40, height: 30 }} />
                            {dynamic?.cover_id && <div className={style.cover_image} style={{ marginLeft: 4, width: 40, height: 30, minWidth: 42 }}>
                                <img src={dynamic?.cover_id?.url} style={{ maxWidth: '96%', maxHeight: '96%' }} />
                            </div>}
                        </div>
                    </> : keys.includes('image_id') ? <>
                        <div className={style.cover_image} style={{ width: 40, height: 30, minWidth: 42 }}>
                            <img src={dynamic?.image_id?.url} />
                        </div>
                    </> : (keys.includes('image_list') || keys.includes('element_story')) ? <>
                        {dynamic?.[keys.includes('image_list') ? 'image_list' : 'element_story']?.map((item: { url: string | undefined; }, index: undefined) => <div className={style.cover_image} key={index} style={{ width: 30, height: 24, minWidth: 32 }}>
                            <img src={item?.url} />
                        </div>)}
                    </> : null}
                </div>
            } else {
                return <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                    {dynamic?.list?.map((item: any, index: number) => {
                        if (Array.isArray(item)) {
                            let length = item.length
                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
                                <div className={styles.content} style={{ width: 30, height: 30 }}>
                                    {item.map((l, i) => <img src={l?.url} key={i} style={{ width: length === 6 ? 9.999 : 14.999 }} />)}
                                </div>
                            </div>
                        } else if (item?.url?.includes('mp4')) {
                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
                                <div className={styles.content} style={{ width: 30, height: 30 }}>
                                    <VideoNews src={item?.url} style={{ width: 30, height: 30 }} maskBodyStyle={{ backgroundColor: "rgba(242, 246, 254, 0.1)" }} />
                                </div>
                            </div>
                        } else {
                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
                                <div className={styles.content} style={{ width: 30, height: 30 }}><img src={item?.url} /></div>
                            </div>
                        }
                    })}
                </div>
            }
        }
        return null
    }

    return <Modal
        title={<Space>
            <strong style={{ fontSize: 20 }}>创意文案</strong>
            {type !== 0 && <>
                {textList.some(item => item.value === "description") && <a style={{ fontSize: 12 }} onClick={() => { setDesVisible(true); setAddStitle(textList.find(item => item.value === "description")?.label) }}>批量添加{textList.find(item => item.value === "description")?.label}</a>}
                {textList.some(item => item.value === "title") && <a style={{ fontSize: 12 }} onClick={() => { setDesVisible(true); setAddStitle(textList.find(item => item.value === "description")?.label) }}>批量添加{textList.find(item => item.value === "description")?.label}</a>}
            </>}
        </Space>}
        open={visible}
        onCancel={onClose}
        footer={null}
        width={800}
        className={`modalResetCss`}
        bodyStyle={{ padding: '0 0 40px', position: 'relative', borderRadius: '0 0 8px 8px' }}
        maskClosable={false}
    >
        <Form
            form={form}
            name="newText"
            labelAlign='left'
            layout="vertical"
            colon={false}
            style={{ backgroundColor: '#f1f4fc', maxHeight: 650, overflow: 'hidden', overflowY: 'auto', padding: '0 10px 10px', borderRadius: '0 0 8px 8px' }}
            scrollToFirstError={{
                behavior: 'smooth',
                block: 'center'
            }}
            onFinishFailed={({ errorFields }) => {
                message.error(errorFields?.[0]?.errors?.[0])
            }}
            initialValues={{
                type: 0,
                textDto: [{ description: [''], title: [''] }]
            }}
            onFinish={handleOk}
        >
            <Card className="cardResetCss" style={{ marginTop: 10 }}>
                <Form.Item name="type" label={<strong>文案分配规则</strong>} style={{ marginBottom: 0 }} rules={[{ required: true, message: '请选择文案分配规则!' }]}>
                    <Radio.Group onChange={(e) => {
                        let value = e.target.value
                        let count = dynamicMaterialDTos.dynamicGroup.length
                        let oldtextDto: PULLIN.TextDtoProps[] = JSON.parse(JSON.stringify(textDto))
                        let length = oldtextDto.length
                        if (value === 0) {
                            oldtextDto = [textDto[0] || {}]
                        } else if (value === 1) {
                            if (count > length) {
                                oldtextDto = oldtextDto.concat(Array(count - length).fill(newText || { description: [''] }))
                            } else {
                                oldtextDto = oldtextDto.slice(0, count)
                            }
                        } else if (value === 2) {
                            if (count < length) {
                                oldtextDto = oldtextDto.slice(0, count)
                            }
                        }
                        form.setFieldsValue({ textDto: oldtextDto })
                    }}>
                        {TextTypeList.filter(item => mediaType !== 1 ? item.value !== 4 : true).map(item => <Radio value={item.value} key={item.value}>{item.label}</Radio>)}
                    </Radio.Group>
                </Form.Item>
            </Card>

            <Form.List name="textDto">
                {(fields, { add, remove }) => (<>
                    {fields.map(({ key, name, ...restField }, num) => (
                        <Card
                            title={type === 0 ? null : <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
                                {type === 1 ? <strong style={{ fontSize: 14 }}>创意组{num + 1}</strong> : type === 0 ? null : <strong style={{ fontSize: 14 }}>文案组{num + 1}</strong>}
                                {type === 1 && showMaterial(num)}
                            </div>}
                            className="cardResetCss"
                            style={{ marginTop: 10, width: '100%' }}
                            key={key}
                            extra={([3, 2, 4].includes(type) && textDto?.length > 1) && <Popconfirm
                                title="你确定删除当前文案组?"
                                onConfirm={() => remove(name)}
                            >
                                <DeleteOutlined style={{ color: 'red' }} />
                            </Popconfirm>}
                        >
                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, width: '100%', flexDirection: 'column' }}>
                                {textList.map(item => {
                                    return <Form.List
                                        {...restField}
                                        name={[name, item.value]}
                                        key={key}
                                    >
                                        {(fields, { add, remove }) => <>
                                            {fields.map((field, tIndex) => (
                                                <Form.Item
                                                    {...field}
                                                    label={<Space>
                                                        <strong>{item.label}</strong>
                                                        {textDto?.[num]?.[item.value]?.length > 1 && <a style={{ color: 'red', fontSize: 12 }} onClick={() => remove(field.name)}><MinusCircleOutlined /></a>}
                                                    </Space>}
                                                    style={{ marginBottom: 0, width: '100%' }}
                                                    rules={[{
                                                        required: item.required, validator: (rule, value) => {
                                                            if (!value) {
                                                                return Promise.reject('请输入正确的' + item.label)
                                                            } else if (!value.match(RegExp(item.restriction.textRestriction.textPattern))) {
                                                                return Promise.reject('请输入正确的' + item.label)
                                                            } else if (txtLength(value) > item.restriction.textRestriction.maxLength) {
                                                                return Promise.reject('请输入正确的' + item.label)
                                                            }
                                                            const result = extractAndFilterBracketsContent(value);
                                                            if (result.extracted.length > 4) {
                                                                return Promise.reject('表情数量不得超出： 4 个')
                                                            }
                                                            return Promise.resolve()
                                                        }
                                                    }]}
                                                >
                                                    <TextAideInput placeholder={'请输入' + item.label} style={{ width: 580 }} maxTextLength={item.restriction.textRestriction.maxLength} />
                                                </Form.Item>
                                            ))}
                                            {deliveryMode === 'DELIVERY_MODE_COMPONENT' && item.arrayProperty?.maxNumber > 1 && textDto?.[num]?.[item.value]?.length < item.arrayProperty?.maxNumber && <Form.Item style={{ marginTop: 6, marginBottom: 0 }}>
                                                <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />} >
                                                    新增{item.label}
                                                </Button>
                                            </Form.Item>}
                                        </>}
                                    </Form.List>
                                })}
                            </div>
                        </Card>
                    ))}
                    {[3, 2, 4].includes(type) && !(type === 2 && textDto.length >= dynamicMaterialDTos.dynamicGroup.length) && <Form.Item style={{ marginTop: 10, marginBottom: 0 }}>
                        <Button type="primary" onClick={() => add(newText)} block icon={<PlusOutlined />} disabled={type === 3 && textDto.length >= 30}>
                            新增
                        </Button>
                    </Form.Item>}
                </>)}
            </Form.List>
            <Form.Item className="submit_pull">
                <Space>
                    <Button onClick={onClose}>取消</Button>
                    <Button type="primary" htmlType="submit" className="modalResetCss">
                        确定
                    </Button>
                </Space>
            </Form.Item>
        </Form>

        {/* 批量添加 */}
        {desVisible && <AddTextS
            visible={desVisible}
            title={addSTitle}
            onClose={() => {
                setDesVisible(false)
                setAddStitle(undefined)
            }}
            onChange={(value) => {
                if (value) {
                    let valList = value
                        .split(/\r?\n/)        // 按换行符分割字符串
                        .map(line => line.trim()) // 去除每行的首尾空白
                        .filter(line => line !== ''); // 过滤掉空行
                    let fieldData = textList.find(item => item.label === addSTitle)
                    let count = dynamicMaterialDTos.dynamicGroup.length
                    if (type === 1) {
                        let len = 0
                        const newTextDto = textDto.map((item: { [x: string]: any }) => {
                            if (fieldData?.value && (item?.[fieldData?.value]?.length === 0 || !item?.[fieldData?.value]?.every((t: string) => t)) && valList.length >= len + 1) {
                                return {
                                    ...item,
                                    [fieldData.value]: (item?.[fieldData?.value]?.length === 0 ? [''] : item?.[fieldData?.value]).map((t: string) => {
                                        if (t) {
                                            return t
                                        } else {
                                            return valList[len++]
                                        }
                                    })
                                }
                            }
                            return item
                        })
                        form.setFieldsValue({
                            textDto: newTextDto
                        })
                    } else if (type === 2) {
                        let len = 0
                        const newTextDto = textDto.map((item: { [x: string]: any }) => {
                            if (fieldData?.value && (item?.[fieldData?.value]?.length === 0 || !item?.[fieldData?.value]?.every((t: string) => t)) && valList.length >= len + 1) {
                                return {
                                    ...item,
                                    [fieldData.value]: (item?.[fieldData?.value]?.length === 0 ? [''] : item?.[fieldData?.value]).map((t: string) => {
                                        if (t) {
                                            return t
                                        } else {
                                            return valList[len++]
                                        }
                                    })
                                }
                            }
                            return item
                        })
                        let diffTextDto: any[] = []
                        if (newTextDto.length < count && len < valList.length) {
                            let diffCount = count - newTextDto.length
                            let diffTextCount = valList.length - len
                            let diff = 0
                            if (diffCount >= diffTextCount) {
                                diff = diffTextCount
                            } else {
                                diff = diffCount
                            }
                            diffTextDto = Array(diff).fill('').map((item: { [x: string]: any }) => {
                                if (fieldData?.value) {
                                    return { ...item, [fieldData.value]: [valList[len++]] }
                                }
                                return item
                            })
                        }
                        form.setFieldsValue({
                            textDto: [...newTextDto, ...diffTextDto]
                        })
                    } else if ([3, 4].includes(type)) {
                        let len = 0
                        const newTextDto = textDto.map((item: { [x: string]: any }) => {
                            if (fieldData?.value && (item?.[fieldData?.value]?.length === 0 || !item?.[fieldData?.value]?.every((t: string) => t)) && valList.length >= len + 1) {
                                return {
                                    ...item, [fieldData.value]: (item?.[fieldData?.value]?.length === 0 ? [''] : item?.[fieldData?.value]).map((t: string) => {
                                        if (t) {
                                            return t
                                        } else {
                                            return valList[len++]
                                        }
                                    })
                                }
                            }
                            return item
                        })
                        let diffTextDto: any[] = []
                        if (len < valList.length) {
                            let diff = valList.length - len
                            diffTextDto = Array(diff).fill('').map((item: { [x: string]: any }) => {
                                if (fieldData?.value) {
                                    return { ...item, [fieldData.value]: [valList[len++]] }
                                }
                                return item
                            })
                        }
                        form.setFieldsValue({
                            textDto: [...newTextDto, ...diffTextDto]
                        })
                    }
                }
                setDesVisible(false)
                setAddStitle(undefined)
            }}
        />}
    </Modal>
}

export default React.memo(NewText)