ad-manage/src/pages/launchSystemNew/components/addLandingPage/sortable.tsx

import { ArrowDownOutlined, ArrowUpOutlined, BorderRightOutlined, DeleteOutlined, DragOutlined, LinkOutlined, PlusOutlined, RetweetOutlined, UserAddOutlined } from "@ant-design/icons";
import React from "react";
import { SortableContainer, SortableElement, SortableHandle } from "react-sortable-hoc";
import { ReactComponent as Img } from '@/assets/img.svg'
import { ReactComponent as EditSvg } from '@/assets/edit.svg'
import { ReactComponent as MyText } from '@/assets/text.svg'
import { ReactComponent as ImgText } from '@/assets/imgText.svg'
import { ReactComponent as FollowAcc } from '@/assets/followAcc.svg'
import { ReactComponent as JumpLink } from '@/assets/jumpLink.svg'
import { ReactComponent as WxAutoSvg } from '@/assets/wxAutoSvg.svg'
import './index1.less'
import { Tooltip } from "antd";

const DragHandle = SortableHandle(() => <button style={{ cursor: 'grab' }} className="handle" onClick={(e) => { e.stopPropagation() }}><BorderRightOutlined /></button>);


const ComptEdit = (props: {
    data: any,
    pureImageUrl?: string,
    handleBtn: (type: string, index: number) => void,
    del: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
    upload?: () => void
}) => {
    const { data, handleBtn, del, pureImageUrl, upload } = props
    return <>
        <section className="comptEditTrBtns">
            <div className="comptEditTrBtnsInner">
                {data.index > 1 && <a onClick={(e) => { e.stopPropagation(); handleBtn('upper', data.index) }}><ArrowUpOutlined /></a>}
                {data.length !== data.index + 1 && <a onClick={(e) => { e.stopPropagation(); handleBtn('lower', data.index) }}><ArrowDownOutlined /></a>}
                <Tooltip placement="topRight" color="#FFF" title={<div className="assBts">
                    <div onClick={(e) => { e.stopPropagation(); handleBtn('IMAGE', data.index) }}><Img /></div>
                    <div onClick={(e) => { e.stopPropagation(); handleBtn('TEXT', data.index) }}><MyText /></div>
                    <div onClick={(e) => { e.stopPropagation(); handleBtn('GH', data.index) }}><FollowAcc /></div>
                    {/* <div onClick={(e) => { e.stopPropagation(); handleBtn('link', data.index) }}><JumpLink /></div>
                    <div onClick={(e) => { e.stopPropagation(); handleBtn('shelfnew', data.index) }}><ImgText /></div> */}
                    <div onClick={(e) => { e.stopPropagation(); handleBtn('ENTERPRISE_WX', data.index) }}><WxAutoSvg /></div>
                </div>}>
                    <a><PlusOutlined /></a>
                </Tooltip>
            </div>
        </section>
        <section className={'comptEditBtns'}>
            <div className={'comptEditBtnsInner'}>
                {pureImageUrl && <button onClick={() => { upload && upload() }}><EditSvg /></button>}
                <DragHandle />
                <button onClick={(e) => { del(e) }}><DeleteOutlined /></button>
            </div>
        </section>
    </>
}

