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 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.uniqueName,
    })
    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});
  }
  handleSelect(part,idx){
    const {selectJiType,handleSelectShow,handlePush} = this.props;
    selectJiType(part,idx)
    handlePush&&handlePush({mode:8});
    handleSelectShow(idx)
  }
  handleSelectShow (idx){
    const {handleSelectShow} = this.props;
    handleSelectShow(idx)
  }
  handleSui(item,idx){
    const {handleSuiFang,handlePush} = this.props;
    handleSuiFang&&handleSuiFang(item,idx)
    handlePush&&handlePush({mode:8});
  }
  render() {
    const {item,time,setTipValue,idx,handlePush,staticData,activeIdx} = this.props;
    const {selectShow,activeInd,activeName,value,style} = this.state;
    // console.log(item)
    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.uniqueName}>{item.uniqueName}</span>
          <span className={styles.smallname}>{item.flg == 5?'药品':item.flg == 6?'手术/操作':'输血'}</span>
          <span className={styles.medType}>
            <a style={{display:item.flg == 5?'block':'none',color:item.form=='选择剂型'||!item.form?"#AAAAAA":"#333"}} id="selectJiTypeWrap" onClick={()=>this.handleSelectShow(idx)}>
              {item.form||'选择剂型'}
              <img src={dowm} alt=""/>
            </a>
              {
                item.flg == 5&&item.selectShow&&activeIdx==idx?<ul className={styles.selectLis} id="selectJiType">
                  {
                    staticData&&staticData.map((part)=>{
                      return <li onClick={()=>this.handleSelect(part,idx)}>{part.name||'选择剂型'}</li>
                    })
                  }
                </ul>:''
              }
          </span>
          <span className={styles.edit}>
            {
              item.flg == 5||item.flg == 8?
              <input type="text" 
                class="canEdit" 
                style={{color:'#333'}}
                placeholder={item.flg == 5?'(填写用法计量)':'(填写用量)'}
                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;