import { Button, Checkbox, Col, Drawer, Form, Input, InputNumber, message, Modal, Radio, RadioChangeEvent, Row, Select, Slider, Space, Switch, Tooltip } from 'antd'
import React, { useCallback, useEffect, useMemo, useState } from "react"
import modal from "antd/lib/modal"
import style from './index.less'
import './index1.less'
import { ReactComponent as Topimg } from '@/assets/topimg.svg'
import { ReactComponent as Topslider } from '@/assets/topslider.svg'
import { ReactComponent as Topvideo } from '@/assets/topvideo.svg'
import { ReactComponent as Img } from '@/assets/img.svg'
import { ReactComponent as MyText } from '@/assets/text.svg'
import { ReactComponent as TopNullBack } from '@/assets/topNullBack.svg'
import { ReactComponent as FollowAcc } from '@/assets/followAcc.svg'
import { ReactComponent as EditSvg } from '@/assets/edit.svg'
import { ReactComponent as SliderImgSvg } from '@/assets/sliderImgSvg.svg'
import { ReactComponent as JumpLink } from '@/assets/jumpLink.svg'
import { ReactComponent as ImgText } from '@/assets/imgText.svg'
import { ReactComponent as FloatbuttonSvg } from '@/assets/floatbuttonSvg.svg'
import { ReactComponent as WxAutoSvg } from '@/assets/wxAutoSvg.svg'

import { AlignCenterOutlined, AlignLeftOutlined, AlignRightOutlined, DeleteOutlined, PlusOutlined, QuestionCircleOutlined, RetweetOutlined, SwapLeftOutlined, SwapRightOutlined } from '@ant-design/icons'
import { useDrop, useDrag } from 'ahooks'
import { getChannelName } from '@/utils/utils'
import arrayMove from "array-move";
import ColorPicker from '@/components/ColorPicker1'
import TextArea from 'antd/lib/input/TextArea'
import SelectImg from '../selectImg'
import InputAcc from './inputAcc'
import SelectCustors from '../selectCustors'
import moment from 'moment'
import { TopImg, Video, TopVideo, TopVideoNew, Text, Img as ImgProps, GhButton, TopSlider, ComponentGroupList, LinkButton, Shelfnew, WxAutoButton, Floatbutton } from '../../req'
import { imgContent, txtContent, ghContent, topvideoNewContent, linkContent, topsliderContent, topimgContent, topvideoContent, shelfnewContent, shelfnewContent2, btModelJumpGh, btModelJumpLink, btModelJumpLink103, btModelJumpGh103, jumpLink104, jumpGh104, jumpLink103, jumpGh103, wxAutoContent, jumpWxAuto104, jumpWxAuto103, btModelJumpWxAuto, btModelJumpWxAuto103, floatbuttonContent, floatbuttonBtTypeWxAuto, floatbuttonBtTypeGh } from './content'
import { landingPageReducer, Content, Props } from './landingPageReducer'

import {
    SortableList,
    SortableItemText,
    SortableItemImg,
    SortableItemFollowAcc,
    SortableItemImgText,
    SortableUlList,
    SortableItemNoLi,
    SortableItemLi,
    SortableItemJumpLink,
    SortableItemWxAuto,
    SortableItemFloatbutton
} from './sortable'
import { CheckboxChangeEvent } from 'antd/es/checkbox'
import SelectAccount from './selectAccount'
import AdLogin from '../adLogin'
import { useModel } from 'umi'

const { Option } = Select;

