import React,{useEffect, useState} from 'react';
import ReactDOM from 'react-dom';
import CSS from './index.less';
import Popup from '@/components/Popup';
import imgLoading from '@/assets/images/loading.svg';

const PageLoading = (props) => {
  const {visible=true} = props;
  if(!visible){
    return '';
  }
  return (
    <div className={CSS.wrap } >
      <div className={CSS.box} data-show={visible}>
        <img src={imgLoading} />
      </div>
    </div>
  );
};

export const ShowPageLoading=(props={canTouch:false})=>{
  let popup = Popup(()=>{},{cantouch:props.canTouch});
  ReactDOM.render(
    <PageLoading visible={true} />,
    popup.dom
  );
  return popup.destory;
}

export default React.memo(PageLoading);
