import React from 'react'
import { Spin, Icon } from 'antd'

class Loading extends React.Component {

    state = {
        width: '100%',
        height: '100%',
    }

    componentDidMount() {
        let loadingEl = this.loadingRef;
        let containerEl = loadingEl.parentElement;
        let box = containerEl.getBoundingClientRect();
        let width = box.width;
        let height = box.height;
        // let top = box.top;
        // let left = box.left;
        this.setState({
            style: {
                width: `${width}px`,
                height: `${height}px`,
                // top: `${top}px`,
                // left: `${left}px`,
            }
        });
    }

    render() {
        const { visible, style: propsStyle } = this.props;
        const { style } = this.state;

        return <div ref={node => this.loadingRef = node} style={{ display: visible ? 'block' : 'none', position: 'absolute', zIndex: '4', background: 'rgba(51,51,51,.1)', ...style, ...propsStyle }}>
            <Spin style={{ display: 'inline-block', position: 'absolute', top: '50%', left: '50%', margin: '-10px' }} indicator={<Icon type="loading" style={{ fontSize: 24 }} spin />} />
        </div>
    }
}
export default Loading