/** 内容文本 */
export const SortableItemText = SortableElement(({ item, click, del, pageBackColor, handleBtn, data }: any) => {
    let { fontSize, fontColor, textAlignment, text, fontStyle, paddingTop, paddingBottom } = item
    return <div className={`compt componentType1 ${item.comptActive && 'comptActive'}`} onClick={(e) => { click(e) }}>
        <div className={'componentWrap'}>
            <div className={'componentContent'} style={{ backgroundColor: pageBackColor }}>
                <div className={'text'} style={{ lineHeight: fontSize * 1.5 + 'px', fontSize: fontSize, color: fontColor, textAlign: textAlignment === 0 ? 'left' : textAlignment === 1 ? 'center' : 'right', fontWeight: fontStyle === 0 ? 'normal' : 'bold', maxWidth: '100%', display: 'block', marginLeft: 24, marginRight: 24, marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }}>
                    <div>{text ?
                        text?.split(/[\r\n]/g)?.map((item: any, index: number) => {
                            if (item) {
                                return <div key={`item${index}`}>
                                    {item?.split(' ')?.map((item1: any, ind: number) => {
                                        if (item1) {
                                            return <span key={`item1${ind}`}>{item1}</span>
                                        } else {
                                            return <span key={`item1${ind}`}>&nbsp;</span>
                                        }
                                    })}
                                </div>
                            } else {
                                return <div key={`item${index}`}>&nbsp;</div>
                            }
                        })
                        : '请输入文本内容'}</div>
                </div>
                <div className={'textAreaDiv'} style={{ lineHeight: fontSize * 1.5 + 'px', fontSize: fontSize, margin: '11px 24px', marginLeft: 24, marginRight: 24, marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }}>
                    <textarea readOnly value={text} className={'textarea'} placeholder={item.comptActive ? `请在右侧输入文本内容` : '请输入文本内容'} style={{ color: fontColor, fontWeight: fontStyle === 0 ? 'normal' : 'bold', textAlign: textAlignment === 0 ? 'left' : textAlignment === 1 ? 'center' : 'right', backgroundColor: pageBackColor }}></textarea>
                </div>
            </div>
        </div>
        <ComptEdit data={data} handleBtn={(type, index) => { handleBtn(type, index) }} del={(e) => { del(e) }} />
    </div>
});
/** 内容图片 */
export const SortableItemImg = SortableElement(({ item, click, del, upload, data, handleBtn }: any) => {
    let { imageUrl, paddingTop, paddingBottom } = item
    return <div className={`compt componentType41 ${item.comptActive && 'comptActive'}`} onClick={(e) => { click(e) }}>
        <div className={'componentWrap'}>
            <div className={'componentContent'}>
                {
                    imageUrl ? <img src={imageUrl} style={{ display: 'block', width: '100%', margin: 0, marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }} /> : <div className={'default'} style={{ width: 375, height: 222, margin: 0, marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }}>
                        <div className={'defaultIcon'} style={{ marginTop: 44 }}>
                            <Img />
                        </div>
                    </div>
                }
            </div>
        </div>
        {!imageUrl && <div className={'comptUpload'} style={{ margin: 0, marginTop: paddingTop / 2, marginBottom: paddingBottom / 2 }}>
            <button style={{ marginTop: 114 }} className={'comptEditButton'} onClick={() => { upload(1) }}>上传图片</button>
        </div>}
        <ComptEdit data={data} handleBtn={(type, index) => { handleBtn(type, index) }} del={(e) => { del(e) }} pureImageUrl={imageUrl} upload={() => { upload(1) }} />
    </div>
});
/** 内容关注公众号按钮 */
export const SortableItemFollowAcc = SortableElement(({ item, click, del, data, handleBtn }: any) => {
    let { paddingTop, paddingBottom, btnTitle, fontColor, btnBgColorTheme, btnBorderColorTheme, btnFontType, useIcon } = item
    return <div className={`compt componentType21 ${item.comptActive && 'comptActive'}`} onClick={(e) => { click(e) }}>
        <div className={'componentWrap'}>
            <div className={'componentContent'}>
                <div style={{ marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }}>
                    <div style={{ textAlign: 'center', lineHeight: 0, maxWidth: '100%', margin: '0 92.5px' }}>
                        <a style={{
                            textDecoration: 'none', color: fontColor || 'rgb(255,255,255)', backgroundColor: btnBgColorTheme || 'rgb(7, 193, 96)',
                            border: ['#FFFFFF', '#ffffff', 'rgb(255, 255, 255)'].indexOf(btnBorderColorTheme) !== -1 ? '0px solid rgb(255, 255, 255)' : `2px solid ${btnBorderColorTheme}`, borderRadius: 4, display: 'flex', alignItems: 'center',
                            overflow: 'hidden', justifyContent: 'center', whiteSpace: 'pre', fontWeight: btnFontType === 0 ? 'normal' : 'bold',
                            height: 40, lineHeight: 40, width: '100%', fontSize: 15
                        }}>{useIcon === 1 && <UserAddOutlined style={{ marginRight: 6 }} />}{btnTitle || ''}</a>
                    </div>
                </div>
            </div>
        </div>
        <ComptEdit data={data} handleBtn={(type, index) => { handleBtn(type, index) }} del={(e) => { del(e) }} />
    </div>
})

