ad-manage/src/pages/launchSystemNew/components/selectCloud/index.tsx

import { Button, Image, message, Modal, Space, Tabs, Tooltip } from "antd"
import React, { useEffect, useState } from "react"
import { useModel } from "umi"
import FileBoxAD from "@/components/FileBoxAD"
import { CloseCircleFilled, QuestionCircleFilled } from "@ant-design/icons"
import style from './index.less'
import LookLanding from "../lookLanding"

interface Props {
    visible?: boolean,
    onChange?: (content: string[]) => void,
    onClose?: () => void,
    sliderImgContent?: { url: string, width?: number, height?: number }[]
    isBack?: boolean
}
/**
 * 选择素材
 * @returns 
 */
const SelectCloud: React.FC<Props> = (props) => {

    /**================================**/
    const { visible, onChange, onClose, sliderImgContent, isBack = true } = props
    const { state, set, getList } = useModel('useLaunchAdq.useBdMediaPup')
    const { mediaType, belongUser, parentId, selectItem, num } = state

    const [lookVisible, setLookVisible] = useState<boolean>(false)
    const [id, setId] = useState<number>(0)
    /**================================**/

    useEffect(() => {
        if (sliderImgContent && sliderImgContent?.length > 0) {
            setTimeout(() => {
                set({ selectItem: sliderImgContent })
            }, 100)
        } else {
            setTimeout(() => {
                set({ selectItem: [] })
            }, 100)
        }
    }, [])

    const handleOk = () => {
        if (selectItem && selectItem?.length > 0) {
            onChange && onChange(selectItem)
        } else {
            message.error('请选择')
        }
    }

    /**加载组件或数据更新执行请求列表 */
    useEffect(() => {
        if (belongUser === '1' || belongUser === '0') {
            getList()
        }
    }, [mediaType, belongUser, parentId])

    const clearImg = (id: number) => {
        set({ selectItem: selectItem?.filter(item => item.id !== id) })
    }

    return <Modal
        title={<Space>
            <span>选择素材</span>
            {(selectItem && num && selectItem?.length > 0 && num > 1) && <div className={style.selected}>
                {mediaType === 'IMG' ? <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                    <div style={{ overflowX: 'auto', maxWidth: 950, paddingTop: 8, display: 'flex' }}>
                        <Image.PreviewGroup>
                            {selectItem?.map((item: any, index: number) => (<div className={style.antImg} key={index}>
                                <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
                                <Image
                                    className={style.imgAnt}
                                    width={30}
                                    height={30}
                                    src={item?.url}
                                />
                            </div>))}
                        </Image.PreviewGroup>
                    </div>
                    <span style={{ color: '#1890ff' }}>已选：{selectItem.length}</span>
                </div> : selectItem?.map((item: any, index: number) => (
                    <div key={index} className={style.antImg}>
                        <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
                        <video className={style.imgAnt} src={item?.url} height={30} />
                    </div>
                ))}
            </div>}
        </Space>}
        visible={visible}
        onOk={handleOk}
        onCancel={() => { onClose && onClose() }}
        width={1200}
        destroyOnClose
        maskClosable={false}
        bodyStyle={{ padding: 0 }}
    >
        <Tabs tabBarStyle={{ marginBottom: 0 }} onChange={(activeKey: any) => { set({ belongUser: activeKey }) }} activeKey={belongUser} style={{ margin: '0 24px' }} tabBarExtraContent={<Space>
            {
                mediaType === 'PAGE' ? null : <Button size='small' type="primary" onClick={() => { set({ imgVisrible: true }) }}>新建素材</Button>
            }
            <Tooltip title="功能都在下方内容区右键" placement="left">
                <QuestionCircleFilled />
            </Tooltip>
        </Space>}>
            <Tabs.TabPane tab={'个人本地'} key={1} />
            <Tabs.TabPane tab={'公共本地'} key={0} />
        </Tabs>
        <FileBoxAD isAll={false} noFile={true} isBack={isBack} setPage={(type, data) => {
            setId(data || 0)
            if (type === 1) {
                setLookVisible(true)
            }
        }} />

        {/* 查看落地页 */}
        {lookVisible && <LookLanding visible={lookVisible} onClose={() => setLookVisible(false)} id={id} />}
    </Modal>
}

export default React.memo(SelectCloud)