import { h, Component } from 'preact';

import styles from './css/index.less';

export default class Loading extends Component<any, any> {
  render() {
    const {
      loadingText,
      background,  // 是否显示背景
      showBack,
    } = this.props;

    return (
      <div className={`${styles['popup-container']} ${background ? '' : styles['hide-bg']} ${showBack ? 'black-bg' : ''}`}>
        <div className={styles['popup-container-box']}>
          {showBack && (
            <div
              className={styles['btn-back']}
              onClick={this.props.onClickBack}
            />
          )}
          <div className={styles['loading-box']}>
            {
              background
                ? <div className={styles['background-img-loading']}/>
                : <div className={styles['img-loading']}/>
            }
            {
              loadingText && <div className={styles['loading-text']}>{loadingText}</div>
            }
          </div>
        </div>
      </div>
    );
  }
}