newICSS/src/components/AddNewInspect/SlidePic/index.jsx

import React, { Component } from "react";
import styles from "./index.less";
import {  Notify,DelToast} from '@commonComp';
import $ from 'jquery';
import checkOff from '@common/images/check_off.png';
import checkOn from '@common/images/check_on.png';

class SlidePic extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show:false,
      activeInd:false,
      activeName:'',
      canEdit:true,
      style:''
    };
    this.handleDel = this.handleDel.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.delConfirm = this.delConfirm.bind(this);
    this.setEdit = this.setEdit.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.checkOnOff = this.checkOnOff.bind(this);
  }
  
  componentDidMount() {
    $(document).click((event) => {
      if($(event.target).attr("id")!='addClose'&&$(event.target).attr("id")!='delTit'){
        this.setState({
          activeInd:false
        })
      }
    });
  }
  // shouldComponentUpdate(nextProps,nextState){
  //   console.log(this.props.item.time , nextProps.item.time,nextState)
  //   if(this.props.item.time == nextProps.item.time){
  //     return false
  //   }
  //   return true
  // }
  handleDel(time){
    const {handleDelClick,item} = this.props;
    this.setState({
      activeInd:true,
      activeName:item.uniqueName,
    })
    handleDelClick&&handleDelClick(1,time);
  }
  handleCancel(){
    this.setState({
      activeInd:false,
      activeName:''
    })
  }
  delConfirm(item){
    const {handleDelConfirm,handlePush} = this.props;
    handleDelConfirm&&handleDelConfirm(item);
    Notify.success("删除成功");
    handlePush && handlePush({mode:8});       //右侧推送
    this.setState({
      activeInd:false,
      activeName:''
    })
  }
  handleInput(e,item,sign){
    const {setTipValue} = this.props
    console.log(item,e.target.value)
    setTipValue(item,e.target.value,sign)
  }
  handleBlur(){
    const {handlePush} = this.props;
    $('.canEdit').attr('disabled','disabled')
    handlePush && handlePush({mode:8});       //右侧推送
  }
  checkOnOff(item){
    const {checkOnOff,handlePush} = this.props
    checkOnOff(item)
    handlePush && handlePush({mode:8});       //右侧推送
  }
  setEdit(e){
    $('.canEdit').blur().attr('disabled','disabled')
    $(e.target).removeAttr('disabled').focus()
  }
  render() {
    const {item,time} = this.props;
    const {canEdit,activeInd,activeName,value,style} = this.state;
    return (
      <li key={item.time} className={`${styles.slideLi} clearfix`}> 
          <img className={styles.imgCheck} src={item.check?checkOn:checkOff} onClick={()=>this.checkOnOff(item)} alt=""/>
          <span className={styles.bigname}>{item.name}</span>
          <span className={styles.smallname}>{item.flg == 5?'药品':item.flg == 6?'手术/操作':'输血'}</span>
          <span className={styles.edit}>
            {
              item.flg == 5||item.flg == 8?
              <input disabled='disabled' type="text" 
                class="canEdit" 
                onDoubleClick={(e)=>this.setEdit(e)}
                style={{color:'#333'}}
                placeholder={item.flg == 5?'(填写用法计量)':'(填写用量)'}
                autoComplete="off"
                value={item.value}
                onInput={(e)=>{this.handleInput(e,item,2)}}
                onBlur={()=>{this.handleBlur()}}
                />:null
            }
          </span>
          <span className={styles.pass}>
            <input disabled="disabled" type="text" 
                class="canEdit" 
                onDoubleClick={(e)=>this.setEdit(e)}
                style={{color:'#333'}}
                placeholder='时间'
                autoComplete="off"
                value={item.time}
                onChange={(e)=>{this.handleInput(e,item,1)}}
                onBlur={(e)=>{this.handleBlur();}}
                />
          </span>
          <span id="addClose" className={styles.partDel} onClick={()=>{this.handleDel(item.time)}}></span>
          <DelToast show={time==item.time&&activeInd?true:false}
                    name={activeName}
                    right={'-34px'}
                    top={'30px'}
                    cancel={this.handleCancel}
                    confirm={()=>{this.delConfirm(item)}}/>
      </li>
    );
  }
}
export default SlidePic;