qc-EnterpriseWeChat-Pro/src/pages/weComTask/page/businessPlan/create/components/massSending/materialNoTextMould.tsx

import { Space } from "antd"
import React, { useEffect, useState } from "react"
import { TextEditor } from "@/pages/weComTask/components/textEditor"
import MaterialMould from "@/pages/weComTask/components/materialMould"

interface Props {
    value?: TASK_CREATE.ContentDTOProps
    onChange?: (value?: TASK_CREATE.ContentDTOProps) => void
}
/**
 * 群发文本设置
 * @returns 
 */
const MaterialNoTextMould: React.FC<Props> = ({ onChange, value }) => {

    /***************************************/
    const [textContent, setTextContent] = useState<string>()
    const [attachmentList, setAttachmentList] = useState<any>()
    /***************************************/

    /** 回填 */
    useEffect(() => {
        if (value) {
            if (value?.text?.content && !textContent) {
                const newValue = value?.text?.content
                setTextContent(newValue)
            }
            if (value?.attachmentList && value?.attachmentList?.length > 0 && !attachmentList) {
                const newAttachmentList = value?.attachmentList.map(item => {
                    switch (item.msgType) {
                        case 'TASK_CONTENT_IMAGE':
                            return { mediaType: 'image', imageUrl: item?.image?.picUrl }
                        case 'TASK_CONTENT_LINK':
                            return { mediaType: 'link', linkDesc: item?.link?.desc, linkPicurl: item?.link?.picUrl, linkTitle: item?.link?.title, linkUrl: item?.link?.url }
                        case 'TASK_STATUS_FILE':
                            return { mediaType: 'file', fileUrl: item?.file?.fileUrl }
                        case 'TASK_STATUS_VIDEO':
                            return { mediaType: 'video', videoUrl: item?.video?.videoUrl }
                        case 'TASK_STATUS_MINIPROGRAM':
                            return {
                                mediaType: 'miniprogram',
                                miniprogramAppid: item.miniprogram?.appId,
                                miniprogramPage: item?.miniprogram?.page,
                                miniprogramPicurl: item?.miniprogram?.picUrl,
                                miniprogramTitle: item?.miniprogram?.title
                            }
                    }
                })
                setAttachmentList(newAttachmentList)
            }
        }
    }, [value, textContent, attachmentList])

    /** 返回 */
    const handleChange = (textContent: any, attachmentList?: any) => {
        let newAttachmentList: TASK_CREATE.Attachment[] = []
        let text: any = {}
        if (textContent) {
            text = {
                content: textContent
            }
        }
        if (attachmentList && attachmentList?.length > 0) {
            newAttachmentList = attachmentList.map((item: TASK_CREATE.MediaContentProps) => {
                switch (item.mediaType) {
                    case 'image':
                        return { image: { picUrl: item.imageUrl }, msgType: 'TASK_CONTENT_IMAGE' }
                    case 'video':
                        return { video: { videoUrl: item.videoUrl }, msgType: 'TASK_STATUS_VIDEO' }
                    case 'file':
                        return { file: { fileUrl: item.fileUrl }, msgType: 'TASK_STATUS_FILE' }
                    case 'link':
                        return { link: { desc: item.linkDesc, picUrl: item.linkPicurl, title: item.linkTitle, url: item.linkUrl }, msgType: 'TASK_CONTENT_LINK' }
                    case 'miniprogram':
                        return {
                            miniprogram: {
                                appId: item.miniprogramAppid,
                                page: item.miniprogramPage,
                                picUrl: item.miniprogramPicurl,
                                title: item.miniprogramTitle
                            },
                            msgType: 'TASK_STATUS_MINIPROGRAM'
                        }
                }
            })
        }
        if (text?.content) {
            text.content = text.content.replace(/\n$/, '')
        }
        onChange?.({
            attachmentList: newAttachmentList as any,
            text
        })
    }

    return <Space style={{ width: '100%' }} direction='vertical'>
        <TextEditor
            maxStr={2000}
            value={textContent || ''}
            onChange={(value) => {
                setTextContent(value)
                handleChange(value, attachmentList)
            }}
        />
        <MaterialMould
            posiType="QF"
            noShowType={['voice']}
            textCount={1}
            value={attachmentList}
            onChange={(value) => {
                if (value?.length > 0) {
                    let newText: TASK_CREATE.MediaContentProps[] = []
                    let newAttachmentList: TASK_CREATE.MediaContentProps[] = []
                    value?.forEach((cur: TASK_CREATE.MediaContentProps) => {
                        if (cur.mediaType === 'text') {
                            newText.push(cur)
                        } else {
                            newAttachmentList.push(cur)
                        }
                    })
                    if (newText.length > 0) {
                        if (textContent) {
                            setTextContent('')
                            setAttachmentList(newAttachmentList)
                            handleChange(newText[0].textContent, newAttachmentList)
                        } else {
                            setTextContent('')
                            setAttachmentList(newAttachmentList)
                            handleChange(newText[0].textContent, newAttachmentList)
                        }
                    } else {
                        setAttachmentList(value)
                        handleChange(textContent, value)
                    }
                } else {
                    setAttachmentList([])
                    handleChange(textContent, [])
                }
            }} />
    </Space>
}

export default React.memo(MaterialNoTextMould)