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

class Textarea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      timer:null,
      val:'报告描述或意见'
    };
    this.textInput = React.createRef();
    this.$dom = React.createRef();
    this.$domW = React.createRef();
    this.handleInput = this.handleInput.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
  }
  handleInput(e){
    e.stopPropagation();
    const {handleChangeAssistValue} = this.props;
    const text =  e.target.textContent.trim() ? e.target.innerHTML : ''
    handleChangeAssistValue&&handleChangeAssistValue(text);
   
  }
  handleFocus() {
    const {handleFocus} = this.props
    handleFocus&&handleFocus()
  }
  shouldComponentUpdate(next){
    if(JSON.stringify(next) == JSON.stringify(this.props)){
      return false;
    }
    return true;
  }
  componentWillReceiveProps(next){
    const {isRead, typeConfig} = this.props;
    if(next.isRead != isRead && next.value || next.isRead != isRead && next.value!=this.props.value){      //value对比解决复诊不显示bug
      next.value ? this.$dom.current.innerHTML = next.value :  this.$dom.current.innerHTML = '' 
    }
    if(next.typeConfig != typeConfig) {
      this.$dom.current.innerText = '' 
    }
  }
  componentDidMount(){
    const {value} = this.props;
    if(value && value.trim()){
      this.$dom.current.innerHTML = value
      // this.$dom.current.focus()
      // this.$dom.current.innerText ? (this.$dom.current.innerText = value) : (this.$dom.current.innerHTML = value)
    //   this.$dom.current.nextSibling.innerText?(this.$dom.current.nextSibling.innerText = ''):(this.$dom.current.nextSibling.innerHTML = '')
    }
    const that = this;
    let txt = '';
    //黏贴时去掉html格式
    $(this.$dom.current).on("paste",function(e){
      setTimeout(function(){
        txt = that.$dom.current.innerText||that.$dom.current.innerHTML;
        that.$dom.current.innerHTML = txt;
      });
      setTimeout(function(){
        moveEnd($(that.$dom.current)[0]);     //光标落到最后去
      },200)
    })
  }
  componentWillUnmount(){
    $(this.$dom.current).off("paste");
  }
  render() {
    return (
      <div>
        <div 
            style={{outline: 'none',minHeight:'20px'}}
            className={`${style['text']} ${setFontColorSize(2)}`}
            contenteditable={true}
            ref={this.$dom}
            onFocus={this.handleFocus}
            onInput={this.handleInput}
            onKeyUp={this.handleInput}
            onkeydown={(e) => {e.stopPropagation()}}
        > </div>
      </div>
    );
  }
}
export default Textarea;