function AddLandingPage(props: Props) {
    let { visible, hideModal, ajax, typesetting, accountsInfo = [] } = props
    // const [state, dispatch] = useReducer(reducer, initState)
    const { state, stateGlobal, dispatch, dispatchGlobal } = landingPageReducer()
    const { content, pageBackColor } = state
    const { componentItem } = stateGlobal
    const { currentUser }: any = useModel('@@initialState', model => ({ currentUser: model.initialState?.currentUser }))
    const { addAndCreate, adsSharePage, adsSharePageEdit } = useModel('useLaunch.useAdAuthorize')

    console.log('stateGlobal--->', stateGlobal)
    /** 变量开始 */
    // const [selectCon, setSelectCon] = useState<Content | undefined>(undefined) // 保存选中的项
    const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false)   // 选择图片弹窗
    const [lastVisible, setLastVisible] = useState<boolean>(false)   // 最后保存设置
    const [num, setNum] = useState<number>(1)  // 选择图片数量
    const [shareTittle, setShareTittle] = useState<string>('')  // 分享标题
    const [shareDesc, setShareDesc] = useState<string>('')  // 分享描述
    const [novel, setNovel] = useState<string>('')  // 小说
    const [imgSize, setImgSize] = useState<{
        aspectRatio?: string, //宽高比
        minWidth?: string,   //最小宽度
        maxWidth?: string,   //最大宽度
        minHeight?: string,  //最小高度
        maxHeight?: string,  //最大高度
        minMediaSize?: number, // 最小媒体大小
        maxMediaSize?: number, // 最大媒体大小
        minVideoLength?: number, // 最小视频时长
        maxVideoLength?: number, // 最大视频时长
        minVideoBitRate?: number, // 最小视频比特率
        maxVideoBitRate?: number, // 最大视频比特率
        type?: 1 | 2,  // 内容类型 1 图片 2 视频
    }>({})   // 要选择的素材信息
    const [imgType, setimgType] = useState<boolean>(false) // 是否是公众号及其它
    const [isFootlock, setIsFootlock] = useState<boolean>(false)  // 是否横板视频
    const [scType, setCcType] = useState<1 | 2 | 3 | 4 | 5>(1) // 视频 单图片 多图片处理
    const [sliderImgContent, setSliderImgContent] = useState<{ content: string, width?: number, height?: number }[]>([])  // 保存回填数据
    const [isUpload, setIsUpload] = useState<boolean>(false) // 是否暂时不上传
    const [selectAccShow, setSelectAccShow] = useState<boolean>(false) // 控制选择账户弹窗
    const [channelAccounts, setChannelAccounts] = useState<{ MP?: any, ADQ?: any, id: number, accountName: string }[]>([])
    const [authData, setAuthData] = useState<{ base64: string, code: string }>({ base64: '', code: '' })
    const [imgTextButtonShow, setImgTextButtonShow] = useState<boolean>(false)
    const [goodsCount, setGoodsCount] = useState<number>(0)
    const [custorData, setCustorData] = useState<any[]>([])  // 客服组
    const [custorShow, setCustorShow] = useState<boolean>(false)  // 选择客服组弹窗
    const [isEWxAuto, setIsEWxAuto] = useState<boolean>(false)
    /** 变量结束 */

    // 账号回填
    useEffect(() => {
        setChannelAccounts(accountsInfo)
    }, [accountsInfo])
    // 回填
    useEffect(() => {
        if (typesetting && JSON.stringify(typesetting) !== '{}') { // 修改
            let { pageContextList, novelName, descContext, title, type } = typesetting
            console.log(11111, pageContextList)
            let list = JSON.parse(pageContextList[0]?.pageContextList)
            let global = JSON.parse(pageContextList[0]?.globalComponentList)
            list = list?.map((item: any) => {
                if (item?.widgetTypeV2 === 'text') {
                    item = { ...item, fontSize: Number(item?.fontSize) / 2 }
                }
                return { ...item, comptActive: false }
            })
            global = global?.map((item: any) => ({ ...item, comptActive: false }))

            descContext && (setShareDesc(() => type === 'copy' ? descContext : descContext))// + "_copy" 
            title && (setShareTittle(() => type === 'copy' ? title : title))
            novelName && (setNovel(() => type === 'copy' ? novelName : novelName))
            dispatch({ type: 'setPageBackColor', params: { pageBackColor: pageContextList[0]?.backgroundColor } })
            dispatch({ type: 'setCon', params: { content: list } })
            dispatchGlobal({ type: "setConItem", params: { componentItem: global || [] } })
        } else {
            dispatch({ type: 'init', params: { widgetTypeV2: 'empty' } })
        }
    }, [typesetting])

    const config = {
        title: '警告!',
        cancelText: '取消',
        okText: '确定',
        onOk: () => { hideModal() },
        content: (
            <>
                <div>不会保存您所做的更改，确定关闭？</div>
            </>
        ),
    };

    /** 获取选中内容对应图片视频尺寸大小 */
    useEffect(() => {
        let selectData = content?.find((item: Content) => item.comptActive)
        if (!selectData) {
            selectData = componentItem?.find((item: { comptActive: boolean }) => item.comptActive)
        }
        if (selectData?.widgetTypeV2 === 'topimg') {
            setIsFootlock(() => false)
            if (selectData?.adLocation === 'sns') { // 朋友圈信息流
                if (selectData?.viewType === '0') { // 常规广告
                    setImgSize(() => ({ minWidth: '800', maxWidth: '800', minHeight: '800', maxHeight: '800', minMediaSize: 0, maxMediaSize: 307200, type: 1 }))
                    setimgType(() => false)
                } else { // 卡片广告
                    setImgSize(() => ({ minWidth: '800', maxWidth: '800', minHeight: '450', maxHeight: '450', minMediaSize: 0, maxMediaSize: 307200, type: 1 }))
                    setimgType(() => false)
                }
            } else { // 公众号及其他
                setImgSize(() => ({ minWidth: '800', maxWidth: '800', minHeight: '800', maxHeight: '800', minMediaSize: 0, maxMediaSize: 307200, type: 1 }))
                setimgType(() => true)
            }
        } else if (selectData?.widgetTypeV2 === 'img') { // 内容图片
            setIsFootlock(() => false)
            setImgSize(() => ({ minWidth: '750', maxWidth: '750', minHeight: '0', maxHeight: '1536', minMediaSize: 0, maxMediaSize: 307200, type: 1 }))
            setimgType(() => false)
        } else if (selectData?.widgetTypeV2 === 'topslider') { // 轮播图
            setIsFootlock(() => false)
            setImgSize(() => ({ minWidth: '800', maxWidth: '800', minHeight: '800', maxHeight: '800', minMediaSize: 0, maxMediaSize: 307200, type: 1 }))
            setimgType(() => false)
        } else if (selectData?.widgetTypeV2 === 'topvideo_new') { // 视频
            // setImgSize(() => ({ type: 2 }))
            setimgType(() => false)
            if (selectData?.adLocation === 'sns') { // 朋友圈信息流
                if (selectData?.viewType === '0') { // 常规广告
                    if (selectData?.styleType === '0') { // 横板视频
                        // setIsFootlock(() => true)
                        setImgSize(() => ({ minWidth: '1280', maxWidth: '1280', minHeight: '720', maxHeight: '1280', minMediaSize: 0, maxMediaSize: 99614720, minVideoLength: 5, maxVideoLength: 90, type: 2 }))
                    } else { // 竖版视频
                        setIsFootlock(() => false)
                        if (selectData?.initHeight === 1536) { // 750像素 x 1536像素
                            setImgSize(() => ({ minWidth: '750', maxWidth: '2000', minHeight: '1536', maxHeight: '4000', minMediaSize: 0, maxMediaSize: 99614720, minVideoLength: 6, maxVideoLength: 90, type: 2 }))
                        } else if (selectData?.initHeight === 1334) { // 750像素 x 1334像素
                            setImgSize(() => ({ minWidth: '750', maxWidth: '2000', minHeight: '1334', maxHeight: '4000', minMediaSize: 0, maxMediaSize: 99614720, minVideoLength: 6, maxVideoLength: 90, type: 2 }))
                        } else if (selectData?.initHeight === 1280) { // 720像素 x 1280像素
                            setImgSize(() => ({ minWidth: '720', maxWidth: '2000', minHeight: '1280', maxHeight: '4000', minMediaSize: 0, maxMediaSize: 99614720, minVideoLength: 6, maxVideoLength: 90, type: 2 }))
                        }
                    }
                } else { // 卡片广告
                    // setIsFootlock(() => false)
                    // if (selectData?.outerUseTopMaterial === '0') { // 顶部素材不用于广告外层 不勾
                    //     setImgSize(() => ({ aspectRatio: '1.8', minMediaSize: 0, maxMediaSize: 314572800, minVideoLength: 6, maxVideoLength: 30, type: 2 }))
                    // } else if (selectData?.outerUseTopMaterial === '1') { // 顶部素材不用于广告外层 勾选
                    //     if (selectData?.type === '61') { // 短视频
                    //         setImgSize(() => ({ minWidth: '750', maxWidth: '750', minHeight: '0', maxHeight: '1536', minMediaSize: 0, maxMediaSize: 314572800, minVideoLength: 6, maxVideoLength: 30, type: 2 }))
                    //     } else if (selectData?.type === '62') { // 长视频
                    //         setImgSize(() => ({ minWidth: '750', maxWidth: '750', minHeight: '0', maxHeight: '1536', minMediaSize: 0, maxMediaSize: 314572800, minVideoLength: 6, maxVideoLength: 90, type: 2 }))
                    //     }
                    // }
                }
            } else { // 公众号及其它
                setIsFootlock(() => false)
                setImgSize(() => ({ minWidth: '750', maxWidth: '2000', minMediaSize: 0, maxMediaSize: 314572800, minVideoLength: 6, maxVideoLength: 90, type: 2 }))
            }
        } else if (selectData?.widgetTypeV2 === 'shelfnew') {  // 图文复合组件 1个
            if (selectData?.type === '104') {
                setIsFootlock(() => false)
                setImgSize(() => ({ minWidth: '360', maxWidth: '360', minHeight: '360', maxHeight: '360', minMediaSize: 0, maxMediaSize: 307200, type: 1 }))
                setimgType(() => false)
            } else if (selectData?.type === '103') {
                setIsFootlock(() => false)
                setImgSize(() => ({ minWidth: '480', maxWidth: '480', minHeight: '480', maxHeight: '480', minMediaSize: 0, maxMediaSize: 307200, type: 1 }))
                setimgType(() => false)
            }
        } else if (selectData?.widgetTypeV2 === 'floatbutton') {
            setIsFootlock(() => false)
            setImgSize(() => ({ minWidth: '96', maxWidth: '96', minHeight: '96', maxHeight: '96', minMediaSize: 0, maxMediaSize: 307200, type: 1 }))
            setimgType(() => false)
        }
    }, [content])

    const [dragging, setDragging] = useState<string | null>(null);
    const getDragProps = useDrag({
        onDragStart: (data) => {
            setDragging(data);
        },
        onDragEnd: () => {
            setDragging(null);
        },
    });
    // 头部内容拖到接收区
    const [dropProps] = useDrop({
        onDom: (con: string, e) => { // 头部
            let newCon = content?.map((item: TopImg | TopVideo | TopSlider | TopVideoNew) => {
                return { ...item, comptActive: false }
            })
            let topCon = newCon[0]
            topCon.type = con
            topCon.comptActive = true
            let conContent: TopImg | TopVideo | TopSlider | TopVideoNew | any = {}
            if (con === 'topSlider') {
                conContent = { ...topsliderContent, comptActive: true }
            } else if (con === 'topImg') {
                conContent = { ...topimgContent, comptActive: true }
            } else if (con === 'topVideo') {
                conContent = { ...topvideoNewContent, comptActive: true }
            } else {
                return
            }
            topCon = { ...conContent }
            newCon[0] = topCon
            dispatch({ type: 'setCon', params: { content: newCon } })
        },
    });
    const [draggingCon, setDraggingCon] = useState<string | null>(null);
    const getDragPropsCon = useDrag({
        onDragStart: (data) => {
            setDraggingCon(data);
        },
        onDragEnd: () => {
            setDraggingCon(null);
        },
    });
    // 内容拖到接收区
    const [dropConProps, { isHovering: isHoveringCon }] = useDrop({
        onDom: (con: string, e) => { // 内容
            let newCon: Content[] = content?.map((item: Text | ImgProps | GhButton | LinkButton | WxAutoButton) => {
                return { ...item, comptActive: false }
            })
            let newConItem = componentItem?.map((item: Floatbutton) => {
                return { ...item, comptActive: false }
            })
            if (con === 'txt') {
                newCon.push({ ...txtContent, comptActive: true } as any)
            } else if (con === 'img') {
                newCon.push({ ...imgContent, comptActive: true } as any)
            } else if (con === 'followAcc') {
                newCon.push({ ...ghContent, comptActive: true } as any)
            } else if (con === 'JumpLink') {
                newCon.push({ ...linkContent, comptActive: true } as any)
            } else if (con === 'shelfnew') {
                newCon.push({ ...shelfnewContent, comptActive: true } as any)
            } else if (con === 'enterprise_wx_auto') {
                newCon.push({ ...wxAutoContent, comptActive: true } as any)
            } else if (con === 'floatbutton') {
                newConItem.push({ ...floatbuttonContent, comptActive: true })
                setDraggingCon(null);
            } else {
                return
            }
            
            dispatch({ type: 'setCon', params: { content: newCon } })
            dispatchGlobal({ type: "setConItem", params: { componentItem: newConItem } })
        },
    });

    /** 选中设置 */
    const installActive = useCallback((e, index: number) => {
        e.stopPropagation(); e.preventDefault();
        let newCon = content?.map((item: any) => {
            return { ...item, comptActive: false }
        })
        let newConItem = componentItem?.map((item: { widgetTypeV2: string }) => {
            return { ...item, comptActive: false }
        })
        setImgTextButtonShow(false)
        if (index === 99999) {
            newConItem = newConItem?.map((item: { widgetTypeV2: string }) => {
                if (item.widgetTypeV2 === 'floatbutton') {
                    return { ...item, comptActive: true }
                }
                return item
            })
        } else {
            newCon[index].comptActive = true
        }
        dispatch({ type: 'setCon', params: { content: newCon } })
        dispatchGlobal({ type: "setConItem", params: { componentItem: newConItem } })
    }, [content, imgTextButtonShow, componentItem])
    /** 清除选中 */
    const installActiveNull = useCallback((e) => {
        e.stopPropagation(); e.preventDefault();
        let newCon = content?.map((item: any) => {
            return { ...item, comptActive: false }
        })
        setImgTextButtonShow(false)
        dispatch({ type: 'setCon', params: { content: newCon } })
        let newConItem = componentItem?.map((item: { widgetTypeV2: string }) => {
            return { ...item, comptActive: false }
        })
        dispatchGlobal({ type: "setConItem", params: { componentItem: newConItem } })
    }, [content])
    /** 内容功能按钮区 */
    const handleBtn = useCallback((type: string, index: number) => {
        let newContent = JSON.parse(JSON.stringify(content))
        switch (type) {
            case 'lower': // 下移动
                dispatch({ type: 'setCon', params: { content: arrayMove(content, index, index + 1) } })
                break;
            case 'upper': // 上移动
                dispatch({ type: 'setCon', params: { content: arrayMove(content, index, index - 1) } })
                break;
            case 'img':   // 图片
                newContent.splice(index, 0, { ...imgContent });
                dispatch({ type: 'setCon', params: { content: newContent } })
                break;
            case 'text': // 文本
                newContent.splice(index, 0, { ...txtContent });
                dispatch({ type: 'setCon', params: { content: newContent } })
                break;
            case 'gh': // 关注公众号按钮
                newContent.splice(index, 0, { ...ghContent });
                dispatch({ type: 'setCon', params: { content: newContent } })
                break;
            case 'link': // 跳转链接按钮
                newContent.splice(index, 0, { ...linkContent });
                dispatch({ type: 'setCon', params: { content: newContent } })
                break;
            case 'shelfnew': // 图文复合组件
                newContent.splice(index, 0, { ...shelfnewContent });
                dispatch({ type: 'setCon', params: { content: newContent } })
                break;
            case 'enterprise_wx_auto': // 图文复合组件
                if (!channelAccounts?.some((item: any) => (item?.MP?.length > 0 || item?.ADQ?.length > 0))) {
                    message.error('请先选择公众号')
                    return
                }
                newContent.splice(index, 0, { ...wxAutoContent });
                dispatch({ type: 'setCon', params: { content: newContent } })
                break;
        }
    }, [content])
    /** 头部删除 */
    const topDelType = useCallback(() => {
        setDragging(null);
        content[0] = {
            widgetTypeV2: 'empty',
            comptActive: false
        }
        dispatch({ type: 'setCon', params: { content } })
    }, [content, dragging])
    /** 内容删除 */
    const delType = useCallback((e, index: number) => {
        e.stopPropagation(); e.preventDefault();
        setImgTextButtonShow(false)
        if (index === 99999) { // 删除悬浮组件
            let newContentItem = JSON.parse(JSON.stringify(componentItem))
            newContentItem = newContentItem?.filter((item: { widgetTypeV2: string }) => item.widgetTypeV2 !== 'floatbutton')
            dispatchGlobal({ type: 'setConItem', params: { componentItem: JSON.parse(JSON.stringify(newContentItem)) } })
        } else {
            let newContent = JSON.parse(JSON.stringify(content))
            newContent?.splice(index, 1)
            dispatch({ type: 'setCon', params: { content: JSON.parse(JSON.stringify(newContent)) } })
        }
    }, [content, componentItem, imgTextButtonShow])

    const onSortEnd = ({ oldIndex, newIndex }: { oldIndex: number, newIndex: number }) => {
        dispatch({ type: 'setCon', params: { content: arrayMove(content, oldIndex, newIndex) } })
    }
    // 基础内容
    const comptCon = () => {
        if (content?.length === 0) {
            return null
        } else {
            return <SortableList axis='y' onSortEnd={onSortEnd} useDragHandle isFloatButton={componentItem?.some((item: { widgetTypeV2: string }) => item.widgetTypeV2 === 'floatbutton')}>
                {content.map((value: Text | ImgProps | GhButton | LinkButton | Shelfnew, index: number) => {
                    if (value?.widgetTypeV2 === 'img') {
                        return <SortableItemImg key={`item-${value.widgetTypeV2}-${index}`} index={index} data={{ length: content?.length, index }} item={value} click={(e: any) => { installActive(e, index) }} del={(e: any) => { delType(e, index) }} upload={(num: number) => { clickUpdateImg(num) }} handleBtn={handleBtn} />
                    } else if (value?.widgetTypeV2 === 'text') {
                        return <SortableItemText key={`item-${value.widgetTypeV2}-${index}`} index={index} data={{ length: content?.length, index }} item={value} click={(e: any) => { installActive(e, index) }} del={(e: any) => { delType(e, index) }} pageBackColor={pageBackColor} handleBtn={handleBtn} />
                    } else if (value?.widgetTypeV2 === 'gh') {
                        return <SortableItemFollowAcc key={`item-${value.widgetTypeV2}-${index}`} index={index} data={{ length: content?.length, index }} item={value} click={(e: any) => { installActive(e, index) }} del={(e: any) => { delType(e, index) }} handleBtn={handleBtn} />
                    } else if (value?.widgetTypeV2 === 'enterprise_wx_auto') {
                        return <SortableItemWxAuto key={`item-${value.widgetTypeV2}-${index}`} index={index} data={{ length: content?.length, index }} item={value} click={(e: any) => { installActive(e, index) }} del={(e: any) => { delType(e, index) }} handleBtn={handleBtn} />
                    } else if (value?.widgetTypeV2 === 'link') {
                        return <SortableItemJumpLink key={`item-${value.widgetTypeV2}-${index}`} index={index} data={{ length: content?.length, index }} item={value} click={(e: any) => { installActive(e, index) }} del={(e: any) => { delType(e, index) }} handleBtn={handleBtn} />
                    } else if (value?.widgetTypeV2 === 'shelfnew') {
                        return <SortableItemImgText key={`item-${value.widgetTypeV2}-${index}`} index={index} data={{ length: content?.length, index }} item={value} click={(e: any) => { installActive(e, index) }} del={(e: any) => { delType(e, index) }} handleBtn={handleBtn} />
                    } else {
                        return null
                    }
                })}
                <div className={`comptCon ${isHoveringCon && 'hovering'} ${draggingCon && 'draggingCon'}`} {...dropConProps}>{(isHoveringCon || draggingCon) && '请拖至此处'}</div>
                {componentItem?.some((item: { widgetTypeV2: string }) => item.widgetTypeV2 === 'floatbutton') && <SortableItemFloatbutton index={99999} item={componentItem.find((item: { widgetTypeV2: string }) => item.widgetTypeV2 === 'floatbutton')} click={(e: any) => { installActive(e, 99999) }} del={(e: any) => { delType(e, 99999) }} />}
            </SortableList>
        }
    }
    /** 设置start */
    const setCon = useCallback((key: string, value: any, isTopImg?: boolean) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            if (selectCon?.type === '103' && (key === 'borderColor' || key === 'bgColor')) {
                selectCon.layoutItems.componentItem[goodsCount][key] = value
            } else {
                selectCon[key] = value
                if (key === 'initHeight') {
                    selectCon['videoUrl'] = ''
                }
                if (isTopImg) {
                    selectCon['pureImageUrl'] = ''
                }
                if (value === '朋友圈信息流') {
                    selectCon.videoType = '横板视频'
                } else if (value === '公众号及其他') {
                    selectCon.videoType = '短视频'
                }
            }
            let newSelectCon = { ...selectCon }
            oldContent[selectIndex] = newSelectCon
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }, [content, goodsCount])
    /** 设置end */
    // 顶部组件
    const topCon = useMemo(() => {
        let { pureImageUrl, widgetTypeV2, componentCount, activeIndex, componentGroupList, videoUrl } = content[0]
        return <>
            {
                widgetTypeV2 === 'topimg' ? <>
                    <div className={`compt componentType41 ${content[0]?.comptActive && 'comptActive'}`} onClick={(e) => { installActive(e, 0) }}>
                        <div className={'componentWrap'}>
                            <div className={'componentContent'}>
                                {
                                    pureImageUrl ? <img src={pureImageUrl} style={{ display: 'block', width: '100%', margin: 0 }} /> : <div className={'default'} style={{ width: 375, height: 300, margin: 0 }}>
                                        <div className={'defaultIcon'} style={{ marginTop: 80 }}>
                                            <Topimg />
                                        </div>
                                    </div>
                                }
                            </div>
                        </div>

                        {
                            !pureImageUrl && <div className={'comptUpload'} style={{ margin: 0 }}>
                                <button style={{ marginTop: 150 }} className={'comptEditButton'} onClick={() => { clickUpdateImg(1) }}>上传图片</button>
                            </div>
                        }
                        <section className={'comptEditBtns'}>
                            <div className={'comptEditBtnsInner'}>
                                {pureImageUrl && <button onClick={() => { editSelectImg(pureImageUrl) }}><EditSvg /></button>}
                                <button onClick={topDelType}><DeleteOutlined /></button>
                            </div>
                        </section>
                    </div>
                </> :
                    widgetTypeV2 === 'topslider' ? <>
                        <div className={`compt componentType101 ${content[0]?.comptActive && 'comptActive'}`} onClick={(e) => { installActive(e, 0) }}>
                            <div className={'componentWrap'}>
                                <div className={'componentContent'}>
                                    {componentGroupList?.componentGroup?.some((item: any) => item?.componentItem?.pureImageUrl !== "") ? <div style={{ position: 'relative', width: 375, height: 375 }}>
                                        {componentGroupList?.componentGroup?.map((item: any, index: number) => {
                                            if (item?.componentItem?.pureImageUrl !== "") {
                                                return <img src={item?.componentItem?.pureImageUrl} key={index} style={{ maxWidth: '100%', position: 'absolute', display: 'block', zIndex: activeIndex === index ? 1 : 0 }} />
                                            } else {
                                                return <div className="default" key={index} style={{ width: 375, zIndex: activeIndex === index ? 1 : 0, height: '100%', position: 'absolute', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                                    <div className="defaultIcon">
                                                        <SliderImgSvg />
                                                    </div>
                                                </div>
                                            }
                                        })}
                                        <div className={'sliderD'}>
                                            {componentCount && Array(Number(componentCount)).fill('').map((item: any, index: number) => <i key={index} style={activeIndex === index ? { backgroundColor: 'rgba(0, 0, 0, .4)' } : {}}></i>)}
                                        </div>
                                    </div> : <div style={{ position: 'relative', height: 222, width: 375 }} className={'sliderCon'}>
                                        <div className={'default'}>
                                            <div className={'defaultIcon'}>
                                                <Topslider />
                                            </div>
                                        </div>
                                        <div className={'sliderD'}>
                                            {componentCount && Array(Number(componentCount)).fill('').map((item: any, index: number) => <i key={index} style={activeIndex === index ? { backgroundColor: 'rgba(0, 0, 0, .4)' } : {}}></i>)}
                                        </div>
                                    </div>}
                                </div>
                            </div>
                            <section className={'comptEditBtns'}>
                                <div className={'comptEditBtnsInner'}>
                                    <button onClick={topDelType}><DeleteOutlined /></button>
                                </div>
                            </section>
                        </div>
                    </> :
                        widgetTypeV2 === 'topvideo_new' ? <>
                            <div className={`compt componentType61 ${content[0]?.comptActive && 'comptActive'}`} onClick={(e) => { installActive(e, 0) }}>
                                <div className={'componentWrap'}>
                                    <div className={'componentContent'}>
                                        {
                                            videoUrl ? <div className="videoPlay">
                                                <video src={videoUrl} style={{ display: 'block', width: '100%', margin: 0 }} />
                                                <span></span>
                                            </div>
                                                : <div className={'default'} style={{ width: 375, height: 300, margin: 0 }}>
                                                    <div className={'defaultIcon'} style={{ marginTop: 80 }}>
                                                        <Topvideo />
                                                    </div>
                                                </div>
                                        }

                                    </div>
                                </div>
                                {!videoUrl && <div className={'comptUpload'} style={{ margin: 0 }}>
                                    <button style={{ marginTop: 150 }} className={'comptEditButton'} onClick={() => { clickUpdateVideo() }}>上传视频</button>
                                </div>}

                                <section className={'comptEditBtns'}>
                                    <div className={'comptEditBtnsInner'}>
                                        {videoUrl && <button onClick={() => { clickUpdateVideo() }}><EditSvg /></button>}
                                        <button onClick={topDelType}><DeleteOutlined /></button>
                                    </div>
                                </section>
                            </div>
                        </> :
                            <div className={`compt topComptArea ${dragging ? 'dragging' : ''}`} {...dropProps}>
                                <TopNullBack />

                                {dragging ? <div className="topAreaTitle" style={{ marginTop: 30 }}>
                                    拖至此处
                                </div> : <>
                                    <p className={'topAreaTitle'}>顶部组件区</p>
                                    <div className={'desc'}>在左上方，选择顶部组件添加到此处</div>
                                </>}
                            </div>
            }
        </>
    }, [content, state, dragging])

    /** 图标开启与关闭 */
    const iconHandle = (e: boolean) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            selectCon['useIcon'] = e ? '1' : '0'
            let newSelectCon: any
            if (e) {
                let { origBtnJumpUrl, wxad_guide_group_id, ...clearSelectCon } = selectCon
                newSelectCon = { ...clearSelectCon }
            } else {
                selectCon['origBtnJumpUrl'] = ""
                selectCon['wxad_guide_group_id'] = ""
                newSelectCon = { ...selectCon }
            }
            oldContent[selectIndex] = newSelectCon
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }
    /** 视频类型切换 */
    const viewTypeChange = (value: string, type: 1 | 2) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (type === 1) {
            if (selectIndex !== -1) {
                let selectCon = oldContent[selectIndex]
                selectCon['styleType'] = value
                selectCon['videoUrl'] = ''
                if (value === '0') {
                    selectCon['initHeight'] = 0
                } else {
                    selectCon['initHeight'] = 1536
                }
                oldContent[selectIndex] = { ...selectCon }
                dispatch({ type: 'setCon', params: { content: [...oldContent] } })
            }
        }
        // else if (type === 2) {
        //     if (selectIndex !== -1) {
        //         let selectCon = oldContent[selectIndex]
        //         selectCon['type'] = value
        //         let newSelectCon: any
        //         if (value === '61') {
        //             let { streamDisplayWidth, streamDisplayHeight, streamVideoThumb, streamVideoUrl, streamDisplayType, streamThumbMd5, streamVideoMd5, displayType, ...clearSelectCon } = selectCon
        //             newSelectCon = {
        //                 ...clearSelectCon,
        //                 sightDisplayWidth: 0,
        //                 sightDisplayHeight: 0,
        //                 sightThumbUrl: '',
        //                 sightVideoUrl: '',
        //                 sightDisplayType: '0',
        //                 sightThumbMd5: '',
        //                 sightVideoMd5: ''
        //             }
        //         } else {
        //             let { sightDisplayWidth, sightDisplayHeight, sightThumbUrl, sightVideoUrl, sightDisplayType, sightThumbMd5, sightVideoMd5, ...clearSelectCon } = selectCon
        //             newSelectCon = {
        //                 ...clearSelectCon,
        //                 streamDisplayWidth: 0,
        //                 streamDisplayHeight: 0,
        //                 streamVideoThumb: '',
        //                 streamVideoUrl: '',
        //                 streamDisplayType: '1',
        //                 streamThumbMd5: '',
        //                 streamVideoMd5: '',
        //                 displayType: '1'
        //             }
        //         }
        //         oldContent[selectIndex] = newSelectCon
        //         dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        //     }
        // }
    }
    /** 视频切换广告位 */
    const changeAdLocation = (value: 'sns' | 'gh') => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            selectCon['adLocation'] = value
            if (value === 'gh') {
                selectCon['styleType'] = '1'
            } else {
                selectCon['styleType'] = '0'
            }
            selectCon['outerUseTopMaterial'] = '0'
            selectCon['videoUrl'] = ''
            oldContent[selectIndex] = selectCon
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }

    /** 视频切换外层样式 */
    const changeOuterLayout = (value: string) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            selectCon['viewType'] = value
            let newSelectCon: any
            if (value === '0') {
                let { outerUseTopMaterial, streamDisplayWidth, streamDisplayHeight, streamVideoThumb, streamVideoUrl, streamDisplayType, streamThumbMd5, streamVideoMd5, displayType, ...clearSelectCon } = selectCon
                newSelectCon = {
                    ...clearSelectCon
                }
            } else {
                newSelectCon = {
                    ...selectCon,
                    outerUseTopMaterial: '0',
                    styleType: '0'
                }
            }
            oldContent[selectIndex] = newSelectCon
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }
    /** 视频外层素材勾选触发 */
    const outerUseTopMaterialHandle = (e: boolean) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            selectCon['outerUseTopMaterial'] = e ? '1' : '0'
            let newSelectCon: any
            if (!e) {
                selectCon['type'] = '61'
                let { streamDisplayWidth, streamDisplayHeight, streamVideoThumb, streamVideoUrl, streamDisplayType, streamThumbMd5, streamVideoMd5, displayType, ...clearSelectCon } = selectCon
                newSelectCon = {
                    ...clearSelectCon,
                    sightDisplayWidth: 0,
                    sightDisplayHeight: 0,
                    sightThumbUrl: '',
                    sightVideoUrl: '',
                    sightDisplayType: '0',
                    sightThumbMd5: '',
                    sightVideoMd5: '',
                    type: '61'
                }
            } else {
                newSelectCon = selectCon
            }
            oldContent[selectIndex] = { ...newSelectCon }
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }

    /** 轮播图选择点击切换图片 多张图片 */
    const sliderSelect = (index: number, count: string) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        if (selectIndex !== -1) {
            let selectCon = newContent[selectIndex]
            let newSliderImg: { content: string, width: number, height: number }[] = []
            selectCon?.componentGroupList?.componentGroup?.forEach((item: any) => {
                if (item?.componentItem?.pureImageUrl) {
                    newSliderImg.push({ content: item?.componentItem?.pureImageUrl, width: 800, height: 800 })
                }
            })
            setSliderImgContent(newSliderImg)
        }
        setCon('activeIndex', index)
        setCcType(3)
        setSelectImgVisible(true)
        setNum(Number(count))
    }
    /** 轮播图图片数量设置 */
    const sliderImgNum = useCallback((num: string) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            selectCon['componentCount'] = num
            let { componentGroupList } = selectCon
            let componentGroup = componentGroupList?.componentGroup
            if (componentGroup?.length > Number(num)) { // 减少
                selectCon['componentGroupList'] = {
                    componentGroup: [...componentGroup?.splice(0, Number(num))]
                }
            } else {  // 增加
                let newGroup = Array(Number(num) - componentGroup?.length).fill('').map(() => ({
                    id: 'slider_1627457838609_16',
                    componentItem: {
                        type: '41',
                        pureImageUrl: '',
                        imageMd5: '',
                        img_name: 'slider',
                        img_type: '',
                        paddingTop: 0,
                        paddingBottom: 0,
                        paddingLeft: 0,
                        paddingRight: 0,
                        imageHeight: 750,
                        imageWidth: 750,
                        initWidth: 800,
                        initHeight: 800,
                        fileSize: 0,
                        materialId: ''
                    }
                }))
                componentGroup = [...componentGroup, ...newGroup]
                selectCon['componentGroupList'] = {
                    componentGroup
                }
            }
            oldContent[selectIndex] = { ...selectCon }
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }, [content])

    /** 轮播图位置拖动切换顺序 */
    const onSortEndSlider = useCallback(({ oldIndex, newIndex }: { oldIndex: number, newIndex: number }) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            let { componentGroupList } = selectCon
            let componentGroup = componentGroupList?.componentGroup
            componentGroup = arrayMove(componentGroup, oldIndex, newIndex)
            selectCon['componentGroupList'] = {
                componentGroup
            }
            oldContent[selectIndex] = { ...selectCon }
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }, [content])

    /** 图文单个设置 */
    const onShelfnewTxtCon = useCallback((value: string, count: number, parameter: string) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            if (selectCon?.type === '103') {
                let componentItem = selectCon?.layoutItems.componentItem[goodsCount]
                let shelfnewItem = componentItem?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                shelfnewItem[count + 1][parameter] = value
                if (count + 1 === 2 && parameter === 'content') {
                    if (shelfnewItem[count + 1]?.name === '价格') {
                        shelfnewItem[count + 1][parameter] = '￥' + value
                    } else {
                        shelfnewItem[count + 1][parameter] = value
                    }
                }
            } else if (selectCon?.type === '104') {
                let componentItem = selectCon?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                let textData = componentItem[1]?.layoutItems?.componentItem
                textData[count][parameter] = value
                if (count === 1 && parameter === 'content') {
                    let name = textData[count]?.name
                    if (name === '价格') {
                        textData[count][parameter] = '￥' + value
                    } else {
                        textData[count][parameter] = value
                    }
                }
            }
            oldContent[selectIndex] = { ...selectCon }
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }, [content, goodsCount])
    /** 设置描述类型 */
    const onSetShelfnewDescType = useCallback((e: RadioChangeEvent) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            if (selectCon?.type === '103') {
                let componentItem = selectCon?.layoutItems.componentItem[goodsCount]
                let shelfnewItem = componentItem?.layoutItems?.componentItem[0]
                shelfnewItem.descType = e.target.value
                let textData = shelfnewItem?.layoutItems?.componentItem
                if (e.target.value === 'price') {
                    textData[2] = {
                        ...textData[2],
                        name: '价格',
                        content: '',
                        fontColor: '#353535',
                        fontSize: '32',
                        showType: "1",
                    }
                } else {
                    let { showType, ...desc } = textData[2]
                    textData[2] = {
                        ...desc,
                        name: '描述',
                        content: '',
                        fontColor: '#4D4D4D',
                        fontSize: '24'
                    }
                }
            } else if (selectCon?.type === '104') {
                let componentItem = selectCon?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                componentItem[1].descType = e.target.value
                let textData = componentItem[1]?.layoutItems?.componentItem
                if (e.target.value === 'price') {
                    textData[1] = {
                        ...textData[1],
                        name: '价格',
                        content: '',
                        fontColor: '#353535',
                        fontSize: '32',
                        showType: "1",
                    }
                } else {
                    let { showType, ...desc } = textData[1]
                    textData[1] = {
                        ...desc,
                        name: '描述',
                        content: '',
                        fontColor: '#4D4D4D',
                        fontSize: '24'
                    }
                }
            }
            oldContent[selectIndex] = { ...selectCon }
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }, [content, goodsCount])

    /** 设置跳转方式 */
    const onSetShelfnewJumpMode = useCallback((e: RadioChangeEvent) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            if (selectCon?.type === '103') {
                selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].jumpMode = e.target.value
                let jumpData = selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3]
                let widgetTypeV2 = jumpData?.widgetTypeV2
                let componentItem = selectCon?.layoutItems?.componentItem[goodsCount]?.layoutItems?.componentItem
                if (e.target.value === 'btn_jump') {
                    selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem = [{ ...componentItem[0] }]
                } else {
                    switch (widgetTypeV2) {
                        case 'link':
                            componentItem[1] = { ...btModelJumpLink103, origBtnJumpUrl: jumpData?.origBtnJumpUrl }
                            break
                        case 'gh':
                            componentItem[1] = { ...btModelJumpGh103, subType: jumpData?.subType, btnFontType: jumpData?.btnFontType }
                            break
                        case 'enterprise_wx_auto':
                            componentItem[1] = { ...btModelJumpWxAuto103, subType: jumpData?.subType, btnFontType: jumpData?.btnFontType }
                            break
                    }
                }
            } else if (selectCon?.type === '104') {
                selectCon.layoutItems.componentItem[0].jumpMode = e.target.value
                let textData = selectCon?.layoutItems?.componentItem[0]?.layoutItems?.componentItem[1]?.layoutItems?.componentItem
                let widgetTypeV2 = textData[2].widgetTypeV2
                let componentItem = selectCon?.layoutItems?.componentItem
                if (e.target.value === 'btn_jump') {
                    selectCon.layoutItems.componentItem = [{ ...componentItem[0] }]
                } else {
                    switch (widgetTypeV2) {
                        case 'link':
                            componentItem[1] = { ...btModelJumpLink, origBtnJumpUrl: textData[2]?.origBtnJumpUrl }
                            break
                        case 'gh':
                            componentItem[1] = { ...btModelJumpGh, subType: textData[2]?.subType, btnFontType: textData[2]?.btnFontType }
                            break
                        case 'enterprise_wx_auto':
                            componentItem[1] = { ...btModelJumpWxAuto, subType: textData[2]?.subType, btnFontType: textData[2]?.btnFontType }
                            break
                    }
                }
            }
            oldContent[selectIndex] = { ...selectCon }
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }, [content, goodsCount])
    // 设置图文跳转链接按钮
    const onSetShelfnewButton = useCallback((value: string) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            // "btn_jump" "total_jump"
            if (selectCon?.type === '103') {
                let jumpMode = selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].jumpMode
                let btnContent = selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3]
                if (value === 'link') {
                    if (jumpMode === "total_jump") {
                        selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[1] = { ...btModelJumpLink103 }
                    }
                    if (btnContent?.horizontalAlignment) {
                        selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpLink103, horizontalAlignment: '1' }
                    } else {
                        selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpLink103 }
                    }
                } else if (value === 'gh') {
                    if (jumpMode === "total_jump") {
                        selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[1] = { ...btModelJumpGh103 }
                    }
                    if (btnContent?.horizontalAlignment) {
                        selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpGh103, horizontalAlignment: '1' }
                    } else {
                        selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpGh103 }
                    }
                } else if (value === 'enterprise_wx_auto') {
                    if (jumpMode === "total_jump") {
                        selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[1] = { ...btModelJumpWxAuto103 }
                    }
                    if (btnContent?.horizontalAlignment) {
                        selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpWxAuto103, horizontalAlignment: '1' }
                    } else {
                        selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3] = { ...jumpWxAuto103 }
                    }
                }
            } else if (selectCon?.type === '104') {
                let jumpMode = selectCon.layoutItems.componentItem[0].jumpMode
                if (value === 'link') {
                    if (jumpMode === "total_jump") {
                        selectCon.layoutItems.componentItem[1] = { ...btModelJumpLink }
                    }
                    selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2] = { ...jumpLink104 }
                } else if (value === 'gh') {
                    if (jumpMode === "total_jump") {
                        selectCon.layoutItems.componentItem[1] = { ...btModelJumpGh }
                    }
                    selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2] = { ...jumpGh104 }
                } else if (value === 'enterprise_wx_auto') {
                    if (jumpMode === "total_jump") {
                        selectCon.layoutItems.componentItem[1] = { ...btModelJumpWxAuto }
                    }
                    selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2] = { ...jumpWxAuto104 }
                }
            }
            oldContent[selectIndex] = { ...selectCon }
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }, [content, goodsCount])
    // 配置图文跳转链接按钮字段
    const onSetShelfnewButtonField = useCallback((field: string, value: string) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            if (selectCon?.type === '103') {
                let jumpMode = selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].jumpMode
                selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3][field] = value
                if (field === 'btnBorderColorTheme') {
                    selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3]['borderSize'] = "2"
                }
                if (jumpMode === 'total_jump' && (field === 'subType' || field === 'btnFontType')) {
                    selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[1][field] = value
                }
            } else if (selectCon?.type === '104') {
                let jumpMode = selectCon.layoutItems.componentItem[0].jumpMode
                selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2][field] = value
                if (field === 'btnBorderColorTheme') {
                    selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2]['borderSize'] = "2"
                }
                if (jumpMode === 'total_jump' && (field === 'subType' || field === 'btnFontType')) {
                    selectCon.layoutItems.componentItem[1][field] = value
                }
            }
            oldContent[selectIndex] = { ...selectCon }
            dispatch({ type: 'setCon', params: { content: [...oldContent] } })
        }
    }, [content, goodsCount])

    // 设置图文复合组件类型
    const setShelfnewType = useCallback((value: string) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        if (selectIndex !== -1) {
            if (value === '103') {
                newContent[selectIndex] = { ...shelfnewContent2, comptActive: true }
            } else if (value === '104') {
                newContent[selectIndex] = { ...shelfnewContent, comptActive: true }
            }
            dispatch({ type: 'setCon', params: { content: [...newContent] } })
        }
    }, [content])

    // 设置对齐方式
    const setAilgin103 = useCallback((align: number) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        if (selectIndex !== -1) {
            let selectCon = newContent[selectIndex]
            selectCon.wxad_align = align
            let componentItem = selectCon?.layoutItems?.componentItem?.map((item: any) => {
                let shelfnewItem = item?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                if (align === 0) {
                    shelfnewItem = shelfnewItem?.map((oldItem: any, index: number) => {
                        if (index === 0) {
                            return oldItem
                        } else if (index === 1 || index === 2) {
                            let { textAlignment, ...newItem } = oldItem
                            return newItem
                        } else {
                            let { horizontalAlignment, ...newItem } = oldItem
                            return newItem
                        }
                    })
                } else {
                    shelfnewItem = shelfnewItem?.map((newItem: any, index: number) => {
                        if (index === 0) {
                            return newItem
                        } else if (index === 1 || index === 2) {
                            return { ...newItem, textAlignment: "1" }
                        } else {
                            return { ...newItem, horizontalAlignment: "1" }
                        }

                    })
                }
                item.layoutItems.componentItem[0].layoutItems.componentItem = shelfnewItem
                return item
            })
            selectCon.layoutItems.componentItem = componentItem
            newContent[selectIndex] = { ...selectCon }
            dispatch({ type: 'setCon', params: { content: [...newContent] } })
        }
    }, [content])


    // 选择公众号
    const inputAccHandle = (e: { MP?: any, ADQ?: any, id: number, accountName: string }[]) => {
        setChannelAccounts(e)
        // 重新选择了公众号如果设置了组件里面有清空
        let oldContent = JSON.parse(JSON.stringify(content))
        let newContent = oldContent.map((item: { widgetTypeV2: string, type: string, custorData?: any, layoutItems?: any }) => {
            if (item.widgetTypeV2 === "enterprise_wx_auto") {
                delete item?.custorData
            } else if (item.widgetTypeV2 === 'shelfnew') {
                if (item?.type === '104') {
                    delete item.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2]?.custorData
                } else if (item?.type === '103') {
                    delete item.layoutItems.componentItem[0].layoutItems.componentItem[0].layoutItems.componentItem[3]?.custorData
                    delete item.layoutItems.componentItem[1].layoutItems.componentItem[0].layoutItems.componentItem[3]?.custorData
                }
            }
            return item
        })
        dispatch({ type: 'setCon', params: { content: [...newContent] } })
        let newConItem = componentItem.map((item: {widgetTypeV2: string, componentItem: {widgetTypeV2: string, custorData?: any}}) => {
            if (item.widgetTypeV2 === "floatbutton" && item?.componentItem?.widgetTypeV2 === 'enterprise_wx_auto') {
                delete item?.componentItem?.custorData
            }
            return item
        })
        dispatchGlobal({ type: 'setConItem', params: { componentItem: JSON.parse(JSON.stringify(newConItem)) } })
    }
    // 设置客服组
    const setCustorDataHandle = (e: any) => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        if (selectIndex === -1) {
            newContent = JSON.parse(JSON.stringify(componentItem))
            selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        }
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            if (selectCon?.widgetTypeV2 === "enterprise_wx_auto") {
                selectCon.custorData = e
                oldContent[selectIndex] = { ...selectCon }
                dispatch({ type: 'setCon', params: { content: [...oldContent] } })
            } else if (selectCon?.widgetTypeV2 === 'shelfnew') {
                if (selectCon?.type === '104') { // 图文复合组件 单个
                    selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2]['custorData'] = e
                } else if (selectCon?.type === '103') {
                    selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3]['custorData'] = e
                }
                dispatch({ type: 'setCon', params: { content: [...oldContent] } })
            } else if (selectCon?.widgetTypeV2 === 'floatbutton') {
                selectCon.componentItem.custorData = e
                oldContent[selectIndex] = { ...selectCon }
                dispatchGlobal({ type: 'setConItem', params: { componentItem: JSON.parse(JSON.stringify(oldContent)) } })
            } else {
                console.error('设置客服组错误')
            }
        }
        setCustorData([])
    }
    // 点击选择客服组
    const clickCustorGroup = useCallback(() => {
        let newContent = JSON.parse(JSON.stringify(content))
        let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        if (selectIndex === -1) {
            newContent = JSON.parse(JSON.stringify(componentItem))
            selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
        }
        let oldContent = newContent
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            let data: any[] = []
            if (selectCon?.widgetTypeV2 === "enterprise_wx_auto") {
                data = selectCon?.custorData
            } else if (selectCon?.widgetTypeV2 === 'shelfnew') {
                if (selectCon?.type === '104') { // 图文复合组件 单个
                    data = selectCon.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2]?.custorData
                } else if (selectCon?.type === '103') {
                    data = selectCon.layoutItems.componentItem[goodsCount].layoutItems.componentItem[0].layoutItems.componentItem[3]?.custorData
                }
            } else if (selectCon?.widgetTypeV2 === "floatbutton") {
                data = selectCon?.componentItem?.custorData
            }
            if (data && data.length > 0) {
                setCustorData(data)
            } else {
                let newCustorData: any[] = []
                channelAccounts?.forEach((item: { id: number, accountName: string, MP?: any[], ADQ?: any[] }) => {
                    if (item?.MP && item?.MP?.length > 0) {
                        let data = item?.MP?.map((mp: { id: number, uname: string }) => {
                            return {
                                id: mp.id,
                                label: getChannelName(item.accountName) + '-' + mp.uname,
                                serverId: item.id,
                                value: mp.id,
                                wechat_info: {
                                    service_name: item.accountName,
                                    wechat_name: mp.uname
                                },
                                custorData: []
                            }
                        })
                        if (data) {
                            newCustorData = [...newCustorData, ...data]
                        }
                    }
                })
                setCustorData([...newCustorData])
            }
        }
        setCustorShow(true)
    }, [content, channelAccounts, custorShow, componentItem])

    // 设置悬浮弹窗
    const setGlobalComponentItem = (key: string, value: any, isDel = false) => {
        let newConItem = JSON.parse(JSON.stringify(componentItem))
        let selectIndex = newConItem?.findIndex((item: Content) => item.comptActive)
        let oldContent = newConItem
        if (selectIndex !== -1) {
            let selectCon = oldContent[selectIndex]
            // 设置悬浮窗 转化按钮
            if (key === 'componentItem' && (value === 'gh' || value === 'enterprise_wx_auto')) {
                if (value === 'gh') {
                    selectCon[key] = floatbuttonBtTypeGh
                } else if (value === 'enterprise_wx_auto') {
                    selectCon[key] = floatbuttonBtTypeWxAuto
                }
            } else {
                if (!isDel) {
                    selectCon[key] = value
                    if (key === 'wxad_styleType') {
                        if (value === '1') {
                            selectCon['iconUrl'] = ""
                            selectCon['desc'] = selectCon?.desc || ""
                        } else if (value === '2') {
                            delete selectCon['iconUrl']
                            selectCon['desc'] = selectCon?.desc || ""
                        } else if (value === '3') {
                            delete selectCon['iconUrl']
                            delete selectCon['desc']
                        }
                        selectCon[key] = value
                    }
                } else {
                    delete selectCon[key]
                }
            }

            dispatchGlobal({ type: 'setConItem', params: { componentItem: JSON.parse(JSON.stringify(oldContent)) } })
        }
    }

    // 选中设置
    const rightCon = () => {
        let selectCon = content?.find((item: Content) => item.comptActive)
        if (!selectCon) {
            selectCon = componentItem?.find((item: { comptActive: boolean }) => item.comptActive)
        }
        if (selectCon) {
            let { widgetTypeV2, adLocation, viewType, pureImageUrl, content, fontColor, fontSize, showType, textAlignment,
                paddingTop, paddingBottom, subType, btnTitle, btnFontType, btnBorderColorTheme, btnBgColorTheme, useIcon,
                styleType, type, initHeight, outerUseTopMaterial, componentCount, activeIndex, componentGroupList, origBtnJumpUrl,
                layoutItems, borderColor, bgColor, wxad_align, wxad_styleType, iconUrl, title, desc, titleColor, descColor, componentItem, appearPaddingTop, appearPaddingBottom } = selectCon
            let descType = "text"
            let jumpMode = "btn_jump"
            let shelfnewImgData: { pureImageUrl: string } = { pureImageUrl: '' }  // 图片信息
            let shelfnewTitleData: { content: string, fontColor: string } = { content: "", fontColor: "#353535" } // 标题信息
            let shelfnewDescData: { name: string, content: string, fontColor: string } = { name: '', content: "", fontColor: "#B2B2B2" } // 描述信息
            let shelfnewBtData: {
                widgetTypeV2: string, btnTitle: string, btnBgColorTheme: string,
                subType: '17' | '1', btnFontType: '0' | '1',
                btnBorderColorTheme: string, fontColor: string, origBtnJumpUrl: string,
                custorData: any[]
            } = { widgetTypeV2: '', btnFontType: '0', subType: '17', btnTitle: "", btnBgColorTheme: "#07C160", btnBorderColorTheme: "#FFFFFF", fontColor: "#FFFFFF", origBtnJumpUrl: "", custorData: [] }

            let custorGroup = []
            if (widgetTypeV2 === 'enterprise_wx_auto') {
                custorGroup = selectCon?.custorData || []
            } else if (widgetTypeV2 === 'shelfnew') {
                if (type === '104') {  // 图文复合组件 单个
                    let shelfnewData = layoutItems?.componentItem[0]?.layoutItems?.componentItem
                    jumpMode = layoutItems?.componentItem[0]?.jumpMode
                    descType = shelfnewData[1]?.descType
                    shelfnewImgData = shelfnewData[0]
                    shelfnewTitleData = shelfnewData[1]?.layoutItems?.componentItem[0]
                    shelfnewDescData = shelfnewData[1]?.layoutItems?.componentItem[1]
                    shelfnewBtData = shelfnewData[1]?.layoutItems?.componentItem[2]
                } else if (type === '103') {
                    // goodsCount
                    let componentItems = layoutItems.componentItem
                    let componentItem = componentItems[goodsCount]
                    borderColor = componentItem?.borderColor || "#e5e5e5"
                    bgColor = componentItem?.bgColor || "#ffffff"
                    jumpMode = componentItem?.layoutItems?.componentItem[0]?.jumpMode
                    let shelfnewItem = componentItem?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                    descType = componentItem?.layoutItems?.componentItem[0]?.descType
                    shelfnewImgData = shelfnewItem[0]
                    shelfnewTitleData = shelfnewItem[1]
                    shelfnewDescData = shelfnewItem[2]
                    shelfnewBtData = shelfnewItem[3]
                }
            }

            return <>
                {
                    widgetTypeV2 === 'topimg' ? <div className="widget">
                        <div className="caption section">
                            <div className="caption-title">顶部组件：图片</div>
                        </div>
                        <div className="form section">
                            <div className="form-caption">广告位与样式</div>
                            <div className="adui-form-item">
                                <div className="adui-form-label">广告位</div>
                                <div className="adui-form-control">
                                    <Radio.Group onChange={(e) => { setCon('adLocation', e.target.value, true) }} value={adLocation} size='small'>
                                        <Radio value='sns'>朋友圈信息流</Radio>
                                        <Radio value='gh'>公众号及其他</Radio>
                                    </Radio.Group>
                                </div>
                            </div>
                            {adLocation === 'sns' && <div className="adui-form-item">
                                <div className="adui-form-label">外层样式</div>
                                <div className="adui-form-control">
                                    <Select value={viewType} style={{ width: 100 }} onChange={(e) => { setCon('viewType', e, true) }}>
                                        <Option value="0">常规广告</Option>
                                        <Option value="1">卡片广告</Option>
                                    </Select>
                                </div>
                            </div>}
                        </div>
                        <div className="form section">
                            <div className="form-caption">素材设置</div>
                            <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                                <div className="adui-form-label">图片素材</div>
                                <div className="adui-form-control">
                                    <div className={`upload-img-item ${pureImageUrl ? 'upload-img-item_uploaded' : ''}`}>
                                        {pureImageUrl ? <div className="upload-img-item-inner" style={{ backgroundImage: `url(${pureImageUrl})` }}>
                                            <div className='upload-img-item-action' onClick={() => { clickUpdateImg(1) }}>
                                                <RetweetOutlined />
                                            </div>
                                        </div> : <div className="upload-img-item-inner" onClick={() => { clickUpdateImg(1) }}>
                                            <PlusOutlined />
                                        </div>}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        :
                        widgetTypeV2 === 'topslider' ? <div className="widget">
                            <div className="caption section">
                                <div className="caption-title">顶部组件：轮播图</div>
                            </div>
                            <div className="form section">
                                <div className="form-caption">素材设置</div>
                                <div className="adui-form-item">
                                    <div className="adui-form-label">图片数量</div>
                                    <div className="adui-form-control">
                                        <Radio.Group onChange={(e) => { sliderImgNum(e.target.value) }} value={componentCount} size='small'>
                                            <Radio.Button value='3'>3张</Radio.Button>
                                            <Radio.Button value='4'>4张</Radio.Button>
                                            <Radio.Button value='6'>6张</Radio.Button>
                                        </Radio.Group>
                                    </div>
                                </div>
                            </div>

                            <div className="form section">
                                <div className="form-caption">上传素材</div>
                                <SortableUlList axis='xy' onSortEnd={onSortEndSlider} useDragHandle>
                                    {componentGroupList?.componentGroup?.map((item: any, index: number) => {
                                        let { componentItem } = item
                                        if (componentItem?.pureImageUrl) {
                                            return <SortableItemLi key={`slider-${index}`} index={index} isActive={activeIndex === index} pureImageUrl={componentItem?.pureImageUrl} click={() => { sliderSelect(index, componentCount) }} setActiveIndex={() => { setCon('activeIndex', index) }}></SortableItemLi>
                                        } else {
                                            return <SortableItemNoLi key={`slider-${index}`} index={index} isActive={activeIndex === index} click={() => { sliderSelect(index, componentCount) }}></SortableItemNoLi>
                                        }
                                    })}
                                </SortableUlList>
                            </div>
                        </div>
                            :
                            widgetTypeV2 === 'topvideo_new' ? <div className="widget">
                                <div className="caption section">
                                    <div className="caption-title">顶部组件：视频</div>
                                </div>
                                <div className="form section">
                                    <div className="form-caption">广告位与样式</div>
                                    <div className="adui-form-item">
                                        <div className="adui-form-label">广告位</div>
                                        <div className="adui-form-control">
                                            <Radio.Group onChange={(e) => { changeAdLocation(e.target.value) }} value={adLocation} size='small'>
                                                <Radio value='sns'>朋友圈信息流</Radio>
                                                <Radio value='gh'>公众号及其他</Radio>
                                            </Radio.Group>
                                        </div>
                                    </div>
                                    {adLocation === 'sns' && <div className="adui-form-item">
                                        <div className="adui-form-label">外层样式</div>
                                        <div className="adui-form-control">
                                            <Select size="small" value={viewType} style={{ width: 100 }} onChange={(e) => { changeOuterLayout(e) }}>
                                                <Option value="0">常规广告</Option>
                                                <Option value="1" disabled>卡片广告</Option>
                                            </Select>
                                        </div>
                                    </div>}
                                    {
                                        adLocation === 'sns' && viewType === '0' && <div className="adui-form-item">
                                            <div className="adui-form-label">视频类型</div>
                                            <div className="adui-form-control">
                                                <Radio.Group onChange={(e) => { viewTypeChange(e.target.value, 1) }} value={styleType} size='small'>
                                                    <Radio value='0'>横板视频</Radio>
                                                    <Radio value='1'>竖版视频</Radio>
                                                </Radio.Group>
                                            </div>
                                        </div>
                                    }
                                    {
                                        adLocation === 'sns' && viewType === '1' && <div className="adui-form-item">
                                            <div className="adui-form-label">外层素材</div>
                                            <div className="adui-form-control">
                                                <Checkbox onChange={(e: CheckboxChangeEvent) => { outerUseTopMaterialHandle(e.target.checked) }} checked={outerUseTopMaterial === '0' ? false : true}>顶部素材不用于广告外层</Checkbox>
                                            </div>
                                        </div>
                                    }
                                    {/* {
                                        outerUseTopMaterial === '1' && <div className="adui-form-item">
                                            <div className="adui-form-label">视频类型</div>
                                            <div className="adui-form-control">
                                                <Radio.Group onChange={(e) => { viewTypeChange(e.target.value, 2) }} value={type} size='small'>
                                                    <Radio value='61'>短视频</Radio>
                                                    <Radio value='62'>长视频</Radio>
                                                </Radio.Group>
                                            </div>
                                        </div>
                                    } */}
                                    {/* {
                                        adLocation === 'gh' && <div className="adui-form-item">
                                            <div className="adui-form-label">视频类型</div>
                                            <div className="adui-form-control">
                                                <Radio.Group onChange={(e) => { viewTypeChange(e.target.value, 2) }} value={type} size='small'>
                                                    <Radio value='61'>短视频</Radio>
                                                    <Radio value='62'>长视频</Radio>
                                                </Radio.Group>
                                            </div>
                                        </div>
                                    } */}
                                    {adLocation === 'sns' && styleType === '1' && <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                                        <div className="adui-form-label" style={{ marginTop: 2 }}>视频尺寸</div>
                                        <div className="adui-form-control">
                                            <Radio.Group value={initHeight} onChange={(e) => { setCon('initHeight', e.target.value) }}>
                                                <Radio value={1536}>750像素 x 1536像素</Radio>
                                                <Radio value={1334}>750像素 x 1334像素</Radio>
                                                <Radio value={1280}>720像素 x 1280像素</Radio>
                                            </Radio.Group>
                                        </div>
                                    </div>}
                                </div>
                            </div>
                                :
                                widgetTypeV2 === 'text' ? <div className="widget">
                                    <div className="caption section">
                                        <div className="caption-title">文本</div>
                                    </div>
                                    <div className="form section">
                                        <div className="form-caption">推广文案</div>
                                        <TextArea
                                            placeholder="请输入"
                                            autoSize={{ minRows: 4, maxRows: 6 }}
                                            value={content}
                                            onChange={(e) => { setCon('content', e.target.value) }}
                                        />
                                    </div>
                                    <div className="form section">
                                        <div className="form-caption">字符与段落</div>
                                        <div className="adui-form-item">
                                            <div className="adui-form-label">字符样式</div>
                                            <div className="adui-form-control">
                                                <div className="fl-sb">
                                                    <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                                                        <Space>
                                                            <Select value={fontSize} style={{ width: 60 }} onChange={(e) => { setCon('fontSize', e) }}>
                                                                {[14, 15, 16, 18, 20, 24, 36].map((item: number) => (<Option value={item} key={item}>{item}</Option>))}
                                                            </Select>
                                                            <ColorPicker onColor={(color: string) => { setCon('fontColor', color) }} color={fontColor}></ColorPicker>
                                                        </Space>
                                                    </div>
                                                    <Radio.Group onChange={(e) => { setCon('showType', e.target.value) }} value={showType}>
                                                        <Radio.Button value="0">常规</Radio.Button>
                                                        <Radio.Button value="1">加粗</Radio.Button>
                                                    </Radio.Group>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="adui-form-item">
                                            <div className="adui-form-label">对齐方式</div>
                                            <div className="adui-form-control">
                                                <Radio.Group onChange={(e) => { setCon('textAlignment', e.target.value) }} value={textAlignment}>
                                                    <Radio.Button value={0}><AlignLeftOutlined /></Radio.Button>
                                                    <Radio.Button value={1}><AlignCenterOutlined /></Radio.Button>
                                                    <Radio.Button value={2}><AlignRightOutlined /></Radio.Button>
                                                </Radio.Group>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="form section">
                                        <div className="form-caption">边距</div>
                                        <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                            <div className="adui-form-label">上边距</div>
                                            <div className="adui-form-control">
                                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                    <div style={{ flexGrow: 1 }}><Slider value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} /></div>
                                                    <InputNumber min={0} max={100} step={1} value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                </div>
                                            </div>
                                        </div>
                                        <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                            <div className="adui-form-label">下边距</div>
                                            <div className="adui-form-control">
                                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                    <div style={{ flexGrow: 1 }}><Slider value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} /></div>
                                                    <InputNumber min={0} max={100} step={1} value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    :
                                    widgetTypeV2 === 'img' ? <div className="widget">
                                        <div className="caption section">
                                            <div className="caption-title">图片</div>
                                        </div>
                                        <div className="form section">
                                            <div className="form-caption">素材设置</div>
                                            <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                                                <div className="adui-form-label">图片素材</div>
                                                <div className="adui-form-control">
                                                    <div className={`upload-img-item ${pureImageUrl ? 'upload-img-item_uploaded' : ''}`}>
                                                        {
                                                            pureImageUrl ? <div className="upload-img-item-inner" style={{ backgroundImage: `url(${pureImageUrl ? pureImageUrl : ""})` }}>
                                                                <div className='upload-img-item-action' onClick={() => { clickUpdateImg(1) }}>
                                                                    <RetweetOutlined />
                                                                </div>
                                                            </div>
                                                                :
                                                                <div className="upload-img-item-inner" onClick={() => { clickUpdateImg(1) }}>
                                                                    <PlusOutlined />
                                                                </div>
                                                        }
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="form section">
                                            <div className="form-caption">边距</div>
                                            <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                <div className="adui-form-label">上边距</div>
                                                <div className="adui-form-control">
                                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                        <div style={{ flexGrow: 1 }}><Slider value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} /></div>
                                                        <InputNumber min={0} max={100} step={1} value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                <div className="adui-form-label">下边距</div>
                                                <div className="adui-form-control">
                                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                        <div style={{ flexGrow: 1 }}><Slider value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} /></div>
                                                        <InputNumber min={0} max={100} step={1} value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        :
                                        widgetTypeV2 === 'gh' ? <div className="widget">
                                            <div className="caption section">
                                                <div className="caption-title">关注公众号</div>
                                            </div>
                                            <div className="form section">
                                                <Space>
                                                    <Switch size="small" checked={subType === '17' ? true : false} onChange={(e) => { setCon('subType', e ? '17' : '1') }} />
                                                    一键关注
                                                    <Tooltip placement="top" title={'唤起公众号简介的半屏面板，点击其中按钮直接关注公众号'}>
                                                        <QuestionCircleOutlined />
                                                    </Tooltip>
                                                </Space>
                                            </div>
                                            <div className="form section">
                                                <div className="form-caption">按钮外观</div>
                                                <div className="adui-form-item">
                                                    <div className="adui-form-label">按钮文案</div>
                                                    <div className="adui-form-control">
                                                        <div className="fl-sb">
                                                            <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                                                                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: '1px solid #d9d9d9', borderRadius: 2, paddingRight: 8 }}>
                                                                    <Input maxLength={10} style={{ width: 90 }} bordered={false} value={btnTitle} onChange={(e) => { setCon('btnTitle', e.target.value) }} /> <span>{btnTitle?.length}/10</span>
                                                                </div>
                                                            </div>
                                                            <Radio.Group onChange={(e) => { setCon('btnFontType', e.target.value) }} value={btnFontType}>
                                                                <Radio.Button value="0">常规</Radio.Button>
                                                                <Radio.Button value="1">加粗</Radio.Button>
                                                            </Radio.Group>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                    <div className="adui-form-label">字体色</div>
                                                    <div className="adui-form-control">
                                                        <Space><ColorPicker onColor={(color: string) => { setCon('fontColor', color) }} color={fontColor}></ColorPicker><div className="colorShow">{fontColor}</div></Space>
                                                    </div>
                                                </div>
                                                <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                    <div className="adui-form-label">图标</div>
                                                    <div className="adui-form-control">
                                                        <Switch size="small" checked={useIcon === '1' ? true : false} onChange={(e) => { iconHandle(e) }} /> <span>{useIcon === '1' ? '已启用' : '未启用'}</span>
                                                    </div>
                                                </div>
                                                <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                    <div className="adui-form-label">边框色</div>
                                                    <div className="adui-form-control">
                                                        <Space><ColorPicker onColor={(color: string) => { setCon('btnBorderColorTheme', color) }} color={btnBorderColorTheme}></ColorPicker><div className="colorShow">{btnBorderColorTheme}</div></Space>
                                                    </div>
                                                </div>
                                                <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                    <div className="adui-form-label">背景色</div>
                                                    <div className="adui-form-control">
                                                        <Space><ColorPicker onColor={(color: string) => { setCon('btnBgColorTheme', color) }} color={btnBgColorTheme}></ColorPicker><div className="colorShow">{btnBgColorTheme}</div></Space>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="form section">
                                                <div className="form-caption">边距</div>
                                                <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                    <div className="adui-form-label">上边距</div>
                                                    <div className="adui-form-control">
                                                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                            <div style={{ flexGrow: 1 }}><Slider value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} /></div>
                                                            <InputNumber min={0} max={100} step={1} value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                    <div className="adui-form-label">下边距</div>
                                                    <div className="adui-form-control">
                                                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                            <div style={{ flexGrow: 1 }}><Slider value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} /></div>
                                                            <InputNumber min={0} max={100} step={1} value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> :
                                            widgetTypeV2 === 'enterprise_wx_auto' ? <div className="widget">
                                                <div className="caption section">
                                                    <div className="caption-title">添加商家微信</div>
                                                </div>
                                                <div className="form section">
                                                    <div className="form-caption">客服设置</div>
                                                    <div className="adui-form-item">
                                                        <div className="adui-form-label">客服分配</div>
                                                        <div className="adui-form-control">
                                                            <div className="fl-sb">
                                                                <Button size="small" onClick={clickCustorGroup}>{custorGroup.length > 0 ? '修改客服组' : '选择客服组'}</Button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {custorGroup.length > 0 && <div className='adui-form-item custorGroup'>
                                                        {custorGroup.map((item: { label: string, custorData: any[], id: number }) => <div key={item.id}>
                                                            <strong>{item.label}：</strong><span>{item.custorData[0]?.name}</span>
                                                        </div>)}
                                                    </div>}
                                                </div>
                                                <div className="form section">
                                                    <div className="form-caption">按钮外观</div>
                                                    <div className="adui-form-item">
                                                        <div className="adui-form-label">按钮文案</div>
                                                        <div className="adui-form-control">
                                                            <div className="fl-sb">
                                                                <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                                                                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: '1px solid #d9d9d9', borderRadius: 2, paddingRight: 8 }}>
                                                                        <Input maxLength={10} style={{ width: 90 }} bordered={false} value={btnTitle} onChange={(e) => { setCon('btnTitle', e.target.value) }} /> <span>{btnTitle?.length}/10</span>
                                                                    </div>
                                                                </div>
                                                                <Radio.Group onChange={(e) => { setCon('btnFontType', e.target.value) }} value={btnFontType}>
                                                                    <Radio.Button value="0">常规</Radio.Button>
                                                                    <Radio.Button value="1">加粗</Radio.Button>
                                                                </Radio.Group>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                        <div className="adui-form-label">字体色</div>
                                                        <div className="adui-form-control">
                                                            <Space><ColorPicker onColor={(color: string) => { setCon('fontColor', color) }} color={fontColor}></ColorPicker> <div className="colorShow">{fontColor}</div></Space>
                                                        </div>
                                                    </div>
                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                        <div className="adui-form-label">图标</div>
                                                        <div className="adui-form-control">
                                                            <Switch size="small" checked={useIcon === '1' ? true : false} onChange={(e) => { iconHandle(e) }} /> <span>{useIcon === '1' ? '已启用' : '未启用'}</span>
                                                        </div>
                                                    </div>
                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                        <div className="adui-form-label">边框色</div>
                                                        <div className="adui-form-control">
                                                            <Space><ColorPicker onColor={(color: string) => { setCon('btnBorderColorTheme', color) }} color={btnBorderColorTheme}></ColorPicker> <div className="colorShow">{btnBorderColorTheme}</div></Space>
                                                        </div>
                                                    </div>
                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                        <div className="adui-form-label">背景色</div>
                                                        <div className="adui-form-control">
                                                            <Space><ColorPicker onColor={(color: string) => { setCon('btnBgColorTheme', color) }} color={btnBgColorTheme}></ColorPicker> <div className="colorShow">{btnBgColorTheme}</div></Space>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="form section">
                                                    <div className="form-caption">边距</div>
                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                        <div className="adui-form-label">上边距</div>
                                                        <div className="adui-form-control">
                                                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                                <div style={{ flexGrow: 1 }}><Slider value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} /></div>
                                                                <InputNumber min={0} max={100} step={1} value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                        <div className="adui-form-label">下边距</div>
                                                        <div className="adui-form-control">
                                                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                                <div style={{ flexGrow: 1 }}><Slider value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} /></div>
                                                                <InputNumber min={0} max={100} step={1} value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                :
                                                widgetTypeV2 === 'link' ? <div className="widget">
                                                    <div className="caption section">
                                                        <div className="caption-title">跳转链接</div>
                                                    </div>
                                                    <div className="form section">
                                                        <div className="form-caption">链接设置</div>
                                                        <Input placeholder="以 http:// 或 https:// 开头" value={origBtnJumpUrl} onChange={(e) => { setCon('origBtnJumpUrl', e.target.value) }} />
                                                    </div>
                                                    <div className="form section">
                                                        <div className="form-caption">按钮外观</div>
                                                        <div className="adui-form-item">
                                                            <div className="adui-form-label">按钮文案</div>
                                                            <div className="adui-form-control">
                                                                <div className="fl-sb">
                                                                    <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                                                                        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: '1px solid #d9d9d9', borderRadius: 2, paddingRight: 8 }}>
                                                                            <Input maxLength={10} style={{ width: 90 }} bordered={false} value={btnTitle} onChange={(e) => { setCon('btnTitle', e.target.value) }} /> <span>{btnTitle?.length}/10</span>
                                                                        </div>
                                                                    </div>
                                                                    <Radio.Group onChange={(e) => { setCon('btnFontType', e.target.value) }} value={btnFontType}>
                                                                        <Radio.Button value="0">常规</Radio.Button>
                                                                        <Radio.Button value="1">加粗</Radio.Button>
                                                                    </Radio.Group>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                            <div className="adui-form-label">字体色</div>
                                                            <div className="adui-form-control">
                                                                <Space><ColorPicker onColor={(color: string) => { setCon('fontColor', color) }} color={fontColor}></ColorPicker><div className="colorShow">{fontColor}</div></Space>
                                                            </div>
                                                        </div>
                                                        <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                            <div className="adui-form-label">图标</div>
                                                            <div className="adui-form-control">
                                                                <Switch size="small" checked={useIcon === '1' ? true : false} onChange={(e) => { iconHandle(e) }} /> <span>{useIcon === '1' ? '已启用' : '未启用'}</span>
                                                            </div>
                                                        </div>
                                                        <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                            <div className="adui-form-label">边框色</div>
                                                            <div className="adui-form-control">
                                                                <Space><ColorPicker onColor={(color: string) => { setCon('btnBorderColorTheme', color) }} color={btnBorderColorTheme}></ColorPicker><div className="colorShow">{btnBorderColorTheme}</div></Space>
                                                            </div>
                                                        </div>
                                                        <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                            <div className="adui-form-label">背景色</div>
                                                            <div className="adui-form-control">
                                                                <Space><ColorPicker onColor={(color: string) => { setCon('btnBgColorTheme', color) }} color={btnBgColorTheme}></ColorPicker><div className="colorShow">{btnBgColorTheme}</div></Space>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className="form section">
                                                        <div className="form-caption">边距</div>
                                                        <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                            <div className="adui-form-label">上边距</div>
                                                            <div className="adui-form-control">
                                                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                                    <div style={{ flexGrow: 1 }}><Slider value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} /></div>
                                                                    <InputNumber min={0} max={100} step={1} value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                            <div className="adui-form-label">下边距</div>
                                                            <div className="adui-form-control">
                                                                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                                    <div style={{ flexGrow: 1 }}><Slider value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} /></div>
                                                                    <InputNumber min={0} max={100} step={1} value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                    :
                                                    widgetTypeV2 === 'shelfnew' ? <div className="widget">
                                                        {imgTextButtonShow ? <>
                                                            <div className="caption section goBack" onClick={() => { setImgTextButtonShow(false) }}>
                                                                <SwapLeftOutlined />
                                                                <span>返回</span>
                                                            </div>
                                                            {shelfnewBtData.widgetTypeV2 === 'gh' || shelfnewBtData.widgetTypeV2 === 'link' || shelfnewBtData.widgetTypeV2 === 'enterprise_wx_auto' ? <>

                                                                {shelfnewBtData.widgetTypeV2 === 'link' ? <div className="form section">
                                                                    <div className="form-caption">链接设置</div>
                                                                    <Input placeholder="以 http:// 或 https:// 开头" value={shelfnewBtData?.origBtnJumpUrl} onChange={(e) => { onSetShelfnewButtonField('origBtnJumpUrl', e.target.value) }} />
                                                                </div> : shelfnewBtData.widgetTypeV2 === 'gh' ? <div className="form section">
                                                                    <Space>
                                                                        <Switch size="small" checked={shelfnewBtData?.subType === '17' ? true : false} onChange={(e) => { onSetShelfnewButtonField('subType', e ? '17' : '1') }} />
                                                                        一键关注
                                                                        <Tooltip placement="top" title={'唤起公众号简介的半屏面板，点击其中按钮直接关注公众号'}>
                                                                            <QuestionCircleOutlined />
                                                                        </Tooltip>
                                                                    </Space>
                                                                </div> : <div className="form section">
                                                                    <div className="form-caption">客服设置</div>
                                                                    <div className="adui-form-item">
                                                                        <div className="adui-form-label">客服分配</div>
                                                                        <div className="adui-form-control">
                                                                            <div className="fl-sb">
                                                                                <Button size="small" onClick={clickCustorGroup}>{shelfnewBtData?.custorData?.length > 0 ? '修改客服组' : '选择客服组'}</Button>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    {shelfnewBtData?.custorData?.length > 0 && <div className='adui-form-item custorGroup'>
                                                                        {shelfnewBtData?.custorData?.map((item: { label: string, custorData: any[], id: number }) => <div key={item.id}>
                                                                            <strong>{item.label}：</strong><span>{item.custorData[0]?.name}</span>
                                                                        </div>)}
                                                                    </div>}
                                                                </div>}

                                                                <div className="form section">
                                                                    <div className="form-caption">按钮外观</div>
                                                                    <div className="adui-form-item">
                                                                        <div className="adui-form-label">按钮文案</div>
                                                                        <div className="adui-form-control">
                                                                            <div className="fl-sb">
                                                                                <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                                                                                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: '1px solid #d9d9d9', borderRadius: 2, paddingRight: 8 }}>
                                                                                        <Input maxLength={5} style={{ width: 90 }} bordered={false} value={shelfnewBtData?.btnTitle} onChange={(e) => { onSetShelfnewButtonField('btnTitle', e.target.value) }} /> <span>{shelfnewBtData?.btnTitle?.length}/5</span>
                                                                                    </div>
                                                                                </div>
                                                                                <Radio.Group onChange={(e) => { onSetShelfnewButtonField('btnFontType', e.target.value) }} value={shelfnewBtData?.btnFontType}>
                                                                                    <Radio.Button value="0">常规</Radio.Button>
                                                                                    <Radio.Button value="1">加粗</Radio.Button>
                                                                                </Radio.Group>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                                        <div className="adui-form-label">字体色</div>
                                                                        <div className="adui-form-control">
                                                                            <Space><ColorPicker onColor={(color: string) => { onSetShelfnewButtonField('fontColor', color) }} color={shelfnewBtData?.fontColor}></ColorPicker><div className="colorShow">{shelfnewBtData?.fontColor}</div></Space>
                                                                        </div>
                                                                    </div>
                                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                                        <div className="adui-form-label">边框色</div>
                                                                        <div className="adui-form-control">
                                                                            <Space><ColorPicker onColor={(color: string) => { onSetShelfnewButtonField('btnBorderColorTheme', color) }} color={shelfnewBtData?.btnBorderColorTheme}></ColorPicker><div className="colorShow">{shelfnewBtData?.btnBorderColorTheme}</div></Space>
                                                                        </div>
                                                                    </div>
                                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                                        <div className="adui-form-label">背景色</div>
                                                                        <div className="adui-form-control">
                                                                            <Space><ColorPicker onColor={(color: string) => { onSetShelfnewButtonField('btnBgColorTheme', color) }} color={shelfnewBtData?.btnBgColorTheme}></ColorPicker><div className="colorShow">{shelfnewBtData?.btnBgColorTheme}</div></Space>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </> : <></>}
                                                        </> : <>
                                                            <div className="caption section">
                                                                <div className="caption-title">图文复合组件</div>
                                                            </div>
                                                            <div className="form section">
                                                                <div className="adui-form-item">
                                                                    <div className="adui-form-label">类型</div>
                                                                    <div className="adui-form-control">
                                                                        <>
                                                                            <Radio.Group onChange={(e) => { setShelfnewType(e.target.value) }} value={type}>
                                                                                <Radio value='104'>一行1个</Radio>
                                                                                <Radio value='103'>一行2个</Radio>
                                                                            </Radio.Group>
                                                                            {type === '103' && <Radio.Group onChange={(e) => { setGoodsCount(e.target.value) }} value={goodsCount} size='small' style={{ marginTop: 10 }}>
                                                                                <Radio.Button value={0}>商品1</Radio.Button>
                                                                                <Radio.Button value={1}>商品2</Radio.Button>
                                                                            </Radio.Group>}
                                                                        </>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div className="form section">
                                                                <div className="adui-form-item">
                                                                    <div className="adui-form-label">配图</div>
                                                                    <div className="adui-form-control">
                                                                        <div>
                                                                            <Button onClick={() => { setCcType(4); setSelectImgVisible(true); setNum(1) }}>上传图片</Button>
                                                                            <div style={{ marginTop: 4, fontSize: 12, color: '#636363' }}>{type === '103' ? '尺寸：480像素*480像素' : '尺寸：360像素*360像素'}</div>
                                                                            <div style={{ marginTop: 4, fontSize: 12, color: '#636363' }}>格式：不超过300k</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                                                                    <div className="adui-form-label" style={{ marginTop: 6 }}>标题</div>
                                                                    <div className="adui-form-control">
                                                                        <Input.TextArea placeholder="请输入标题" onChange={(e) => { onShelfnewTxtCon(e.target.value?.replace(/\r|\n/ig, ""), 0, 'content') }} value={shelfnewTitleData?.content} showCount maxLength={type === '104' ? 12 : 8} autoSize />
                                                                    </div>
                                                                </div>

                                                                <div className="adui-form-item">
                                                                    <div className="adui-form-label">描述</div>
                                                                    <div className="adui-form-control">
                                                                        <Space direction="vertical" style={{ width: '100%' }}>
                                                                            <Radio.Group onChange={onSetShelfnewDescType} value={descType}>
                                                                                <Radio value="text">文字</Radio>
                                                                                <Radio value="price">价格</Radio>
                                                                            </Radio.Group>
                                                                            {descType === 'text' ?
                                                                                <Input.TextArea placeholder="请输入描述" onChange={(e) => { onShelfnewTxtCon(e.target.value?.replace(/\r|\n/ig, ""), 1, 'content') }} value={shelfnewDescData?.content} showCount maxLength={type === '104' ? 15 : 10} autoSize={{ minRows: 2, maxRows: 2 }} /> :
                                                                                <div>
                                                                                    <Input placeholder="请输入" suffix="元" onChange={(e) => { onShelfnewTxtCon(e.target.value, 1, 'content') }} style={{ width: 150 }} value={shelfnewDescData?.content?.split('￥')[1]} />
                                                                                    <div style={{ fontSize: 12, color: '#636363', marginTop: 5 }}>价格范围0.01~999,999,999.99元</div>
                                                                                </div>
                                                                            }
                                                                        </Space>
                                                                    </div>
                                                                </div>

                                                                {type === '103' && <div className="adui-form-item">
                                                                    <div className="adui-form-label">对齐</div>
                                                                    <div className="adui-form-control">
                                                                        <Radio.Group onChange={(e) => { setAilgin103(e.target.value) }} value={wxad_align}>
                                                                            <Radio value={0}>左对齐</Radio>
                                                                            <Radio value={1}>居中对齐</Radio>
                                                                        </Radio.Group>
                                                                    </div>
                                                                </div>}

                                                                <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                                                                    <div className="adui-form-label" style={{ marginTop: 14 }}>字体颜色</div>
                                                                    <div className="adui-form-control">
                                                                        <Space style={{ width: '100%' }} size="large" className="shelfnewColor">
                                                                            <div>
                                                                                <Space><ColorPicker onColor={(color: string) => { onShelfnewTxtCon(color, 0, 'fontColor') }} color={shelfnewTitleData?.fontColor}></ColorPicker> <div className="colorShow">{shelfnewTitleData?.fontColor}</div></Space>
                                                                                <div className="colorName">标题</div>
                                                                            </div>
                                                                            <div>
                                                                                <Space><ColorPicker onColor={(color: string) => { onShelfnewTxtCon(color, 1, 'fontColor') }} color={shelfnewDescData?.fontColor}></ColorPicker> <div className="colorShow">{shelfnewDescData?.fontColor}</div></Space>
                                                                                <div className="colorName">{shelfnewDescData?.name}</div>
                                                                            </div>
                                                                        </Space>
                                                                    </div>
                                                                </div>
                                                                <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                                                                    <div className="adui-form-label" style={{ marginTop: 14 }}>其它颜色</div>
                                                                    <div className="adui-form-control">
                                                                        <Space style={{ width: '100%' }} size="large" className="shelfnewColor">
                                                                            <div>
                                                                                <Space><ColorPicker onColor={(color: string) => { setCon('borderColor', color) }} color={borderColor}></ColorPicker> <div className="colorShow">{borderColor}</div></Space>
                                                                                <div className="colorName">边框</div>
                                                                            </div>
                                                                            <div>
                                                                                <Space><ColorPicker onColor={(color: string) => { setCon('bgColor', color) }} color={bgColor}></ColorPicker> <div className="colorShow">{bgColor}</div></Space>
                                                                                <div className="colorName">背景</div>
                                                                            </div>
                                                                        </Space>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div className="form section">
                                                                <div className="form-caption">边距</div>
                                                                <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                                    <div className="adui-form-label">上边距</div>
                                                                    <div className="adui-form-control">
                                                                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                                            <div style={{ flexGrow: 1 }}><Slider value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} /></div>
                                                                            <InputNumber min={0} max={100} step={1} value={paddingTop} onChange={(value: number) => { setCon('paddingTop', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                                    <div className="adui-form-label">下边距</div>
                                                                    <div className="adui-form-control">
                                                                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                                                            <div style={{ flexGrow: 1 }}><Slider value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} /></div>
                                                                            <InputNumber min={0} max={100} step={1} value={paddingBottom} onChange={(value: number) => { setCon('paddingBottom', value) }} style={{ width: 80, marginLeft: 20 }} />
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div className="form section">
                                                                <div className="form-caption">按钮</div>
                                                                <div className="adui-form-item">
                                                                    <div className="adui-form-label">跳转方式</div>
                                                                    <div className="adui-form-control">
                                                                        <Radio.Group onChange={onSetShelfnewJumpMode} value={jumpMode}>
                                                                            <Radio value="btn_jump">按钮跳转</Radio>
                                                                            <Radio value="total_jump">全局跳转</Radio>
                                                                        </Radio.Group>
                                                                    </div>
                                                                </div>
                                                                <div className="adui-form-item">
                                                                    <div className="adui-form-label">按钮类型</div>
                                                                    <div className="adui-form-control">
                                                                        <Space>
                                                                            <Select style={{ width: 120 }} value={shelfnewBtData.widgetTypeV2} onChange={(e) => { onSetShelfnewButton(e) }}>
                                                                                <Option value="link">跳转链接</Option>
                                                                                <Option value="gh">关注公众号</Option>
                                                                                <Option value="enterprise_wx_auto" disabled={!channelAccounts?.some((item: any) => (item?.MP?.length > 0 || item?.ADQ?.length > 0))}>添加商家微信</Option>
                                                                            </Select>
                                                                            <Button type="link" size="small" onClick={() => { setImgTextButtonShow(true) }}>配置</Button>
                                                                        </Space>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </>}
                                                    </div>
                                                        :
                                                        widgetTypeV2 === 'floatbutton' ? <div style={{ height: '100%' }}>
                                                            <div className={`widget ${imgTextButtonShow ? 'widget_back' : ''}`}>
                                                                <div className="caption section">
                                                                    <div className="caption-title">悬浮按钮</div>
                                                                </div>
                                                                <div className="form section">
                                                                    <div className="form-caption">卡片设置</div>
                                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                                        <div className="adui-form-label">转化按钮</div>
                                                                        <div className="adui-form-control">
                                                                            <div className='form-result-text'><span>{componentItem?.name}</span> <Button type="link" size='small' style={{ color: '#6b6b6b', fontSize: 12 }} onClick={() => { setImgTextButtonShow(true) }}>设置</Button> </div>
                                                                        </div>
                                                                    </div>
                                                                    <div className="adui-form-item">
                                                                        <div className="adui-form-label">卡片样式</div>
                                                                        <div className="adui-form-control">
                                                                            <Radio.Group onChange={(e) => { setGlobalComponentItem('wxad_styleType', e.target.value) }} className="floatType" value={wxad_styleType}>
                                                                                <Radio.Button value='1'>
                                                                                    <div className='floatTypeInner'>
                                                                                        <i className="floatTypeAvatar"></i>
                                                                                        <i className="floatTypeText_two"></i>
                                                                                        <i className="floatTypeButton"></i>
                                                                                    </div>
                                                                                </Radio.Button>
                                                                                <Radio.Button value='2'>
                                                                                    <div className='floatTypeInner'>
                                                                                        <i style={{ display: 'inline-block', height: 12 }}></i>
                                                                                        <i className="floatTypeText_two"></i>
                                                                                        <i className="floatTypeButton"></i>
                                                                                    </div>
                                                                                </Radio.Button>
                                                                                <Radio.Button value='3'>
                                                                                    <div className='floatTypeInner'>
                                                                                        <i style={{ display: 'inline-block', height: 12 }}></i>
                                                                                        <i className="floatTypeText_one"></i>
                                                                                        <i className="floatTypeButton"></i>
                                                                                    </div>
                                                                                </Radio.Button>
                                                                            </Radio.Group>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div className="form section">
                                                                    <div className="form-caption">内容设置</div>
                                                                    {wxad_styleType === '1' && <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                                                                        <div className="adui-form-label">图片</div>
                                                                        <div className="adui-form-control">
                                                                            <div className={`upload-img-item ${iconUrl ? 'upload-img-item_uploaded' : ''}`}>
                                                                                {
                                                                                    iconUrl ? <div className="upload-img-item-inner" style={{ backgroundImage: `url(${iconUrl ? iconUrl : ""})` }}>
                                                                                        <div className='upload-img-item-action' onClick={() => { setCcType(5); setSelectImgVisible(true); setNum(1) }}>
                                                                                            <RetweetOutlined />
                                                                                        </div>
                                                                                    </div>
                                                                                        :
                                                                                        <div className="upload-img-item-inner" onClick={() => { setCcType(5); setSelectImgVisible(true); setNum(1) }}>
                                                                                            <PlusOutlined />
                                                                                        </div>
                                                                                }
                                                                            </div>
                                                                            <div style={{ marginTop: 4, fontSize: 12, color: '#A3A3A3' }}>尺寸：96像素*96像素</div>
                                                                            <div style={{ marginTop: 4, fontSize: 12, color: '#A3A3A3' }}>格式：不超过300k</div>
                                                                        </div>
                                                                    </div>}

                                                                    <div className="adui-form-item" style={{ alignItems: 'flex-start', marginBottom: 10 }}>
                                                                        <div className="adui-form-label" style={{ marginTop: 6 }}>标题</div>
                                                                        <div className="adui-form-control">
                                                                            <Input.TextArea placeholder="请输入标题" onChange={(e) => { setGlobalComponentItem('title', e.target.value?.replace(/\r|\n/ig, "")) }} value={title} showCount maxLength={10} autoSize />
                                                                        </div>
                                                                    </div>

                                                                    {(wxad_styleType === '1' || wxad_styleType === '2') && <div className="adui-form-item" style={{ alignItems: 'flex-start', marginBottom: 10 }}>
                                                                        <div className="adui-form-label" style={{ marginTop: 6 }}>描述</div>
                                                                        <div className="adui-form-control">
                                                                            <Input.TextArea placeholder="请输入描述" onChange={(e) => { setGlobalComponentItem('desc', e.target.value?.replace(/\r|\n/ig, "")) }} value={desc} showCount maxLength={14} autoSize />
                                                                        </div>
                                                                    </div>}
                                                                    <div className="adui-form-item" style={{ alignItems: 'center', marginBottom: 10 }}>
                                                                        <div className="adui-form-label" style={{ marginTop: 6 }}>标题字色</div>
                                                                        <div className="adui-form-control">
                                                                            <Space><ColorPicker onColor={(color: string) => { setGlobalComponentItem('titleColor', color) }} color={titleColor}></ColorPicker> <div className="colorShow">{titleColor}</div></Space>
                                                                        </div>
                                                                    </div>
                                                                    {(wxad_styleType === '1' || wxad_styleType === '2') && <div className="adui-form-item" style={{ alignItems: 'center', marginBottom: 10 }}>
                                                                        <div className="adui-form-label" style={{ marginTop: 6 }}>描述字色</div>
                                                                        <div className="adui-form-control">
                                                                            <Space><ColorPicker onColor={(color: string) => { setGlobalComponentItem('descColor', color) }} color={descColor}></ColorPicker> <div className="colorShow">{descColor}</div></Space>
                                                                        </div>
                                                                    </div>}
                                                                </div>
                                                                <div className="form section">
                                                                    <div className="form-caption">更多设置</div>
                                                                    <div className='adui-form-tip adui-form-tip_normal'>如果落地页只有一页，悬浮组件的更多设置必须为“进入页面时出现”、且“不消失”</div>
                                                                    <div className="adui-form-item">
                                                                        <div className="adui-form-label">出现方式</div>
                                                                        <div className="adui-form-control">
                                                                            <Radio.Group onChange={(e) => { setGlobalComponentItem('appearPaddingTop', e.target.value) }} value={Number(appearPaddingTop)}>
                                                                                <Radio value={0}>进入页面时出现</Radio>
                                                                                <Radio value={100}>滑动页面时出现</Radio>
                                                                            </Radio.Group>
                                                                        </div>
                                                                    </div>
                                                                    <div className="adui-form-item">
                                                                        <div className="adui-form-label">消失方式</div>
                                                                        <div className="adui-form-control">
                                                                            <Radio.Group onChange={(e) => { setGlobalComponentItem('appearPaddingBottom', e.target.value) }}value={Number(appearPaddingBottom)}>
                                                                                <Radio value={0}>不消失</Radio>
                                                                                <Radio value={80}>滑至页面底部时消失</Radio>
                                                                            </Radio.Group>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {/* 设置转化按钮 imgTextButtonShow */}
                                                            <div className='aside' style={{ transform: imgTextButtonShow ? 'translate3d(0px, 0px, 0px)' : 'translate3d(100%, 0px, 0px)', transition: 'all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s' }}>
                                                                <div className='aside-nav'>
                                                                    <Button type='link' icon={<SwapLeftOutlined />} onClick={() => { setImgTextButtonShow(false) }}>返回</Button>
                                                                </div>
                                                                <div className="form section">
                                                                    <div className="form-caption">按钮类型</div>
                                                                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                                                                        <Select style={{ width: 180 }} className="aside-select" dropdownClassName="aside-select" onChange={(e) => { setGlobalComponentItem('componentItem', e) }} value={componentItem?.widgetTypeV2} size="small">
                                                                            <Option value="gh"><FollowAcc />关注公众号</Option>
                                                                            <Option value="enterprise_wx_auto" disabled={!channelAccounts?.some((item: any) => (item?.MP?.length > 0 || item?.ADQ?.length > 0))}><WxAutoSvg />添加商家微信</Option>
                                                                        </Select>
                                                                    </div>
                                                                </div>
                                                                {componentItem?.widgetTypeV2 === 'gh' ? <>
                                                                    <div className="form section">
                                                                        <Space>
                                                                            <Switch size="small" checked={componentItem?.subType === '17' ? true : false} onChange={(e) => { setGlobalComponentItem('componentItem', { ...componentItem, subType: e ? '17' : '1' }) }} />
                                                                            一键关注
                                                                            <Tooltip placement="top" title={'唤起公众号简介的半屏面板，点击其中按钮直接关注公众号'}>
                                                                                <QuestionCircleOutlined />
                                                                            </Tooltip>
                                                                        </Space>
                                                                    </div>
                                                                </> : componentItem?.widgetTypeV2 === 'enterprise_wx_auto' ? <>
                                                                    <div className="form section">
                                                                        <div className="form-caption">客服设置</div>
                                                                        <div className="adui-form-item">
                                                                            <div className="adui-form-label">客服分配</div>
                                                                            <div className="adui-form-control">
                                                                                <div className="fl-sb">
                                                                                    <Button size="small" onClick={clickCustorGroup}>{componentItem?.custorData?.length > 0 ? '修改客服组' : '选择客服组'}</Button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        {componentItem?.custorData?.length > 0 && <div className='adui-form-item custorGroup'>
                                                                            {componentItem?.custorData?.map((item: { label: string, custorData: any[], id: number }) => <div key={item.id}>
                                                                                <strong>{item.label}：</strong><span>{item.custorData[0]?.name}</span>
                                                                            </div>)}
                                                                        </div>}
                                                                    </div>
                                                                </> : null}
                                                                <div className="form section">
                                                                    <div className="form-caption">按钮外观</div>
                                                                    <div className="adui-form-item" style={{ marginBottom: 10 }}>
                                                                        <div className="adui-form-label">按钮文案</div>
                                                                        <div className="adui-form-control">
                                                                            <div className="fl-sb">
                                                                                <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                                                                                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', border: '1px solid #d9d9d9', borderRadius: 2, paddingRight: 8 }}>
                                                                                        <Input maxLength={5} style={{ width: 90 }} bordered={false} value={componentItem?.btnTitle} onChange={(e) => { setGlobalComponentItem('componentItem', { ...componentItem, btnTitle: e.target.value }) }} /> <span>{componentItem?.btnTitle?.length}/5</span>
                                                                                    </div>
                                                                                </div>
                                                                                <Radio.Group onChange={(e) => { setGlobalComponentItem('componentItem', { ...componentItem, btnFontType: e.target.value }) }} value={componentItem?.btnFontType}>
                                                                                    <Radio.Button value="0">常规</Radio.Button>
                                                                                    <Radio.Button value="1">加粗</Radio.Button>
                                                                                </Radio.Group>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div className="adui-form-item" style={{ alignItems: 'center', marginBottom: 10 }}>
                                                                        <div className="adui-form-label">字体色</div>
                                                                        <div className="adui-form-control">
                                                                            <Space><ColorPicker onColor={(color: string) => { setGlobalComponentItem('componentItem', { ...componentItem, fontColor: color }) }} color={componentItem?.fontColor}></ColorPicker><div className="colorShow">{componentItem?.fontColor}</div></Space>
                                                                        </div>
                                                                    </div>
                                                                    <div className="adui-form-item" style={{ alignItems: 'center', marginBottom: 10 }}>
                                                                        <div className="adui-form-label">填充色</div>
                                                                        <div className="adui-form-control">
                                                                            <Space><ColorPicker onColor={(color: string) => { setGlobalComponentItem('componentItem', { ...componentItem, btnBgColorTheme: color }) }} color={componentItem?.btnBgColorTheme}></ColorPicker><div className="colorShow">{componentItem?.btnBgColorTheme}</div></Space>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div> :
                                                            null
                }

            </>
        } else {
            return null
        }
    }
    /** 选择单张图片 */
    const clickUpdateImg = useCallback((num: number) => {
        setSliderImgContent([])
        setCcType(1)
        setSelectImgVisible(true)
        setNum(num)
    }, [imgSize, scType, content, sliderImgContent])

    /** 选择视频 */
    const clickUpdateVideo = useCallback(() => {
        setCcType(2)
        setSelectImgVisible(true)
        setNum(1)
    }, [imgSize, scType])

    /** 弹窗返回设置图片 */
    const setImg = useCallback((value: any[]) => {
        if (scType === 1) {  // 图片
            let newContent = JSON.parse(JSON.stringify(content))
            let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
            let oldContent = newContent
            if (selectIndex !== -1) {
                let selectCon = oldContent[selectIndex]
                selectCon['pureImageUrl'] = value[0]?.content
                selectCon['fileSize'] = Number(value[0]?.mediaSize)
                selectCon['initWidth'] = Number(value[0]?.width)
                selectCon['initHeight'] = Number(value[0]?.height)
                selectCon['img_type'] = value[0]?.mediaFormat
                selectCon['imageWidth'] = 750
                if (Number(value[0]?.width) === Number(value[0]?.height)) {
                    selectCon['imageHeight'] = 750
                } else {
                    selectCon['imageHeight'] = Number(value[0]?.height)
                }
                oldContent[selectIndex] = { ...selectCon }
                dispatch({ type: 'setCon', params: { content: [...oldContent] } })
            }
        } else if (scType === 2) { // 视频要判断是否是长视频 还是短视频
            let newContent = JSON.parse(JSON.stringify(content))
            let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
            let oldContent = newContent
            if (selectIndex !== -1) {
                let selectCon = oldContent[selectIndex]
                selectCon['fileSize'] = Number(value[0]?.mediaSize)

                selectCon['BitRate'] = value[0]?.videoBitRate || 0
                selectCon['videoDuration'] = value[0]?.videoLength || 0

                selectCon['displayWidth'] = Number(value[0]?.width)
                selectCon['displayHeight'] = Number(value[0]?.height)
                selectCon['videoUrl'] = value[0]?.downloadPath || value[0]?.content
                // 设置宽高
                if (selectCon?.adLocation === 'sns') { // 朋友圈信息流
                    if (selectCon?.viewType === '0') { // 常规广告
                        if (selectCon?.styleType === '0') { // 横板视频
                            let displayHeight = Math.floor(Number(value[0]?.height) / (Number(value[0]?.width) / 750))
                            selectCon['displayWidth'] = 750
                            selectCon['displayHeight'] = displayHeight
                            selectCon['initWidth'] = Number(value[0]?.width)
                            selectCon['initHeight'] = Number(value[0]?.height)
                            // if (displayHeight == 421) {
                            //     selectCon['initWidth'] = "640"
                            //     selectCon['initHeight'] = "360"
                            // } else {
                            //     selectCon['initWidth'] = "640"
                            //     selectCon['initHeight'] = "480"
                            // }
                        } else { // 竖版视频
                            if (selectCon?.initHeight === 1536) {
                                selectCon['initWidth'] = 750
                            } else if (selectCon?.initHeight === 1334) {
                                selectCon['initWidth'] = 750
                            } else {
                                selectCon['initWidth'] = 720
                            }
                            selectCon['displayWidth'] = selectCon?.initWidth
                            selectCon['displayHeight'] = selectCon?.initHeight
                        }
                    } else { // 卡片广告
                        if (selectCon?.outerUseTopMaterial === '0') { // 顶部素材不用于广告外层 不勾

                        } else if (selectCon?.outerUseTopMaterial === '1') { // 顶部素材不用于广告外层 勾选
                            if (selectCon?.type === '61') { // 短视频

                            } else if (selectCon?.type === '62') { // 长视频

                            }
                        }
                    }
                } else { // 公众号及其它
                    selectCon['initWidth'] = Number(value[0]?.width)
                    selectCon['initHeight'] = Number(value[0]?.height)
                }
                oldContent[selectIndex] = { ...selectCon }
                dispatch({ type: 'setCon', params: { content: [...oldContent] } })
            }
        } else if (scType === 3) { // 轮播
            let newContent = JSON.parse(JSON.stringify(content))
            let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
            let oldContent = newContent
            if (selectIndex !== -1) {
                let selectCon = oldContent[selectIndex]
                selectCon['componentCount'] = num.toString()
                let { componentGroupList } = selectCon
                let componentGroup = componentGroupList?.componentGroup
                componentGroup = componentGroup?.map((item: { componentItem: { pureImageUrl: string, fileSize: number } }, index: number) => {
                    return {
                        ...item,
                        componentItem: {
                            ...item.componentItem,
                            pureImageUrl: value[index] && JSON.stringify(value[index]) !== '{}' ? value[index].content : '',
                            fileSize: value[index] && JSON.stringify(value[index]) !== '{}' ? value[index].mediaSize : 0,
                            img_type: value[0]?.mediaFormat
                        }
                    }
                })
                selectCon['componentGroupList'] = {
                    componentGroup: [...componentGroup]
                }
                oldContent[selectIndex] = { ...selectCon }
                dispatch({ type: 'setCon', params: { content: [...oldContent] } })
            }
        } else if (scType === 4) { // 设置图文复合组件图片
            let newContent = JSON.parse(JSON.stringify(content))
            let selectIndex = newContent?.findIndex((item: Content) => item.comptActive)
            let oldContent = newContent
            if (selectIndex !== -1) {
                let selectCon = oldContent[selectIndex]
                if (selectCon?.type === '104') {
                    let componentItem = selectCon?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                    componentItem[0] = {
                        ...componentItem[0],
                        pureImageUrl: value[0]?.content
                    }
                    oldContent[selectIndex] = { ...selectCon }
                    dispatch({ type: 'setCon', params: { content: [...oldContent] } })
                } else if (selectCon?.type === '103') {
                    let componentItem = selectCon?.layoutItems.componentItem[goodsCount]
                    let shelfnewItem = componentItem?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                    shelfnewItem[0].pureImageUrl = value[0]?.content
                    oldContent[selectIndex] = { ...selectCon }
                    dispatch({ type: 'setCon', params: { content: [...oldContent] } })
                }
            }
        } else if (scType === 5) { // 设置悬浮组件 
            let newConItem = JSON.parse(JSON.stringify(componentItem))
            let selectIndex = newConItem?.findIndex((item: Content) => item.comptActive)
            let oldContent = newConItem
            if (selectIndex !== -1) {
                let selectCon = oldContent[selectIndex]
                selectCon['iconUrl'] = value[0]?.content
                dispatchGlobal({ type: 'setConItem', params: { componentItem: JSON.parse(JSON.stringify(oldContent)) } })
            }
        }
    }, [content, scType, goodsCount])
    /** 回填数据 */
    const editSelectImg = useCallback((url: any[]) => {
        setSelectImgVisible(true)
    }, [selectImgVisible])

    /** 下一步 */
    const nextHandle = useCallback(() => {
        if (content.length === 1) {
            message.error('请完善内容')
            return
        }
        if (((content[0]?.widgetTypeV2 === "topimg") && !content[0].pureImageUrl) || content[0]?.widgetTypeV2 === "empty") {
            message.error('请完善顶部组件内容')
            return
        }
        if (content[0]?.widgetTypeV2 === "topslider" && !content[0].componentGroupList?.componentGroup?.every((item: { componentItem: { pureImageUrl: string } }) => item?.componentItem?.pureImageUrl)) {
            message.error('请完善轮播图组件内容~~')
            return
        }
        if (content[0]?.widgetTypeV2 === "topvideo_new" && !content[0].videoUrl) {
            message.error('请完善顶部视频组件内容~~')
            return
        }
        let reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/;
        let a = content?.every((item: any) => {
            if (item?.widgetTypeV2 === "gh") {
                if (item?.btnTitle) {
                    return true
                } else {
                    message.error('关注公众号按钮按钮文案未填写')
                    return false
                }
            } else if (item?.widgetTypeV2 === "link") {
                if (!reg.test(item?.origBtnJumpUrl)) {
                    message.error('跳转链接按钮请输入正确链接')
                    return false
                }
                if (item?.btnTitle) {
                    return true
                } else {
                    message.error('关注公众号按钮按钮文案未填写')
                    return false
                }
            } else if (item?.widgetTypeV2 === "img") {
                if (item.pureImageUrl) {
                    return true
                } else {
                    message.error('请选择图片')
                    return false
                }
            } else if (item?.widgetTypeV2 === "text") {
                if (item.content) {
                    return true
                } else {
                    message.error('请完善文本内容')
                    return false
                }
            } else if (item?.widgetTypeV2 === "enterprise_wx_auto") {
                if (item?.custorData && item?.custorData?.length > 0) {
                    return true
                } else {
                    message.error('请完善客服组内容')
                    return false
                }
            } else if (item?.widgetTypeV2 === "shelfnew") {
                if (item?.type === '103') {
                    let b = item?.layoutItems?.componentItem?.every((shelfnewItem: any, index: number) => {
                        let componentItem = shelfnewItem?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                        if (!componentItem[0]?.pureImageUrl) {
                            message.error(`图文复合组件商品${index + 1}请上传图片`)
                            return false
                        }
                        if (!componentItem[1]?.content) {
                            message.error(`图文复合组件商品${index + 1}请输入标题`)
                            return false
                        }
                        if (!componentItem[2]?.content) {
                            message.error(`图文复合组件商品${index + 1}请输入描述`)
                            return false
                        }
                        if (componentItem[3]?.widgetTypeV2 === 'link') {
                            if (!componentItem[3]?.origBtnJumpUrl) {
                                message.error(`图文复合组件商品${index + 1}跳转链接请配置链接`)
                                return false
                            } else {
                                if (!reg.test(componentItem[3]?.origBtnJumpUrl)) {
                                    message.error(`图文复合组件商品${index + 1}跳转链接请配置正确链接`)
                                    return false
                                }
                            }
                        }
                        if (componentItem[3]?.widgetTypeV2 === 'link' && !componentItem[3]?.btnTitle) {
                            message.error(`图文复合组件商品${index + 1}跳转链接请配置按钮文案`)
                            return false
                        }
                        if (componentItem[3]?.widgetTypeV2 === 'gh' && !componentItem[3]?.btnTitle) {
                            message.error(`图文复合组件商品${index + 1}跳转链接请配置按钮文案`)
                            return false
                        }
                        if (componentItem[3]?.widgetTypeV2 === 'enterprise_wx_auto') {
                            if (!componentItem[3]?.custorData) {
                                message.error(`图文复合组件添加商家微信${index + 1}未设置客服组`)
                                return false
                            }
                        }
                        return true
                    })
                    if (b) {
                        return true
                    } else {
                        return false
                    }
                } else if (item?.type === '104') {
                    let componentItem103 = item?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                    if (!componentItem103[0]?.pureImageUrl) {
                        message.error('图文复合组件请上传图片')
                        return false
                    }
                    let componentItem = componentItem103[1]?.layoutItems?.componentItem
                    if (!componentItem[0]?.content) {
                        message.error('图文复合组件请输入标题')
                        return false
                    }
                    if (!componentItem[1]?.content) {
                        message.error('图文复合组件请输入描述')
                        return false
                    }
                    if (componentItem[2]?.widgetTypeV2 === 'link') {
                        if (!componentItem[2]?.origBtnJumpUrl) {
                            message.error('图文复合组件跳转链接请配置链接')
                            return false
                        } else {
                            if (!reg.test(componentItem[2]?.origBtnJumpUrl)) {
                                message.error('图文复合组件跳转链接请配置正确链接')
                                return false
                            }
                        }
                    } else if (componentItem[2]?.widgetTypeV2 === 'enterprise_wx_auto') {
                        if (!componentItem[2]?.custorData) {
                            message.error('图文复合组件添加商家微信未设置客服组')
                            return false
                        }
                    }
                    if (componentItem[2]?.widgetTypeV2 === 'link' && !componentItem[2]?.btnTitle) {
                        message.error('图文复合组件跳转链接请配置按钮文案')
                        return false
                    }
                    if (componentItem[2]?.widgetTypeV2 === 'gh' && !componentItem[2]?.btnTitle) {
                        message.error('图文复合组件跳转链接请配置按钮文案')
                        return false
                    }
                }
                return true
            } else {
                return true
            }
        })
        if (componentItem?.length > 0) {
            let b = componentItem?.every((item: any) => {
                if (item?.widgetTypeV2 === "floatbutton") {
                    if (item?.wxad_styleType === '1') {
                        if (!item?.iconUrl) {
                            message.error('悬浮组件请上传图片')
                            return false
                        }
                        if (!item?.title) {
                            message.error('悬浮组件请输入标题')
                            return false
                        }
                        if (!item?.desc) {
                            message.error('悬浮组件请输入描述')
                            return false
                        }
                    } else if (item?.wxad_styleType === '2') {
                        if (!item?.title) {
                            message.error('悬浮组件请输入标题')
                            return false
                        }
                        if (!item?.desc) {
                            message.error('悬浮组件请输入描述')
                            return false
                        }
                    } else if (item?.wxad_styleType === '3') {
                        if (!item?.title) {
                            message.error('悬浮组件请输入标题')
                            return false
                        }
                    }
                    if (item?.componentItem?.widgetTypeV2 === 'enterprise_wx_auto') {
                        if (item?.componentItem?.custorData && item?.componentItem?.custorData?.length > 0) {
                            return true
                        } else {
                            message.error('请完善悬浮组件客服组内容')
                            return false
                        }
                    }
                }
                return true
            })
            if (b) {
                componentItem.forEach((item: any) => {
                    if (item?.widgetTypeV2 === "floatbutton" && item?.componentItem?.widgetTypeV2 === 'enterprise_wx_auto') {
                        setIsEWxAuto(true)
                    }
                });
            } else {
                return
            }
        }
        if (a) {
            content?.forEach((item: any) => {
                if (item?.widgetTypeV2 === "enterprise_wx_auto") {
                    setIsEWxAuto(true)
                } else if (item?.widgetTypeV2 === "shelfnew") {
                    if (item?.type === '103') {
                        item?.layoutItems?.componentItem?.every((shelfnewItem: any) => {
                            let componentItem = shelfnewItem?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                            if (componentItem[3]?.widgetTypeV2 === 'enterprise_wx_auto') {
                                setIsEWxAuto(true)
                            }
                        })
                    } else if (item?.type === '104') {
                        let componentItem103 = item?.layoutItems?.componentItem[0]?.layoutItems?.componentItem
                        let componentItem = componentItem103[1]?.layoutItems?.componentItem
                        if (componentItem[2]?.widgetTypeV2 === 'enterprise_wx_auto') {
                            setIsEWxAuto(true)
                        }
                    }
                }
            })
            setLastVisible(true)
        }

    }, [lastVisible, state, isEWxAuto, componentItem])

    /** 保存 */
    const saveHandle = useCallback(() => {
        let { content, pageBackColor } = state
        let queryData: any = {}
        if (!shareTittle || !shareDesc) {
            message.error('请填写分享标题或者描述')
            return
        }
        if (!novel) {
            message.error('请填写小说')
            return
        }
        let layoutName: string = novel + "_" + currentUser?.userId + "_" + moment().format("YYYYMMDDHHmmss")
        queryData['title'] = shareTittle // title 标题
        queryData['descContext'] = shareDesc  // desc 描述
        queryData['name'] = layoutName   // 推广页名称
        queryData['novelName'] = novel   // 小说

        if (content[0]?.widgetTypeV2 === 'topslider') { // 轮播图
            queryData['thumbUrl'] = content[0]?.componentGroupList?.componentGroup[0]?.componentItem?.pureImageUrl  // 封面缩略图
            queryData['topCanvasType'] = 101  // 顶部组件类型
        } else if (content[0]?.widgetTypeV2 === 'topimg') {
            queryData['thumbUrl'] = content[0]?.pureImageUrl  // 封面缩略图
            queryData['topCanvasType'] = 41  // 顶部组件类型
        } else if (content[0]?.widgetTypeV2 === 'topvideo_new') {
            queryData['topCanvasType'] = 142  // 顶部组件类型
            queryData['videoFileSize'] = content[0]?.fileSize  // 视频文件大小
            queryData['thumbUrl'] = ''  // 封面缩略图
        } else {
            queryData['thumbUrl'] = ""  // 封面缩略图
        }
        // 查找看看是否有按钮  最后插入按钮的编号
        queryData['lastCanvasType'] = 0
        let wxType = 0, linkType = 0, gh1 = 0, gh17 = 0
        content?.forEach((item: any) => {
            if (item?.widgetType === 'button') { // 131072 关注按钮 131073 链接按钮 0 没有
                if (item.widgetTypeV2 === 'gh') {
                    if (item?.subType === '1') {
                        gh1 = 8
                    } else {
                        gh17 = 131072
                    }
                } else if (item.widgetTypeV2 === 'link') {
                    linkType = 1
                } else if (item.widgetTypeV2 === 'enterprise_wx_auto') {
                    wxType = 4096
                }
            }
            if (item?.widgetType === 'shelfnew') {
                if (item.type === '103') {
                    for (const shelfItem of item?.layoutItems?.componentItem) {
                        let componentItem = shelfItem?.layoutItems?.componentItem[0]?.layoutItems?.componentItem[3]
                        if (componentItem.widgetTypeV2 === 'link') {
                            linkType = 1
                        } else if (componentItem.widgetTypeV2 === 'gh') {
                            if (componentItem?.subType === '1') {
                                gh1 = 8
                            } else {
                                gh17 = 131072
                            }
                        } else if (componentItem.widgetTypeV2 === 'enterprise_wx_auto') {
                            wxType = 4096
                        }
                    }
                } else if (item.type === '104') {
                    let componentItem = item?.layoutItems?.componentItem[0]?.layoutItems?.componentItem[1]?.layoutItems?.componentItem[2]
                    if (componentItem.widgetTypeV2 === 'link') {
                        linkType = 1
                    } else if (componentItem.widgetTypeV2 === 'gh') {
                        if (componentItem?.subType === '1') {
                            gh1 = 8
                        } else {
                            gh17 = 131072
                        }
                    } else if (componentItem.widgetTypeV2 === 'enterprise_wx_auto') {
                        wxType = 4096
                    }
                }
            }
        })

        // 查找按钮个数
        let supportInfoType: string[] = []
        componentItem?.forEach((item: any) => {
            if (item?.widgetTypeV2 === 'floatbutton') {
                supportInfoType.push(item?.componentItem?.subType)
                if (item?.componentItem?.widgetTypeV2 === 'gh') {
                    if (item?.componentItem?.subType === '1') {
                        gh1 = 8
                    } else {
                        gh17 = 131072
                    }
                } else if (item?.componentItem?.widgetTypeV2 === 'enterprise_wx_auto') {
                    wxType = 4096
                }
            }
        })
        queryData['lastCanvasType'] = wxType + linkType + gh1 + gh17
        
        content?.forEach((item: any) => {
            if (item?.widgetType === 'button' && (item?.widgetTypeV2 === 'gh' || item?.widgetTypeV2 === 'link' || item?.widgetTypeV2 === 'enterprise_wx_auto')) {
                supportInfoType.push(item?.subType)
            }
            if (item?.widgetTypeV2 === 'shelfnew') {
                if (item?.type === '103') {
                    item?.layoutItems?.componentItem?.forEach((shelfnewItem: any) => {
                        supportInfoType.push(shelfnewItem?.layoutItems?.componentItem[0]?.layoutItems?.componentItem[3]?.subType)
                    });
                } else if (item?.type === '104') {
                    supportInfoType.push(item?.layoutItems?.componentItem[0]?.layoutItems?.componentItem[1]?.layoutItems?.componentItem[2]?.subType)
                }
            }
        })
        queryData['supportInfoType'] = Array.from(new Set(supportInfoType))

        // sumFileSize
        queryData['sumFileSize'] = content?.reduce((prev: number, cur: any) => {
            if (cur?.widgetTypeV2 === 'topimg' || cur?.widgetTypeV2 === 'topvideo' || cur?.widgetTypeV2 === 'img') {
                return prev + cur?.fileSize
            } else if (cur?.widgetTypeV2 === 'topslider') {
                let sliderSize = cur?.componentGroupList?.componentGroup?.reduce((prev1: number, cur1: any) => {
                    return prev1 + cur1?.fileSize
                }, 0)
                return prev + sliderSize
            } else {
                return prev
            }

        }, 0)

        let pageComponents: { backgroundCover: string, backgroundColor: string, pageContextList: string }[] = [{ backgroundCover: '', backgroundColor: '', pageContextList: '' }]

        let page: {//页面数据列表
            backgroundCover: string,//背景封面空
            backgroundColor: string,//背景颜色
            pageContextList: string,
            globalComponentList: string
        } = {
            backgroundCover: "",
            backgroundColor: pageBackColor,
            pageContextList: '',
            globalComponentList: ''
        }
        let pageContextList: Array<ImgProps | TopImg | Video | TopVideo | TopSlider | Text | GhButton> = content?.map((item: { id: string, widgetTypeV2: string, componentGroupList: ComponentGroupList, comptActive: boolean, fontSize: string | number }, index: number) => {
            let hm = moment().format("x")
            if (item?.widgetTypeV2 === "topslider") {
                let componentGroupList = item?.componentGroupList
                let componentGroup = componentGroupList?.componentGroup?.map((lis: any, index: number) => {
                    return { ...lis, id: `slider_${hm}_${index + 1}` }
                })
                componentGroupList.componentGroup = componentGroup
                item = { ...item, componentGroupList }
            }
            if (item?.widgetTypeV2 === "text") {
                item = { ...item, fontSize: JSON.stringify((item?.fontSize as number) * 2) }
            }

            let { comptActive, ...newItem } = item
            return { ...newItem, id: `widget_${hm}_${index + 1}` }
        })

        // 公众号选择相关
        let channelMpAccounts: number[] = []
        let channelAdqAccounts: number[] = []
        channelAccounts?.forEach((item: { id: number, MP?: any[], ADQ?: any[] }) => {
            let { MP, ADQ } = item
            if (MP && MP?.length > 0 || ADQ && ADQ?.length > 0) {
                let mpIds = MP?.map((m: any) => {
                    return m?.id
                })
                let adqIds = ADQ?.map((a: any) => {
                    return a?.id
                })
                if (mpIds && mpIds?.length > 0) {
                    channelMpAccounts = [...channelMpAccounts, ...mpIds]
                }
                if (adqIds && adqIds?.length > 0) {
                    channelAdqAccounts = [...channelAdqAccounts, ...adqIds]
                }
            }
        })
        let oldPageContextList = JSON.parse(JSON.stringify(pageContextList))
        let wechatInfo: any[] = []
        let newPageContextList = oldPageContextList?.map((item: { widgetTypeV2: string, custorData?: any[], type: string, layoutItems?: any }) => {
            if (item.widgetTypeV2 === 'enterprise_wx_auto') {
                let { custorData, ...data } = item
                wechatInfo.push({ type: item.type, data: custorData })
                return item
            } else if (item.widgetTypeV2 === 'shelfnew') {
                if (item.type === '104' && item.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2]?.widgetTypeV2 === 'enterprise_wx_auto') { // 单个
                    wechatInfo.push({ type: item.type, data: item.layoutItems.componentItem[0].layoutItems.componentItem[1].layoutItems.componentItem[2]?.custorData })
                } else if (item.type === '103') {
                    let data103 = ["", ""]
                    if (item.layoutItems.componentItem[0].layoutItems.componentItem[0].layoutItems.componentItem[3]?.widgetTypeV2 === 'enterprise_wx_auto') {
                        data103[0] = item.layoutItems.componentItem[0].layoutItems.componentItem[0].layoutItems.componentItem[3]?.custorData
                    }
                    if (item.layoutItems.componentItem[1].layoutItems.componentItem[0].layoutItems.componentItem[3]?.widgetTypeV2 === 'enterprise_wx_auto') {
                        data103[1] = item.layoutItems.componentItem[1].layoutItems.componentItem[0].layoutItems.componentItem[3]?.custorData
                    }
                    if (data103.length > 0) {
                        wechatInfo.push({ type: item.type, data: data103 })
                    }
                }
            }
            return item
        })
        let globalComponentList = componentItem?.map((item: { widgetTypeV2: string, type: string, comptActive: boolean, componentItem: { widgetTypeV2: string, custorData?: any[] }}) => {
            if (item?.widgetTypeV2 === 'floatbutton' && item?.componentItem?.widgetTypeV2 === 'enterprise_wx_auto') {
                let { custorData } = item?.componentItem
                wechatInfo.push({ type: item.type, data: custorData })
            }
            let { comptActive, ...data } = item
            return data
        });
        let channelMpWechatInfoList: any[] = []
        if (wechatInfo.length > 0) {
            channelMpWechatInfoList = channelMpAccounts.map((item: number) => {
                return {
                    id: item,
                    wechatInfo: JSON.stringify(wechatInfo.map((item1: any) => {
                        if (item1.type === "21" || item1.type === '104' || item1.type === '134') {
                            let info = item1.data.find((it: { id: number }) => it.id === item)
                            let custorData = info.custorData[0]
                            return {
                                type: item1.type,
                                btnData: {
                                    corpid: custorData?.corpid,
                                    groupid: custorData?.groupId,
                                    h5_config_id: custorData?.h5ConfigId,
                                    wxapp_config_id: custorData?.wxappConfigId,
                                    qrUrl: custorData?.autoQrCode,
                                    chatGroupName: custorData?.name,
                                }
                            }
                        } else if (item1.type === "103") {
                            return {
                                type: item1.type,
                                btnData: item1?.data?.map((item2: any) => {
                                    if (!item2) {
                                        return item2
                                    } else {
                                        let info = item2.find((it: { id: number }) => it.id === item)
                                        let custorData = info.custorData[0]
                                        return {
                                            corpid: custorData?.corpid,
                                            groupid: custorData?.groupId,
                                            h5_config_id: custorData?.h5ConfigId,
                                            wxapp_config_id: custorData?.wxappConfigId,
                                            qrUrl: custorData?.autoQrCode,
                                            chatGroupName: custorData?.name,
                                        }
                                    }
                                })
                            }
                        }
                        return {
                            type: item1.type,
                            btnData: []
                        }
                    }))
                }
            })
        }
        page = { ...page, pageContextList: JSON.stringify(newPageContextList), globalComponentList: JSON.stringify(globalComponentList) }
        pageComponents = [{ ...page }]
        queryData['pageContextList'] = pageComponents
        if (typesetting && JSON.stringify(typesetting) !== '{}') {
            if (typesetting?.type === 'edit') {
                adsSharePageEdit.run({ ...queryData, pageId: typesetting?.id }).then((res: any) => {
                    if (res?.code === 200) {
                        hideModal()
                        ajax?.refresh()
                        message.success('修改成功')
                    }
                })
                return
            }
        }
        if (channelMpAccounts?.length > 0 || channelAdqAccounts?.length > 0) { // 上传
            addAndCreate.run({ pageDto: queryData, channelMpAccounts, channelAdqAccounts, channelMpWechatInfoList }).then((res: any) => {
                if (res?.code === 200) {
                    hideModal()
                    ajax?.refresh()
                    message.success('新增成功')
                } else if (res?.code === 1003 && res?.data?.base64) {
                    setAuthData(res?.data)
                }
            })
        } else { // 不上传
            adsSharePage.run(queryData).then(res => {
                if (res?.code === 200) {
                    hideModal()
                    ajax?.refresh()
                    message.success('新增成功')
                }
            })
        }
    }, [state, shareTittle, shareDesc, currentUser, ajax, novel, channelAccounts, authData, typesetting, componentItem])

    /** 选择公众号 */
    const selectAccount = useCallback(() => {
        setIsUpload(false)
        setSelectAccShow(true)
    }, [isUpload, selectAccShow])
    // 清除
    useEffect(() => {
        if (isUpload) {
            setChannelAccounts(() => [])
        }
    }, [isUpload])

    return <Drawer
        title={
            <div className={style.drawerTitle}>
                <div>
                    <Space>
                        <span>{typesetting?.type === 'edit' ? '修改' : typesetting?.type === 'copy' ? '复制' : '创建'}推广页</span>
                        <InputAcc value={channelAccounts} onChange={inputAccHandle} />
                    </Space>
                </div>
                <Button type='primary' size='small' className={style.next} onClick={() => { nextHandle() }}>下一步 <SwapRightOutlined /></Button>
            </div>
        }
        placement="right"
        onClose={() => {
            modal.confirm(config);
        }}
        visible={visible}
        width='90%'
        className={`addDraw ${style.drawer}`}
    >
        {/* 选择客服组 */}
        {custorShow && <SelectCustors visible={custorShow} launchAcc={custorData} hideModel={() => { setCustorShow(false) }} callback={(e) => { setCustorDataHandle(e) }} />}
        {selectImgVisible && <SelectImg visible={selectImgVisible} hideModel={() => { setSelectImgVisible(false) }} num={num} onChange={setImg} listParams={imgSize} sliderImgContent={sliderImgContent} imgType={imgType} isFootlock={isFootlock}></SelectImg>}
        {selectAccShow && <SelectAccount show={selectAccShow} onClose={() => { setSelectAccShow(false) }} onChange={(e: any) => { setChannelAccounts(e); setSelectAccShow(false) }} channelAccounts={channelAccounts} />}
        {/* 授权登录 */}
        <AdLogin value={authData} onChange={() => { message.success('请点击按钮再次提交'); setAuthData({ code: "", base64: "" }) }} onClose={() => { setAuthData({ code: "", base64: "" }) }} />
        <Modal
            title={<>
                <div style={{ marginBottom: 2, color: '#1f1f1f' }}>分享设置</div>
                <div style={{ color: '#a3a3a3', fontSize: 12 }}>设置推广页的分享样式</div>
            </>}
            visible={lastVisible}
            confirmLoading={addAndCreate?.loading || adsSharePage?.loading}
            onOk={saveHandle}
            onCancel={() => { setLastVisible(false); setIsEWxAuto(false) }}
        >
            <Form labelCol={{ span: 4 }}>
                <Form.Item
                    label="落地页名称"
                >
                    小说+创建者ID+创建时间
                </Form.Item>
                <Form.Item
                    label="分享标题"
                >
                    <Space><Input placeholder='建议与详情页面主题相符' value={shareTittle} onChange={(e) => { setShareTittle(e.target.value) }} style={{ width: 300 }} /> <span>{shareTittle.length}/14</span></Space>
                </Form.Item>
                <Form.Item
                    label="分享描述"
                >
                    <Space><Input placeholder='对标题的简要解读' style={{ width: 300 }} value={shareDesc} onChange={(e) => { setShareDesc(e.target.value) }} /> <span>{shareDesc.length}/20</span></Space>
                </Form.Item>
                <Form.Item
                    label="小说"
                >
                    <Space><Input placeholder='请填写小说' maxLength={10} style={{ width: 300 }} value={novel} onChange={(e) => { setNovel(e.target.value) }} /> <span>{novel.length}/10</span></Space>
                </Form.Item>
                {
                    typesetting?.type === 'edit' ? null : !isEWxAuto ? <Form.Item
                        label="上传公众号"
                    >
                        <Space>
                            <Button type='link' onClick={() => { selectAccount() }}>{channelAccounts?.some((item: any) => (item?.MP?.length > 0 || item?.ADQ?.length > 0)) ? '修改' : '选择'}上传的公众号</Button>
                            <Radio onChange={() => { setIsUpload(true) }} checked={isUpload}>暂时不上传</Radio>
                        </Space>
                    </Form.Item> : null
                }

                {
                    channelAccounts?.some((item: any) => (item?.MP?.length > 0 || item?.ADQ?.length > 0)) && <Form.Item
                        label="已选公众号"
                    >
                        <div className={style.selectChannels}>
                            {channelAccounts?.map((item: { id: number, accountName: string, MP?: any[], ADQ?: any[] }) => {
                                if ((item?.MP && item?.MP?.length > 0) || (item?.ADQ && item?.ADQ?.length > 0)) {
                                    return <div className={style.selectChannel} key={item?.id}>
                                        {item?.MP && item?.MP?.length > 0 && <div>
                                            <h3>{item?.accountName + '-MP'}</h3>
                                            {item?.MP?.map((mp: { id: number, uname: string }) => <p key={mp?.id}>{mp?.uname}</p>)}
                                        </div>}
                                        {item?.ADQ && item?.ADQ?.length > 0 && <div key={item?.id}>
                                            <h3>{item?.accountName + '-ADQ'}</h3>
                                            {item?.ADQ?.map((adq: { id: number, uname: string, uid: number }) => <p>{adq?.uname}-{adq?.uid}</p>)}
                                        </div>}
                                    </div>
                                } else {
                                    return null
                                }
                            })}
                        </div>
                    </Form.Item>
                }

            </Form>
        </Modal>
        <div className={style.boxCont}>
            <Row className={style.row}>
                <Col flex="320px" className={style.right}>
                    <div className={style.title}>顶部组件</div>
                    <div className={style.assembly}>
                        {
                            content[0].type === undefined ? <>
                                <div {...getDragProps(`topImg`)}> <Topimg /> <span>图片</span> </div>
                                <div {...getDragProps(`topSlider`)}> <Topslider /> <span>轮播图</span> </div>
                                <div {...getDragProps(`topVideo`)}> <Topvideo /> <span>视频</span></div>
                            </>
                                :
                                <>
                                    <div className={style.disabled}> <Topimg /> <span>图片</span> </div>
                                    <div className={style.disabled}> <Topslider /> <span>轮播图</span> </div>
                                    <div className={style.disabled}> <Topvideo /> <span>视频</span></div>
                                </>
                        }
                    </div>

                    <div className={style.title}>基础组件</div>
                    <div className={style.assembly}>
                        <div {...getDragPropsCon(`img`)}> <Img /> <span className="my">图片</span> </div>
                        <div {...getDragPropsCon(`txt`)}> <MyText /> <span>文字</span> </div>
                    </div>
                    <div className={style.title}>转化按钮</div>
                    <div className={style.assembly}>
                        <div {...getDragPropsCon(`followAcc`)}> <FollowAcc /> <span className="my">关注公众号</span> </div>
                        <div {...getDragPropsCon(`JumpLink`)}> <JumpLink /> <span className="my">跳转链接</span> </div>
                        {channelAccounts?.some((item: any) => (item?.MP?.length > 0 || item?.ADQ?.length > 0)) ?
                            <div {...getDragPropsCon(`enterprise_wx_auto`)}> <WxAutoSvg /> <span className="my">添加商家微信</span> </div> :
                            <Tooltip placement="right" title="请先选择公众号">
                                <div className={style.disabled}> <WxAutoSvg /> <span className="my">添加商家微信</span> </div>
                            </Tooltip>
                        }
                    </div>
                    <div className={style.title}>营销组件</div>
                    <div className={style.assembly}>
                        <div {...getDragPropsCon(`shelfnew`)}> <ImgText /> <span className="my">图文复合组件</span> </div>
                        {componentItem?.some((item: { widgetTypeV2: string }) => item.widgetTypeV2 === 'floatbutton') ?
                            <div className={style.disabled}> <FloatbuttonSvg /> <span>悬浮组件</span></div> : <div {...getDragPropsCon(`floatbutton`)}> <FloatbuttonSvg /> <span className="my">悬浮组件</span> </div>
                        }
                    </div>
                </Col>
                <Col flex="auto" className={style.center} onClick={installActiveNull}>
                    <div className={style.page} style={{ backgroundColor: pageBackColor || '#FFFFFF' }}>
                        {/* 头部 */}
                        <div>{topCon}</div>
                        {/* 内容*/}
                        <div className={`comptPlaceholder lastChild`} id="comptCon">
                            {comptCon()}
                            {/* <div className={`comptCon ${isHoveringCon && 'hovering'} ${draggingCon && 'draggingCon'}`} {...dropConProps}>{(isHoveringCon || draggingCon) && '请拖至此处'}</div> */}
                        </div>
                        <div className={style.sidebar}>
                            <div>
                                <ColorPicker onColor={(color: string) => { dispatch({ type: 'setPageBackColor', params: { pageBackColor: color } }) }} color={pageBackColor}></ColorPicker>
                                <div style={{ marginTop: 4 }}>背景</div>
                            </div>
                        </div>
                    </div>
                </Col>
                <Col flex="380px" className={style.left}>{rightCon()}</Col>
            </Row>
        </div>
    </Drawer>
}
export default React.memo(AddLandingPage)