/** 内容添加商家微信按钮 */
export const SortableItemWxAuto = SortableElement(({ item, click, del, data, handleBtn }: any) => {
    let { paddingTop, paddingBottom, btnTitle, fontColor, btnBgColorTheme, btnBorderColorTheme, btnFontType, useIcon } = item
    return <div className={`compt componentType21 ${item.comptActive && 'comptActive'}`} onClick={(e) => { click(e) }}>
        <div className={'componentWrap'}>
            <div className={'componentContent'}>
                <div style={{ marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }}>
                    <div style={{ textAlign: 'center', lineHeight: 0, maxWidth: '100%', margin: '0 92.5px' }}>
                        <a style={{
                            textDecoration: 'none', color: fontColor || 'rgb(255,255,255)', backgroundColor: btnBgColorTheme || 'rgb(7, 193, 96)',
                            border: ['#FFFFFF', '#ffffff', 'rgb(255, 255, 255)'].indexOf(btnBorderColorTheme) !== -1 ? '0px solid rgb(255, 255, 255)' : `2px solid ${btnBorderColorTheme}`, borderRadius: 4, display: 'flex', alignItems: 'center',
                            overflow: 'hidden', justifyContent: 'center', whiteSpace: 'pre', fontWeight: btnFontType === 0 ? 'normal' : 'bold',
                            height: 40, lineHeight: 40, width: '100%', fontSize: 15
                        }}>{useIcon === 1 && <UserAddOutlined style={{ marginRight: 6 }} />}{btnTitle || ''}</a>
                    </div>
                </div>
            </div>
        </div>
        <ComptEdit data={data} handleBtn={(type, index) => { handleBtn(type, index) }} del={(e) => { del(e) }} />
    </div>
})

