import React,{Component} from 'react';
import className from 'classnames';
import {NumberPan} from '@commonComp';
import style from './index.less';
import {handleEnter} from '@utils/tools.js';
/***
 * author:zn@2018-11-19
 * 接收参数：
 * value: 默认选中的值
 * placeholder：灰显文字
 * handleSelect: 选中事件
 * show: 是否显示下拉
 *
 * ***/
class NumberDrop extends Component{
  constructor(props){
    super(props);
    this.state={
      editable:false,      //标签是否可输入
      numEditable:true,      //数字框是否可输入
      timer:null,
      hasSelect:false,       //是否点过下拉键盘
      isClosed:false
    };
    this.$span = React.createRef();
    this.select = this.select.bind(this);
    this.numInpBlur = this.numInpBlur.bind(this);
    this.handleSpanInp = this.handleSpanInp.bind(this);
    this.handleNumClick = this.handleNumClick.bind(this);
    this.handleNumFocus = this.handleNumFocus.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.changeToEdit = this.changeToEdit.bind(this);
  }
  select(text){         //选中键盘上数字事件
    const {handleSelect,ikey,suffix,prefix,mainSaveText} = this.props;
    this.setState({
      hasSelect:true
    });
    handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
  }
  handleNumFocus(e){        //数字框可编辑状态下聚集事件，处理是否显示下拉等
    e.stopPropagation();
    const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
    const that = this;

    //双击时不显示下拉
    const timer = setTimeout(function(){
      const {hasSelect,editable,isClosed} = that.state;
      if(editable||isClosed){
        return;
      }
      handleShow&&handleShow({ikey,id:patId||id});
      that.setState({
        numEditable:false
      });
    },300);
    this.setState({
      timer
    });
  }
  handleNumClick(e){      //数字框不可编辑的状态时点击事件，点击将数字框变为可输入且下拉不再显示直到失焦后再次聚集
    e.stopPropagation();
    const {show,handleShow,ikey,id,patId,handleHide,value} = this.props;
    const {hasSelect} = this.state;

    if(show&&!hasSelect){
      this.setState({
        numEditable:true,
        isClosed:true
      });
      handleHide&&handleHide();
      setTimeout(function(){
        e.target.focus();
      });
    }
  }
  numInpBlur(e){        //数字框失焦，保存值到store中
    e.stopPropagation();
    this.setState({
      isClosed:false,
      numEditable:true,
      hasSelect:false
    });
    const {handleSelect,ikey,suffix,prefix,mainSaveText,placeholder} = this.props;
    const text = e.target.innerText===placeholder?'':e.target.innerText;
    handleSelect&&handleSelect({ikey,text,suffix,prefix,mainSaveText});
  }
  handleSpanInp(e){      //数字框输入事件
    e.stopPropagation();
    //const {value} = this.props;
  }
  getClasses(){         //整个标签是否有值的状态
    const {value,hideTag,placeholder} = this.props;
    const isSelected = value&&value!=placeholder?style['selected']:style['container'];
    const noTag = hideTag?style['no-tag']:'';
    return className(isSelected,noTag);
  }
  changeToEdit(e){        //整个标签双击编辑状态
    const {value,id,handleDbclick,patId} = this.props;
    clearTimeout(this.state.timer);//取消延时的单击事件
    e.preventDefault();
    if(value&&value.trim()) {//有选中值的标签才能双击编辑
      this.setState({
        editable: true
      });
      //e.target.focus();
      //双击埋点记录
      handleDbclick && handleDbclick({id:patId||id});
    }
  }
  handleBlur(e){     //双击编辑blur
    const {handleLabelChange,ikey,boxMark} = this.props;
    //if(!this.state.editable) return;
    this.setState({
      editable: false
    });
    let totalVal = e.target.innerText;
    let changeVal = this.props.value;
    handleLabelChange && handleLabelChange({ikey,changeVal,type:boxMark,totalVal});
  }
  getSpanClass(){       //将被替换的文字选中状态显示
    const {hasSelect} = this.state;
    const cls = !hasSelect&&this.props.show?style['blued']:'';
    return cls;
  }
  render(){
    const {placeholder,prefix,suffix,show,value,handleHide} = this.props;
    const {numEditable,editable,hasSelect} = this.state;
    return <div className={this.getClasses()}
                onDoubleClick={this.changeToEdit}
                onBlur={this.handleBlur} contentEditable={editable}
                onkeydown={handleEnter}>
      <span>{prefix}</span>
      <span onFocus={this.handleNumFocus}
            onClick={this.handleNumClick}
            contentEditable={numEditable}
            style={{minWidth:'10px',display:'inline-block'}}
            ref = {this.$span}
            onBlur={this.numInpBlur}
            onInput={this.handleSpanInp}
            className={this.getSpanClass()}
            onkeydown={handleEnter}>{value||placeholder}</span>
      <span>{suffix}</span>
      <NumberPan handleSelect={(text)=>this.select(text)}
                 onClose={handleHide}
                 show={show} toClear={!hasSelect}/>
    </div>
  }
}

export default NumberDrop;