ad-manage/src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/copywriting.tsx

import TextAideInput from "@/pages/launchSystemNew/components/textAideInput"
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
import { Button, Collapse, Form, Modal, Space } from "antd"
import React, { useEffect, useState } from "react"
import styles from './index.less'


interface Props {
    value?: any[]
    textData?: any[],
    model?: 'cross' | 'corres',
    material?: {
        label: string;
        name: string;
        restriction: any;
        arrayProperty?: any;
    }[],
    sysAdcreative: any
    onChange?: (data: any) => void
}

/**
 * 文案设置
 * @returns 
 */
const Copywriting: React.FC<Props> = (props) => {

    /******************************/
    const { onChange, textData = [], sysAdcreative, value, model, material } = props
    const { adcreativeTemplateId, linkNameType } = sysAdcreative
    const [visible, setVisible] = useState<boolean>(false)
    const [form] = Form.useForm();
    /******************************/

    // 回填
    useEffect(() => {
        if (visible) {
            if (value && value?.length > 0) {
                form.setFieldsValue({ texts: value })
            } else {
                form.setFieldsValue({ texts: [undefined] })
            }
        }
    }, [value, visible])

    const handleOk = () => {
        form.validateFields().then(values => {
            console.log('values=>1', values)
            onChange && onChange(values?.texts)
            setVisible(false)
        })
    }
    
    return <>
        <span onClick={() => { setVisible(true) }}>{value && value?.length > 0 ? '编辑' : '添加'}</span>
        {visible && <Modal visible={visible} onCancel={() => setVisible(false)} title="创意文案" width={700} onOk={handleOk}>
            <Form name="dynamic_form_item" form={form} labelAlign='left' >
                <Form.List name="texts">
                    {(fields, { add, remove }) => (<>
                        <Collapse activeKey={fields.map(field => field.name)} bordered={false}>
                            {fields.map((field, num) => (<Collapse.Panel
                                showArrow={false}
                                header={<Space>
                                    <span>{`文案组${num + 1}`}</span>
                                    <div className={styles.groups}>
                                        {material && material?.length >= num + 1 && model === 'corres' && [material[num]]?.map((item: any, index: number) => {
                                            let keys = Object.keys(item)
                                            if (keys?.includes('imageUrlList')) {
                                                return <div key={index} className={styles.group}>
                                                    {item?.imageUrlList?.map((url: string, index: number) => <div key={index}><img src={url} /></div>)}
                                                </div>
                                            } else if (keys?.includes('elementStory')) {
                                                return <div key={index} className={styles.group}>
                                                    {item?.elementStory?.map((item: { imageUrl: string }, index: number) => <div key={index}><img src={item.imageUrl} /></div>)}
                                                </div>
                                            } else {
                                                if (keys?.length > 1) {
                                                    return <div key={index} className={styles.otherGroup}>
                                                        {keys?.includes('imageUrl') && <div className={styles.group}><img src={item.imageUrl} /></div>}
                                                        {keys?.includes('videoUrl') && <div className={styles.group}><video src={item.videoUrl} /></div>}
                                                        {keys?.includes('shortVideo1Url') && <div className={styles.group}><video src={item.shortVideo1Url} /></div>}
                                                    </div>
                                                } else {
                                                    if (keys?.includes('imageUrl')) {
                                                        return <div key={index} className={styles.group}><img src={item.imageUrl} /></div>
                                                    } else if (keys?.includes('videoUrl')) {
                                                        return <div key={index} className={styles.group}><video src={item.videoUrl} /></div>
                                                    } else if (keys?.includes('shortVideo1Url')) {
                                                        return <div key={index} className={styles.group}><video src={item.shortVideo1Url} /></div>
                                                    }
                                                }
                                                return null
                                            }
                                        })}
                                    </div>
                                </Space>}
                                key={(field.name).toString()}
                                extra={fields?.length > 1 && <MinusCircleOutlined className={styles.clear}
                                    onClick={() => remove(field.name)}
                                    style={{ color: 'red' }}
                                />}
                            >
                                {textData?.map((item, index) => {
                                    if (item.name === 'title') {
                                        return <div key={'title' + item.fieldType}>
                                            <Form.Item {...field} label={<strong>{item.description}(选填)</strong>} name={[field.name, item.name]} rules={[{ pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${item.restriction.textRestriction.maxLength}}`)), message: '请输入正确的' + item.description }]}>
                                                <TextAideInput placeholder={'请输入' + item.description} style={{ width: 450 }} maxTextLength={item.restriction.textRestriction.maxLength} />
                                            </Form.Item>
                                        </div>
                                    }
                                    if (item.name === 'description') {
                                        let maxNum = (adcreativeTemplateId === 1708 || adcreativeTemplateId === 1707) && linkNameType ?  10 : item.restriction.textRestriction.maxLength
                                        return <div key={'description' + item.fieldType}>
                                            <Form.Item {...field} label={<strong>{item.description}</strong>} name={[field.name, item.name]} rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${maxNum}}`)), message: '请输入正确的' + item.description }]}>
                                                <TextAideInput placeholder={'请输入' + item.description} style={{ width: 450 }} maxTextLength={maxNum} />
                                            </Form.Item>
                                        </div>
                                    }
                                    return null
                                })}
                            </Collapse.Panel>))}
                        </Collapse>
                        <Form.Item>
                            <Button type="link" onClick={() => add()} icon={<PlusOutlined />} style={{ padding: 0 }}>
                                新增文案组
                            </Button>
                        </Form.Item>
                    </>)}
                </Form.List>
            </Form>
        </Modal>}
    </>
}


export default React.memo(Copywriting)