import React, { Component } from "react";
import style from "./index.less";
import config from '@config/index';
import $ from 'jquery';

class Textarea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      timer:null,
      val:'报告描述或意见'
    };
    this.$dom = React.createRef();
    this.$domW = React.createRef();
    this.handleInput = this.handleInput.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }
  handleInput(e){
    const {handleChangeAssistValue,idx,handlePush} = this.props;
    const text = e.target.innerText;
    const stimer = this.state.timer;
    handleChangeAssistValue&&handleChangeAssistValue(text,idx);
    //右侧推送--延时推送
    clearTimeout(stimer);
    let timer = setTimeout(function(){
      handlePush&&handlePush();
      clearTimeout(stimer);
    },config.delayPushTime);
    if(text.trim() != ''){
      this.setState({val:''})
    }else{
      this.setState({val:'报告描述或意见'})
    }
    this.setState({
      timer
    });
  }
  shouldComponentUpdate(next){
    if(JSON.stringify(next) == JSON.stringify(this.props)){
      return false;
    }
    return true;
  }
  componentWillReceiveProps(next){
    const isRead = this.props.isRead;
    if(next.isRead != isRead){
      this.$dom.current.innerText = next.value||'';
    }
  }
  componentDidMount(){
    const {value} = this.props;
    if(value){
      this.$dom.current.innerText = value||'';
      this.setState({val:''})
    }
  }
  handleFocus(e){
    this.setState({val:''})
  }
  handleBlur(e){
    let str = this.$dom.current.innerText
    if(str.trim() == ''){
      this.setState({val:'报告描述或意见'})
    }
  }
  render() {
    const {val} = this.state;
    return (
      <div className={style.textWap}>
        <div className={style.divTextarea}
            contenteditable={true}
            ref={this.$dom}
            onInput={this.handleInput}
            onFocus={this.handleFocus}
            onBlur={this.handleBlur}
            onPropertyChange={this.handleInput}
        ></div>
        <p className={style.textareaWarring} id="textareaWarring">{val}</p>
      </div>
    );
  }
}

export default Textarea;