/*
 * @Author: zhoux zhouxia@supervision.ltd
 * @Date: 2023-12-29 14:19:46
 * @LastEditors: zhoux zhouxia@supervision.ltd
 * @LastEditTime: 2023-12-29 15:31:14
 * @FilePath: \general-ai-platform-web\src\components\Loading\loadingSpin.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

type LoadingSpinProps = {
  spinning: boolean;
  tip?: string | React.ReactNode;
  indicator?: React.ReactNode;
};
/**
 * @加载控件
 * @param props
 * @returns
 */
const LoadingSpin: React.FC<LoadingSpinProps> = (props) => {
  return props.spinning ? (
    <div
      style={{
        background: 'transparent',
        position: 'fixed',
        left: 0,
        top: 0,
        width: '100vw',
        height: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 999,
        backgroundColor: 'rgba(0,0,0, 0.3)',
        color: 'white',
      }}
    >
      <div
        style={{
          backgroundColor: 'white',
          borderRadius: 12,
          width: 361,
          height: 216,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'column',
          color: '#154DDD'
        }}
      >
        {props.indicator ? (
          props.indicator
        ) : (
          <img style={{ width: 120 }} src="/loading1.gif" alt="" />
        )}

        <p style={{padding: 8, margin: 0}}>{props.tip || '请稍候...'}</p>
      </div>
    </div>
  ) : (
    <></>
  );
};

export default LoadingSpin;