import React from 'react';
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
require('./index.css');

export default class TextAreaContainer extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            text : '',
            originText : ''
        };
        this.getOtherHeader = this.getOtherHeader.bind(this);
        this.saveText = this.saveText.bind(this);
        this.goBack = this.goBack.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    componentWillMount() {
        let {text} = this.props;
        this.setState({
            text : text,
            originText : text,
        })
    }

    componentWillUnmount(){
        this.setState({
            text : "",
            originText : "",
        })
    }

    handleChange(e){
        let value = e.target.value;
        this.setState({text: value});
    }
    handleBlur(){
        this.props.setStyle({})
    }

    handleFocus(){
        this.props.setStyle({
            'position':'absolute',
            'top':'0px'
        })
    }

    saveText(){
        if(this.state.text){
            this.props.saveText(this.state.text)
        }
    }

    goBack(){
        let hasChange = this.state.text !== this.state.originText ? true : false;
        this.props.goBack(hasChange);
    }

    getOtherHeader(){
        let {goBack} = this.props;
        return <div className={"otherHeader font32 clearfix"}>
            <div className={"fl colfff"} onClick={()=>this.goBack()}>
                <i className={"iconfont middle icon font50 icon-circle-left circleIcon"}></i>
                <span className={"middle"}>编辑检查结果</span>
            </div>
            <div className={"fr "+(this.state.text ? 'colff7860':'col999')} onClick={()=>this.saveText()}>
                <i className={"iconfont middle icon font50 icon-save saveIcon"}></i>
                <span className={"middle"}>保存</span>
            </div>
        </div>
    }

    render(){
        return (
            <div>
                <HeaderComponent
                    showHeader={CONFIG.headerStatus[2]}
                >
                    {this.getOtherHeader()}
                </HeaderComponent>
                <div className={"textAreaContainer"}>
                    <div className={"textAreaDiv font30 col999"} >
                        <textarea className={"textAreaBox font30 col999"} name="" id="" cols="30" rows="10"
                                  onChange={this.handleChange.bind(this)} value={this.state.text}
                                  placeholder={"点击输入"} onBlur={this.handleBlur.bind(this)}
                                  onFocus={this.handleFocus.bind(this)}
                        />
                    </div>
                </div>
            </div>

        )
    }
}