// 局部loading组件  挂载在目标块下，目标块最少要添加一个position: relative; 或者absolute
import CircularProgress from "@mui/material/CircularProgress";

type IMyCircularProgressProps = {
	loading: boolean;
	minHeight?: string;
	maxHeight?: string;
	zIndex?: number;
};

const MyCircularProgress = (props: IMyCircularProgressProps) => {
	const {
		loading,
		minHeight = "none",
		maxHeight = "100vh",
		zIndex = "100",
	} = props;
	if (loading) {
		return (
			<div
				style={{
					minHeight: minHeight,
					width: "100%",
					height: "100%",
					position: "absolute",
					top: 0,
					zIndex: zIndex,
				}}
			>
				<div
					style={{
						width: "100%",
						height: "100%",
						position: "absolute",
						top: 0,
						opacity: 0.6,
						background: "#fff",
					}}
				></div>
				<div
					style={{
						width: "100%",
						height: "100%",
						maxHeight: maxHeight,
						display: "flex",
						justifyContent: "center",
						alignItems: "center",
					}}
				>
					<CircularProgress></CircularProgress>
				</div>
			</div>
		);
	} else {
		return null;
	}
};

export default MyCircularProgress;
