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

import React, { Component } from "react";
import styles from "./index.less";
import { normalVal,getArrow,getDomUpDown,getPageCoordinate,setPosition,setFontColorSize } from '@utils/tools';
import { InspectCommon, Notify,DelToast} from '@commonComp';
import slideUp from "@common/images/slide-up.png";
import slideDown from "@common/images/slide-down.png";
import checkOff from '@common/images/check_off.png';
import checkOn from '@common/images/check_on.png';
import $ from 'jquery';
import ScrollArea from 'react-scrollbar';
import InspectName from '../InspectName';
import store from '@store';
import { embedPush } from '../../../store/async-actions/pushMessage'
import config from '@config/index';
import up from '@images/up.png';
import down from '@images/down.png';

class SlideSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show:false,
      activeInd:false,
      activeName:'',
      canEdit:true,
      style:'',
      timer: null,
    };
    this.handleSlide = this.handleSlide.bind(this);
    this.handleDel = this.handleDel.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.delConfirm = this.delConfirm.bind(this);
    this.timeSure = this.timeSure.bind(this);
    this.setEdit = this.setEdit.bind(this);
    this.handleLabelSub = this.handleLabelSub.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
    this.checkOnOff = this.checkOnOff.bind(this);
  }
  handleChangeDate(date) {
    // console.log(date,'外')
  }
  
  componentDidMount() {
    const {item} = this.props;
    $(document).click((event) => {
      if($(event.target).attr("id")!='addClose'&&$(event.target).attr("id")!='delTit'){
        this.setState({
          activeInd:false
        })
      }
    });
    let type = getArrow(item.minValue,item.maxValue,item.value||null)
    this.setState({style:type,value:item.value,time:item.time})
    const that = this;
    document.addEventListener('mousedown',function(e){
      //onMousedown的目标为滚动条时，标签填写单不关闭
      if(e.target.className=='scrollbar'){
        that.isBar = true;
      }else{
        that.isBar = false;
      }
    });
    // this.setState({ dateTime: getCurrentDate(1) })
  }
  handleSlide(){
    let tmpShow = this.state.show
    this.setState({
      show:!tmpShow
    })
  }
  handleDel(part,idx){
    const {handleDelClick,item} = this.props;console.log(item)
    this.setState({
      activeInd:true,
      activeName:item.detailName||item.name,
    })
    handleDelClick&&handleDelClick(1,part,idx);
  }
  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:''
    })
  }
  timeSure(date){
    const {handleChangeDate} = this.props;
    handleChangeDate&&handleChangeDate(date)
  }
  handleLabelSub(e,questionId,idx){
    const {handleLabelSub,handleFillShow,setHighter,refreshScroller} = this.props;
    handleLabelSub(e,questionId,idx);
    handleFillShow(e,idx);
    //弹窗高度超出屏幕，增加页面高度
    setPosition(e,"#inspectFill",setHighter);
    /*setTimeout(function(){//如果检验下面有很多数据，则会跳过头
      refreshScroller()&&refreshScroller().scrollYTo(290);
    })*/
  }
  handleInput(e,item,sign,tip){
    const tempTimer = this.state.timer
    const {setTipValue} = this.props
    setTipValue(item,e.target.value,sign,tip)
    if(tip == 2){
      let type = getArrow(item.minValue,item.maxValue,e.target.value||null)
      this.setState({
        style:type
      })
    }

    // 延迟推送
    clearTimeout(tempTimer)
    let timer = setTimeout(() => {
      store.dispatch(embedPush({
        action: "lis",
        mode: 1
      }))
      clearTimeout(tempTimer)
    }, config.delayPushTime);
    this.setState({
      timer
    })     
  }
  handleBlur(){
    const {handlePush} = this.props;
    $('.canEdit').attr('disabled','disabled')
    handlePush && handlePush({mode:8});       //右侧推送
  }
  handleFocus(){
    const {handlePush} = this.props;
    handlePush && handlePush({mode:8});       //右侧推送
  }
  checkOnOff(item,idx){
    const {checkOnOff,handlePush} = this.props
    checkOnOff(item,idx)
    handlePush && handlePush({mode:8});       //右侧推送
  }
  setEdit(e){
    // store.dispatch(embedPush({
    //   action: "lis",
    //   mode: 1
    // }))
    // $('.canEdit').blur().attr('disabled','disabled')

    $(e.target).removeAttr('disabled').focus()
    store.dispatch(embedPush({
      action: "lis",
      mode: 1
    }))
  }
  render() {
    const {item,idx,activeIdx,activeSign} = this.props;
    const {canEdit,activeInd,activeName,value,style} = this.state;
    return (
      item.flg == 1?<li key={item.detailName+idx} className={`${styles.slideLi} clearfix`}> 
          <table>
            <tr>
              <img className={styles.imgCheck} src={item.check?checkOn:checkOff} onClick={()=>this.checkOnOff(item,idx)} alt=""/>
              <span className={styles.bigname}>{item.name}</span>
              <span className={styles.smallname}></span>
              <span className={styles.edit}></span>
              <span className={styles.maxmin}></span>
              {/* <span className={styles.pass}>检验时间： */}
              <span className={styles.pass}>
                <input type="text" 
                    class="canEdit" 
                    // onDoubleClick={(e)=>this.setEdit(e)}
                    style={{color:'#333'}}
                    placeholder='时间'
                    autoComplete="off"
                    value={item.time}
                    onInput={(e)=>{this.handleInput(e,item,idx)}}
                    onFocus={()=>{this.handleFocus()}}
                    // onBlur={()=>{this.handleBlur()}}
                    />
              </span>
              <span id="addClose" className={styles.partDel} onClick={()=>{this.handleDel(item,idx)}}></span>
            </tr>
          </table>
          <DelToast show={activeSign==item.flg&&activeIdx==idx&&activeInd?true:false}
                    name={activeName} 
                    right={'-34px'}
                    top={'30px'}
                    cancel={this.handleCancel}
                    confirm={()=>{this.delConfirm(item,idx)}}/>
      </li>:<li key={item.detailName+idx} className={`${styles.slideLi} clearfix`}> 
          <span style={{width:'22px'}}></span>
          <span className={styles.bigname}>{item.name}</span>
          <span className={styles.smallname}>{item.detailName}</span>
          <span className={styles.edit}>
            <input type="text" 
              class="canEdit"
              // onDoubleClick={(e)=>this.setEdit(e)}
              style={{ color: style == 2 || style == 4 ? 'red' : style == 1 ? '#D949FF' : '#333', backgroundColor: item.value && item.value.length>0 ? '#eeeeee' : ''}}
              placeholder='(填写)'
              autoComplete="off"
              value={item.value||item.otherValue}
              onInput={(e)=>{this.handleInput(e,item,idx,2)}}
              // onBlur={()=>{this.handleBlur()}}
              onFocus={()=>{this.handleFocus()}}
              /><img style={{display:style==1||style==2?'inline-block':'none'}} src={style==1?down:style==2?up:''} />{item.units}
          </span>
          <span className={styles.maxmin}>{normalVal(item.minValue,item.maxValue)}</span>
          <span className={styles.pass}>
          {/* <span className={styles.pass}>检验时间： */}
            <input type="text" 
                class="canEdit" 
                // onDoubleClick={(e)=>this.setEdit(e)}
                style={{color:'#333'}}
                placeholder='时间'
                autoComplete="off"
                value={item.time}
                onInput={(e)=>{this.handleInput(e,item,idx,1)}}
                // onBlur={()=>{this.handleBlur()}}
                onFocus={()=>{this.handleFocus()}}
                />
          </span>
          <span id="addClose" className={styles.partDel} onClick={()=>{this.handleDel(item,idx)}}></span>
          <DelToast show={activeSign==item.flg&&activeIdx==idx&&activeInd?true:false}
                    name={activeName}
                    right={'-34px'}
                    top={'30px'}
                    cancel={this.handleCancel}
                    confirm={()=>{this.delConfirm(item,idx)}}/>
      </li>
    );
  }
}
export default SlideSelect;