newICSS/src/components/AddNewInspect/index.jsx

import React from 'react';
import { SearchOption, InspectCommon, Calendar, Notify, ConfirmModal, Add, DelToast } from '@commonComp';
import SlidePic from './SlidePic';
import { deepClone, getPageCoordinate, getStatusImg,getDomUpDown ,getCurrentDate,setPosition,getCalendarDate} from '@utils/tools';
import styles from './index.less';
import $ from 'jquery';
class AddNewInspect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      showFill: false,
      date: false,
      currentIdx: '',
      currentData: {},
      numPlus: 0,     //判断是否所有的填写单都是空
      num: 0,            //暂存数据，获取一次，不能每次都是新的数据
      type: null,
      time: null,
      pageTop: '',
      // tmpIds: [],      //内层外层
      impId: null
    }
    this.getSearchList = this.getSearchList.bind(this)
    this.handleDelConfirm = this.handleDelConfirm.bind(this)
    this.handleSearchAdvice = this.handleSearchAdvice.bind(this)
    this.handleDelClick = this.handleDelClick.bind(this)
  }
  componentDidMount() {
    $(document).click((event) => {
      let searchWrap = document.getElementById("searchWrapAdvice");   // 搜索按钮
      let searchOption = document.getElementById("searchOption");   // 搜索列表
      let inspectFill = document.getElementById("inspectFill");         // 公共填写单
      const {refreshScroller} = this.props
      refreshScroller()&&refreshScroller().refresh();    //点开搜索弹窗更新滚动条，
      let _del = $('#delBox')[0];       // 删除弹窗  
      let _impClose = $('#impClose')[0];         // 导入删除按钮
      let _addClose = $('#addClose')[0];         // 添加删除按钮
      let _closeTil = $('#delTit')[0];   // 弹窗标题
      if (searchOption&&!this.isBar) {//onMousedown的目标为滚动条时，添加弹窗不关闭
        if (searchOption != event.target && searchWrap != event.target && searchWrap != event.target.parentNode && !$.contains(searchOption, event.target)) { // Mark 1
          this.setState({ show: false },()=>{
            this.props.setHighter(80)
            setTimeout(function(){
              refreshScroller()&&refreshScroller().scrollBottom();
            },100);
          });
        }
      }
      if (inspectFill&&!this.isBar) {//onMousedown的目标为滚动条时，子项弹窗不关闭
        if ($(event.target).attr('id') != "getSureTime"&&event.target.getAttribute('data-flg') != 'current' && inspectFill != event.target && !$.contains(inspectFill, event.target)) { // Mark 1
          if(this.state.showFill){
            this.props.setHighter(80)
          }
          this.setState({ showFill: false, date: false });
        }
      }

      if (_del&&!this.isBar) {//onMousedown的目标为滚动条时，删除弹窗不关闭
        if (!event.target.isEqualNode(_impClose) && !event.target.isEqualNode(_addClose) && !event.target.isEqualNode(_del) && event.target.parentNode != _del && !event.target.isEqualNode(_closeTil)) {
          this.setState({
            id: null,
            impId: null
          })
        }
      }
    });
  }
  handleDelConfirm() {//弹窗确定
    const { delPartItem, handleCloseExcel, handlePush } = this.props;
    const { type, id, impId } = this.state;
    if (type == 1) {
      delPartItem(id)
    } else if (type == 2) {
      handleCloseExcel(impId)
    }
    Notify.success("删除成功");
    handlePush && handlePush({mode:8});       //右侧推送
  }
  handleDelClick(type, time) {
    this.setState({
      type: type,
      time: time,
      impId: null
    })
  }
  handleSearchAdvice(e) {
    let tmpShow = this.state.show;
    const { handlePush } = this.props;
    this.setState({ show: !tmpShow, pageTop: getPageCoordinate(e).boxTop })
    // e.stopPropagation();
    if(tmpShow){
      this.props.setHighter(80)
    }else{
      this.props.detailClick(5)
      handlePush && handlePush({mode:8});       //右侧推送
      setPosition(e,"#searchOption",this.props.setHighter)
    }
  }
  handleSign(item,idx){
    const { handleSign,handlePush } = this.props;
    handleSign(item,idx)
    handlePush && handlePush({mode:8});       //右侧推送
  }
  getSearchList(list) {//搜索列表
    return <ul className={`${styles.searchLiUl} ${styles.searchIsp}`} style={{height:'205px',width:'302px',overflow:'auto'}}>
      {
        list && list.map((item, idx) => {
          return <li key={idx}
            className={styles.searchLi}
            title={item.uniqueName}
            onClick={() => {
              this.props.setHighter(80)
              this.handleSign(item, idx, 'search');
              this.setState({ show: false })
            }}
          >
            {item.uniqueName}
          </li>
        })
      }
      </ul>;
  }
  render() {
    const {labelListBlood,setHighter,refreshScroller,checkOnOff, getInfomation,setTipValue, handleChangeValue,labelListSmall,inspectList, inspectVal, list, labelListBig, windowHeight, windowWidth,detailClick, handleLabelSub, handleClear, handleConfirm, fillActive, getExcelDataList, handleCloseExcel, handlePush,handleDelConfirm } = this.props;
    const { tmpId, tmpIdx, time, pageTop, impId } = this.state;
    const contStyle={
      opacity:'0.4',
      right:'0',
      top:'1px',
      zIndex:'15',
      width:'14px',
      background:'#f1f1f1'};
    return (
      <div className={styles.wrapper}>
        <div className={styles.check}>
          
          <ul className={styles.labelWrap} >
            {
              labelListBig && labelListBig.map((item, idx) => {
                return <SlidePic
                  item={item}
                  checkOnOff={checkOnOff}
                  time={time}
                  handlePush={handlePush}
                  handleDelClick={this.handleDelClick}
                  setTipValue={setTipValue}
                  handleDelConfirm={handleDelConfirm}
                ></SlidePic>
              })
            }
            {
              labelListSmall && labelListSmall.map((item, idx) => {
                return <SlidePic
                  item={item}
                  checkOnOff={checkOnOff}
                  time={time}
                  handlePush={handlePush}
                  handleDelClick={this.handleDelClick}
                  setTipValue={setTipValue}
                  handleDelConfirm={handleDelConfirm}
                ></SlidePic>
              })
            }
            {
              labelListBlood && labelListBlood.map((item, idx) => {
                return <SlidePic
                  item={item}
                  checkOnOff={checkOnOff}
                  time={time}
                  handlePush={handlePush}
                  handleDelClick={this.handleDelClick}
                  setTipValue={setTipValue}
                  handleDelConfirm={handleDelConfirm}
                ></SlidePic>
              })
            }
          </ul>
        </div>
        <div style={{ position: "relative", clear: "both", top: "-2px" }}>
          <Add showText="添加医嘱" handleClick={(e) => this.handleSearchAdvice(e)} id="searchWrapAdvice" />
          {this.state.show ? <SearchOption searchType="2" detailClick={detailClick} windowHeight={windowHeight} height={280} refreshScroller={refreshScroller} pageTop={pageTop} handleChangeValue={handleChangeValue} visible={true}>
            {list && list.length > 0 ? this.getSearchList(list) : (inspectVal == '' ? '' : <p style={{ padding: '5px 136px', color: '#bfbfbf' }}>暂无筛选项</p>)}
          </SearchOption> : ''}
        </div>
      </div>
    )
  }
}

export default AddNewInspect;