import React from 'react';
import Loading from '@beisen-phoenix/icon/lib/loading';
import NoData from '@beisen-phoenix/icon/lib/no-data';
import './style/Placeholder.scss';
import utils from '@beisen-phoenix/common-utils';
const classes = utils.BEMClass('groupSingleSelect');

export interface PlaceHolderProps {
  loading?: Boolean
  translation?: any
}
export default class PlaceHolder extends React.PureComponent<PlaceHolderProps, any> {
  constructor(props: PlaceHolderProps) {
    super(props);

    this.state = {};
  }
  renderContent = () => {
    const { loading,translation } = this.props;
    const content = loading ? 
                      <Loading /> 
                    : (<React.Fragment>
                        <div style={{fontSize:"60px",height:"60px"}}><NoData /></div>
                        <div className={classes({element: 'emptyText'})}>
                          {translation.noData}
                        </div>
                    </React.Fragment>);
    return <div className={classes({element: 'emptyContentWrapper'})}>{content}</div>;
  }
  render() {
    const { loading = false } = this.props;
    return (
      <div className={classes({element: 'emptyContainer', modifiers: {loading}})}>
      {
        this.renderContent()
      }
      </div>
    )
  }
}