qc-EnterpriseWeChat-Pro/src/pages/weComTask/page/miniProgramPages/centerTop.tsx

import React, { useContext } from "react"
import { DispatchMiniPageCreate } from "./drawerMini";
import { useDrop } from "ahooks";
import './global.less'
import { topImageContent, topShortVideoContent, topVideoContent } from "./const";
import { DeleteOutlined } from '@ant-design/icons';
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import { ReactComponent as TopNullBack } from '../../../../public/svg/topNullBack.svg'
import { ReactComponent as TopImgSvg } from '../../../../public/svg/topimg.svg'
import { ReactComponent as EditSvg } from '../../../../public/svg/edit.svg'
import { ReactComponent as TopVideoSvg } from '../../../../public/svg/topvideo.svg'
import VideoNews from "../../components/newsModal/videoNews";
import { Button } from "antd";
import UploadLoad from "../../components/materialMould/uploadLoad";

const CenterTop: React.FC = () => {

    /**************************************/
    const { dragging, pageSpecs, setDragging, setPageSpecs, installActive, setTopUrl, setTopShortVideoUrl } = useContext(DispatchMiniPageCreate)!;
    const { pageElementsSpecList, globalElementsSpecList, pageType } = pageSpecs
    const topSpec = pageElementsSpecList?.[0]
    /**************************************/

    // 头部内容拖到接收区
    const [dropProps] = useDrop({
        onDom: (key: string) => { // 头部
            const newPageElementsSpecList = pageElementsSpecList?.map(item => ({ ...item, comptActive: false }))
            const newGlobalElementsSpecList = globalElementsSpecList?.map(item => ({ ...item, comptActive: false }))
            if (key === 'TOP_IMAGE') {
                newPageElementsSpecList[0] = { ...topImageContent, comptActive: true }
            } else if (key === 'TOP_VIDEO') {
                newPageElementsSpecList[0] = { ...topVideoContent, comptActive: true }
            } else if (key === 'TOP_SHORT_VIDEO') {
                newPageElementsSpecList[0] = { ...topShortVideoContent, comptActive: true }
            } else {
                return
            }
            setPageSpecs({ ...pageSpecs, pageElementsSpecList: newPageElementsSpecList, globalElementsSpecList: newGlobalElementsSpecList })
        }
    });

    const delTopSpec = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        e.stopPropagation();
        setDragging(null);
        const newPageSpecs = JSON.parse(JSON.stringify(pageSpecs))
        newPageSpecs.pageElementsSpecList[0] = { elementType: 'empty' }
        setPageSpecs(newPageSpecs)
    }

    if (topSpec?.elementType) {
        switch (topSpec.elementType) {
            case "TOP_IMAGE":
                return <div className={`compt componentType41 ${topSpec?.comptActive && 'comptActive'}`} onClick={(e) => { installActive(e, 0) }}>
                    <div className={'componentWrap'}>
                        <div className={'componentContent'}>
                            {topSpec?.url ? <img src={topSpec?.url} style={{ display: 'block', width: '100%', margin: 0 }} /> : <div className={'default'} style={{ width: 375, height: 300, margin: 0 }}>
                                <div className={'defaultIcon'} style={{ marginTop: 80 }}>
                                    <TopImgSvg />
                                </div>
                            </div>}
                        </div>
                    </div>

                    {!topSpec?.url && <div className={'comptUpload'} style={{ margin: 0 }}><UploadLoad
                        type='image'
                        uploadButton={<button style={{ marginTop: 150 }} className={'comptEditButton'} onClick={() => { }}>上传图片</button>}
                        onChange={(value) => {
                            setTopUrl(value)
                        }}
                    /></div>}
                    <section className={'comptEditBtns'}>
                        <div className={'comptEditBtnsInner'}>
                            {topSpec?.url && <UploadLoad
                                type='image'
                                uploadButton={<Button icon={<EditSvg />}></Button>}
                                onChange={(value) => {
                                    setTopUrl(value)
                                }}
                            />}
                            <Button onClick={delTopSpec} icon={<DeleteOutlined />} style={{ fontSize: 14 }} />
                        </div>
                    </section>
                </div>
            case "TOP_VIDEO":
                return <div className={`compt componentType61 ${topSpec?.comptActive && 'comptActive'}`} onClick={(e) => { installActive(e, 0) }}>
                    <div className={'componentWrap'}>
                        <div className={'componentContent'} style={{ lineHeight: 'normal' }}>
                            {topSpec?.url ? <div className="videoPlay">
                                <VideoNews src={topSpec.url} style={{ display: 'block', width: '100%', margin: 0, height: '100%' }} maskImgStyle={{ position: 'absolute', top: '50%', left: '50%', width: 40, height: 40, transform: 'translate(-50%, -50%)', zIndex: 10 }} />
                            </div> : <div className={'default'} style={{ width: 375, height: 300, margin: 0 }}>
                                <div className={'defaultIcon'} style={{ marginTop: 80 }}>
                                    <TopVideoSvg />
                                </div>
                            </div>}
                        </div>
                    </div>
                    {!topSpec?.url && <div className={'comptUpload'} style={{ margin: 0 }}><UploadLoad
                        type='video'
                        uploadButton={<button style={{ marginTop: 150 }} className={'comptEditButton'} onClick={() => { }}>上传视频</button>}
                        onChange={(value) => {
                            setTopUrl(value)
                        }}
                    /></div>}

                    <section className={'comptEditBtns'}>
                        <div className={'comptEditBtnsInner'}>
                            {topSpec?.url && <UploadLoad
                                type='video'
                                uploadButton={<Button icon={<EditSvg />}></Button>}
                                onChange={(value) => {
                                    setTopUrl(value)
                                }}
                            />}
                            <Button onClick={delTopSpec} icon={<DeleteOutlined />} style={{ fontSize: 14 }} />
                        </div>
                    </section>
                </div>
            case "TOP_SHORT_VIDEO":
                return <div className={`compt componentType62 ${topSpec?.comptActive && 'comptActive'}`} onClick={(e) => { installActive(e, 0) }}>
                    <Swiper
                        direction="vertical"
                        slidesPerView={1}
                        spaceBetween={0}
                        style={{ height: '750px' }}
                    >
                        {topSpec?.data?.map((item, index) => <SwiperSlide key={index}>
                            <div className={'componentWrap'}>
                                <div className={'componentContent'} style={{ lineHeight: 'normal' }}>
                                    {item?.url ? <div className="videoPlay">
                                        <VideoNews src={item.url} style={{ display: 'block', width: '100%', margin: 0, height: 750 }} maskImgStyle={{ position: 'absolute', top: '50%', left: '50%', width: 40, height: 40, transform: 'translate(-50%, -50%)', zIndex: 10 }} />
                                    </div> : <div className={'default'} style={{ width: 375, height: 750, margin: 0 }}>
                                        <div className={'defaultIcon'} style={{ marginTop: 280 }}>
                                            <TopVideoSvg />
                                        </div>
                                    </div>}
                                </div>
                            </div>
                            {!item?.url && <div className={'comptUpload'} style={{ margin: 0 }}><UploadLoad
                                type='video'
                                uploadButton={<button style={{ marginTop: 360 }} className={'comptEditButton'}>上传视频</button>}
                                onChange={(value, videoInfo) => {
                                    setTopShortVideoUrl(value, videoInfo, index)
                                }}
                            /></div>}
                        </SwiperSlide>)}
                    </Swiper>
                </div>
            default:
                return pageType === 'LANDING_PAGE' ? <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> : <div style={{ minHeight: 648 }} className={`compt topComptArea topShortVideo ${dragging ? 'dragging' : ''}`} {...dropProps}>
                    <TopNullBack />

                    {dragging ? <div className="topAreaTitle" style={{ marginTop: 30 }}>
                        拖至此处
                    </div> : <>
                        <p className={'topAreaTitle'}>短视频组件区</p>
                        <div className={'desc'}>在左上方，选择顶部组件添加到此处</div>
                    </>}
                </div>
        }
    }
    return <span>页面BUG，刷新页面后尝试</span>
}

export default React.memo(CenterTop)