/** 内容跳转链接按钮 */
export const SortableItemJumpLink = SortableElement(({ item, click, del, data, handleBtn }: any) => {
    let { paddingTop, paddingBottom, btnTitle, fontColor, btnBgColorTheme, btnBorderColorTheme, btnFontType, useIcon } = item
    return <div className={`compt componentType21 ${item.comptActive && 'comptActive'}`} onClick={(e) => { click(e) }}>
        <div className={'componentWrap'}>
            <div className={'componentContent'}>
                <div style={{ marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px' }}>
                    <div style={{ textAlign: 'center', lineHeight: 0, maxWidth: '100%', margin: '0 92.5px' }}>
                        <a style={{
                            textDecoration: 'none', color: fontColor || 'rgb(255,255,255)', backgroundColor: btnBgColorTheme || 'rgb(7, 193, 96)',
                            border: ['#FFFFFF', '#ffffff', 'rgb(255, 255, 255)'].indexOf(btnBorderColorTheme) !== -1 ? '0px solid rgb(255, 255, 255)' : `2px solid ${btnBorderColorTheme}`, borderRadius: 4, display: 'flex', alignItems: 'center',
                            overflow: 'hidden', justifyContent: 'center', whiteSpace: 'pre', fontWeight: btnFontType === '0' ? 'normal' : 'bold',
                            height: 40, lineHeight: 40, width: '100%', fontSize: 15
                        }}>{useIcon === '1' && <LinkOutlined style={{ marginRight: 6 }} />}{btnTitle || ''}</a>
                    </div>
                </div>
            </div>
        </div>
        <ComptEdit data={data} handleBtn={(type, index) => { handleBtn(type, index) }} del={(e) => { del(e) }} />
    </div>
})

/** 图文 */
export const SortableItemImgText = SortableElement(({ item, click, del, index, data, handleBtn }: any) => {
    let { paddingTop, paddingBottom, layoutItems, borderColor, bgColor, type, wxad_align } = item
    if (type === '104') {
        let componentItem = layoutItems?.componentItem[0]?.layoutItems?.componentItem
        let otherData = componentItem[1]?.layoutItems?.componentItem
        return <div className={`compt componentType104 ${item.comptActive && 'comptActive'}`} onClick={(e) => { click(e) }}>
            <div className={'componentWrap'}>
                <div className={'componentContent'}>
                    <div className={'shelf listType'} style={{ marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px', marginLeft: 20, marginRight: 20 }}>
                        <div className={'shelfItem'} style={{ border: `1px solid ${borderColor || "#e5e5e5"}`, backgroundColor: bgColor || "#ffffff" }}>
                            <div className={'shelfItemImg'} style={{ marginLeft: 11.5, marginTop: 11.5 }}>
                                {componentItem[0]?.pureImageUrl ? <img src={componentItem[0]?.pureImageUrl} style={{ display: 'flex', width: '100%', height: '100%' }} /> : <div className={'default'} style={{ width: '100%', height: '100%' }}>
                                    <div className={'defaultIcon'} style={{ marginTop: 27, width: 36, height: 36 }}>
                                        <Img />
                                    </div>
                                </div>}
                            </div>
                            <div className={'shelfItemContent'} style={{ margin: '12px 20px 0 12px' }}>
                                <p className={'title'} style={{ color: otherData[0]?.fontColor || "#353535", fontSize: 16 }}>{otherData[0]?.content || otherData[0]?.name}</p>
                                <p className={'desc'} style={{ color: otherData[1]?.fontColor || "#B2B2B2" }}>{otherData[1]?.content || otherData[1]?.name}</p>
                                <div
                                    className={'btn'}
                                    style={{
                                        color: otherData[2]?.fontColor || 'rgb(255, 255, 255)',
                                        textDecoration: 'none',
                                        fontWeight: otherData[2]?.btnFontType === '0' ? 'normal' : 'bold',
                                        backgroundColor: otherData[2]?.btnBgColorTheme || "#07C160",
                                        border: ['#FFFFFF', '#ffffff', 'rgb(255, 255, 255)'].indexOf(otherData[2]?.btnBorderColorTheme) !== -1 ? '0px solid rgb(255, 255, 255)' : `2px solid ${otherData[2]?.btnBorderColorTheme}`,
                                        borderRadius: 4
                                    }}
                                >{otherData[2]?.btnTitle}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <ComptEdit data={data} handleBtn={(type, index) => { handleBtn(type, index) }} del={(e) => { del(e) }} />
        </div>
    } else if (type === '103') {
        let componentItem = layoutItems?.componentItem
        return <div className={`compt componentType103 ${item.comptActive && 'comptActive'}`} onClick={(e) => { click(e) }}>
            <div className={'componentWrap'}>
                <div className={'componentContent'}>
                    <div className='shelf gridType' style={{ marginTop: paddingTop / 2 + 'px', marginBottom: paddingBottom / 2 + 'px', marginLeft: 20 }}>
                        {
                            componentItem?.map((item: any, index: number) => {
                                let shelfnewItem = item?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                                return <div className='shelfItem-3q' key={index} style={{ borderWidth: 1, borderStyle: 'solid', borderColor: item?.borderColor, backgroundColor: item?.bgColor || 'rgb(255,255,255)', marginLeft: index === 1 ? 11 : 0 }}>
                                    <div className='shelfItemImg' style={{ marginLeft: 5.5, marginTop: 5.5 }}>
                                        {shelfnewItem[0]?.pureImageUrl ? <img src={shelfnewItem[0]?.pureImageUrl} style={{ display: 'flex', width: '100%', height: '100%' }} /> : <div className="default" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                            <div className={'defaultIcon'} style={{ width: 36, height: 36 }}>
                                                <Img />
                                            </div>
                                        </div>}
                                    </div>
                                    <div className='shelfItemContent' style={{ marginLeft: 12, textAlign: wxad_align === 0 ? 'left' : 'center' }}>
                                        <p className='title' style={{ color: shelfnewItem[1]?.fontColor || 'rgb(53, 53, 53)', fontSize: 16, marginBottom: 4 }}>{shelfnewItem[1]?.content || shelfnewItem[1]?.name}</p>
                                        <p className='desc' style={{ color: shelfnewItem[2]?.fontColor || 'rgb(178, 178, 178)', marginBottom: 14 }}>{shelfnewItem[2]?.content || shelfnewItem[2]?.name}</p>
                                        <p className='btn' style={{
                                            textDecoration: 'none',
                                            fontWeight: shelfnewItem[3]?.btnFontType === '0' ? 400 : 'bold',
                                            color: shelfnewItem[3]?.fontColor || 'rgb(255, 255, 255)',
                                            backgroundColor: shelfnewItem[3]?.btnBgColorTheme || 'rgb(7,193,96)',
                                            borderWidth: shelfnewItem[3]?.borderSize ? Number(shelfnewItem[3]?.borderSize) : 0,
                                            borderStyle: 'solid',
                                            borderColor: shelfnewItem[3]?.btnBorderColorTheme,
                                            borderRadius: 4
                                        }}>{shelfnewItem[3]?.btnTitle}</p>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
            <ComptEdit data={data} handleBtn={(type, index) => { handleBtn(type, index) }} del={(e) => { del(e) }} />
        </div>
    } else {
        return null
    }

})

/** 悬浮组件 */
export const SortableItemFloatbutton = SortableElement(({ item, click, del }: any) => {
    let { titleColor, descColor, componentItem, iconUrl, title, desc, wxad_styleType } = item
    return <div className={`compt componentType134 comptFixedBottom ${item.comptActive && 'comptActive'}`} onClick={(e) => { click(e) }}>
        <div className={'componentWrap'}>
            <div className="componentContent">
                <div className="floatButtonWrapper">
                    <div className="floatButton">
                        {wxad_styleType === '1' && (iconUrl ? <img src={iconUrl} className="floatButtonAvatar"/> : <div className="floatButtonAvatarPlaceholder"></div>)}
                        <div className="floatButtonTexts">
                            <div className="floatButtonTitle" style={{ color: titleColor || 'rgb(23, 23, 23)' }}>{title || '标题'}</div>
                            {(wxad_styleType === '1' || wxad_styleType === '2' ) && <div className="floatButtonDesc" style={{ color: descColor || 'rgb(76, 76, 76)' }}>{desc || '描述'}</div>}
                        </div>
                        <div className="floatButtonLink" style={{
                            color: componentItem?.fontColor || 'rgb(255,255,255)', 
                            fontWeight: componentItem?.btnFontType === '0' ? 'normal' : 'bold', 
                            backgroundColor: componentItem?.btnBgColorTheme || 'rgb(7, 193, 96)', 
                            width: ((componentItem?.layoutWidth || 160) / 2) + 'px',
                            textAlign: 'center', 
                            overflow: 'hidden', 
                            whiteSpace: 'pre'
                        }}>{componentItem?.btnTitle}</div>
                    </div>
                </div>
            </div>
        </div>
        <section className={'comptEditBtns'}>
            <div className={'comptEditBtnsInner'}>
                <button onClick={(e) => { del(e) }}><DeleteOutlined /></button>
            </div>
        </section>
    </div>
})

/** 外层 */
export const SortableList = SortableContainer(({ children, isFloatButton }: { children: any, isFloatButton?: boolean }) => (<div className="page-0" style={isFloatButton ? { paddingBottom: 90, minHeight: 510 } : {}}>{children}</div>));

// 以下是轮播图内容
const DragSliderHandle = SortableHandle(() => <div style={{ cursor: 'grab' }} className="sliderhandle"><DragOutlined /></div>);
// 轮播图有图item
export const SortableItemLi = SortableElement(({ isActive, pureImageUrl, click, setActiveIndex }: any) => {
    return <li className={`imageUploadItem ${isActive ? 'active' : ''} imageUploadItemInnerDone`} style={{ zIndex: 2000 }}>
        <div className="upload-img-item">
            <div className="upload-img-item-inner" style={{ backgroundImage: `url(${pureImageUrl})`, borderStyle: 'solid' }} onClick={setActiveIndex}>
                <div className='upload-img-item-action' onClick={click}>
                    <RetweetOutlined />
                </div>
                <DragSliderHandle />
            </div>
        </div>
    </li>
})

// 轮播图无图item
export const SortableItemNoLi = SortableElement(({ isActive, click }: any) => {
    return <li className={`imageUploadItem ${isActive ? 'active' : ''}`}>
        <div className="upload-img-item">
            <div className="upload-img-item-inner" style={{ backgroundImage: `url("")` }} onClick={click}><PlusOutlined /></div>
        </div>
    </li>
})


/** 外层轮播图 */
export const SortableUlList = SortableContainer(({ children }: { children: any }) => (<ul className="imageUpload">{children}</ul>));