import { Component, render, createElement } from 'rax';
import './index.less';
import App from '../App';
import config from '../../../config';

export default class UpLoading extends Component {


    constructor(props) {
        super(props);
        this.canPlay = true;
        this.state={
            show:false
        }
    }

    show=()=>{
        this.canPlay = true;
        requestAnimationFrame(this.playAnim.bind(this));
        this.setState({
            show:true
        })
    }

    hide=()=>{
        this.canPlay = false;
        this.setState({
            show:false
        })
    }

    playAnim=(time)=>{
        if(this.loadIcon && this.canPlay){
            this.loadIcon.style.transform = 'rotate('+parseInt(time * 0.1)+'deg)';
            requestAnimationFrame(this.playAnim.bind(this));
        }
    }

    componentWillUnmount() {
        this.canPlay = false;
    }
    componentDidMount() {
        // requestAnimationFrame(this.playAnim.bind(this));
        
    }

    render() {
        this.props.app._uploadingCom = this;
        return (
            <div ref={ref=>this.uploadingbox = ref} className={"uploading"} style={{display:this.state.show?'block':'none'}}>
                <img ref={ref=>this.loadIcon=ref} className={"_uploadimg"} src={"./image/loading1.png"}/>
            </div>
        )
    }
}