import React, { useEffect } from "react";
import DragModal from "../drag-modal/DragModal";
import "./index.less";
import { Spin } from "antd";

interface IProps {
    loadingTip?: string   //弹窗显示文字
    visible: boolean   //是否显示
    height?: string    //弹窗高度
}

export function MaskLoadingModal(props: IProps) {

    useEffect(() => {
        if(props.height){
            const modalContent = document.querySelector(".ant-modal-wrap.mask-loading-wrap.drag-modal .ant-modal-content") as HTMLDivElement;
            // 设置高度
            if (modalContent) {
                modalContent.style.height = props.height;
            }
        }
    }, [props.height])

    return (
        <DragModal
            showHeader={false}
            centered={false}
            mask
            visible={props.visible}
            wrapClassName={"mask-loading-wrap"}
        >
            <div className="mask-loading-container">
                <Spin size="large" />
                <span className="tips">{props.loadingTip ? props.loadingTip : ""}...</span>
            </div>
        </DragModal>

    )

}