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

import React, { Component } from "react";
import styles from "./index.less";
import {  Notify,DelToast} from '@commonComp';
import config from '@config/index';
import $ from 'jquery';
import checkOff from '@common/images/check_off.png';
import checkOn from '@common/images/check_on.png';
import dowm from '../img/down.png';
import SlideIpt from '../SlideIpt';
import SearchSelect from '../SearchSelect';
import singleB from '../img/singleB.png';
import singleL from '../img/singleL.png';

class SlidePic extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show:false,
      activeInd:false,
      selectShow: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
        })
      }
      if($(event.target).attr("id")!='selectJiType'&&$(event.target).attr("id")!='selectJiTypeWrap'){
        const {handleSelectShow,idx,item} = this.props;
        item.flg==5&&handleSelectShow(idx,0)
      }
    });
  }
  handleDel(time){
    const {handleDelClick,item} = this.props;
    this.setState({
      activeInd:true,
      activeName:item.detailName,
    })
    handleDelClick&&handleDelClick(1,time);
  }
  handleCancel(){
    this.setState({
      activeInd:false,
      activeName:''
    })
  }
  delConfirm(item,idx){
    const {handleDelConfirm,handlePush} = this.props;
    handleDelConfirm&&handleDelConfirm(item,idx);
    Notify.success("删除成功");
    handlePush && handlePush({mode:8});       //右侧推送
    this.setState({
      activeInd:false,
      activeName:''
    })
  }
  handleInput(e,item,sign,tip){
    e.stopPropagation();
    const {setTipValue,handlePush} = this.props
    setTipValue(item,e.target.value,sign,tip)
    //右侧推送--延时推送
    const stimer = this.state.timer;
    clearTimeout(stimer);
    let timer = setTimeout(function(){
      handlePush&&handlePush({mode:8});
      clearTimeout(stimer);
    },config.delayPushTime);
    this.setState({timer})
  }
  handleBlur(){
    const {handlePush} = this.props;
    $('.canEdit').attr('disabled','disabled')
    handlePush && handlePush({mode:8});       //右侧推送
  }
  checkOnOff(item,idx){
    const {checkOnOff,handlePush} = this.props
    checkOnOff(item,idx)
    handlePush && handlePush({mode:8});       //右侧推送
  }
  setEdit(e){
    // $('.canEdit').blur().attr('disabled','disabled')
    $(e.target).removeAttr('disabled').focus()
  }
  handleFocus(){
    const {handlePush} = this.props;
    handlePush&&handlePush({mode:8});
  }
  handleSui(item,idx){
    const {handleSuiFang,handlePush} = this.props;
    handleSuiFang&&handleSuiFang(item,idx)
    handlePush&&handlePush({mode:8});
  }
  render() {
    const {item,time,setTipValue,idx,handlePush,hosId,selectJiType} = this.props;
    const {selectShow,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,idx)} alt=""/>
          <span className={styles.bigname} title={item.detailName}>{item.detailName}</span>
          <span className={styles.smallname}>{item.flg == 5?'药品':item.flg == 6?'手术/操作':'输血'}</span>
          {hosId===-1?<SearchSelect title='选择剂型' hosId={hosId} selected={item.form} type={15} selectJiType={selectJiType} handlePush={handlePush} idx={idx}></SearchSelect>:''}
          <SearchSelect title='选择给药途径' hosId={hosId} selected={item.routeName} type={16} selectJiType={selectJiType} handlePush={handlePush} idx={idx}></SearchSelect>
          <span className={styles.edit}>
            {
              item.flg == 5||item.flg == 8?
              <input type="text" 
                class="canEdit" 
                style={{color:'#333'}}
                placeholder='(填写用量)'
                autoComplete="off"
                value={item.value}
                title={item.value}
                onInput={(e)=>{this.handleInput(e,item,2,idx)}}
                onFocus={()=>{this.handleFocus()}}
                />:<span onClick={()=>this.handleSui(item,idx)} className={styles.suifang}>
                  <img src={item.hasTreat?singleB:singleL} alt=""/>
                  随访计划
                </span>
            }
          </span>
          <span className={styles.pass}>
            <SlideIpt item={item} setTipValue={setTipValue} handlePush={handlePush} idx={idx}/> 
          </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,idx)}}/>
      </li>
    );
  }
}
export default SlidePic;