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

import React, { Component } from "react";
import styles from "./index.less";
import { normalVal,timestampToTime,getPageCoordinate,setPosition } from '@utils/tools';
import { InspectCommon, Calendar,DelToast} from '@commonComp';
import slideUp from "@common/images/slide-up.png";
import slideDown from "@common/images/slide-down.png";
import $ from 'jquery';
import date1 from '../img/date1.png';
import ScrollArea from 'react-scrollbar';

class SlideSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show:false,
      activeInd:false,
      activeName:'',
    };
    this.toTime = this.toTime.bind(this);
    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.handleLabelSub = this.handleLabelSub.bind(this);
  }
  handleChangeDate(date) {
    // console.log(date,'外')
  }
  componentDidMount() {
    $(document).click((event) => {
      let inspectToggleDate = document.getElementById("inspectToggleDate")
      let timeIcon = document.getElementById("timeIcon")
      let calendarDate = document.getElementById("calendarDate")
      if (calendarDate) {
        if (inspectToggleDate != event.target && timeIcon != event.target && !calendarDate.contains(event.target)) {
          this.props.handleShowDate();
        }
      }
    });
  }
  toTime(time){
    let tmpTim = time.split(',').join('')-0
    if(time && tmpTim.toString() != 'NaN'){
      let date = new Date('1900-01-01');
      let dateTim = date.getTime();
      let times = (tmpTim-2)*24*60*60*1000;
      let result = timestampToTime(dateTim+times).split(' ')[0]
      return result;
    }else{
      return time;
    }
  }
  handleSlide(){
    let tmpShow = this.state.show
    this.setState({
      show:!tmpShow
    })
  }
  handleDel(){
    const {handleDelClick,idx,item} = this.props;
    this.setState({
      activeInd:true,
      activeName:item.name
    })
    handleDelClick&&handleDelClick(1,idx);
  }
  handleCancel(){
    this.setState({
      activeInd:false,
      activeName:''
    })
  }
  delConfirm(){
    const {handleDelConfirm} = this.props;
    handleDelConfirm&&handleDelConfirm();
    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);
    })*/
  }
  render() {
    const {windowWidth,getInfomation,handleConfirm,changeActivePart,getItemList,date,item,idx,showDetails,showFill,changeShowFill,handlePush,dateTime,currentIdx,currentData,fillActive,handleShowDate,showToast} = this.props;
    const {show,activeInd,activeName} = this.state;
    let numPlus = 0,numPlus1 = 0;
    let staticTime = {}
    if(dateTime){
      let tmp1 = dateTime.split(' ')[0].split('-')
      let tmp2 = (dateTime).split(' ').length>1&&(dateTime).split(' ')[1].split(':')
      staticTime = {
        year: tmp1[0]-0,
        month: tmp1[1]-0,
        day: tmp1[2]-0,
        hour: tmp2[0],
        minute: tmp2[1],
        second: tmp2[2]
      }
    }
    const contStyle={
      opacity:'0.4',
      right:'0',
      top:'6px',
      zIndex:'15',
      width:'14px',
      background:'#f1f1f1'};
    const barStyle={background:'#777',width:'100%'};
    const listLen = currentData.details&&currentData.details.length;
    const stopScroll =(windowWidth<1300&&listLen>12)||(windowWidth>1299&&listLen>24);
    return (
      <li key={item.questionId} className={styles.slideLi}> 
        {
            // 标签，血常规。。
            item.show ?
            <p className={styles.staticTagActive}>
                <span className={styles.tagSpan} data-flg="current" style={{color:"#000"}} onClick={(e)=>this.handleLabelSub(e,item.questionId,idx)}>
                  {item.name}
                  <span className={styles.imgInfo1} title='点击i图标可查看详细说明' onClick={()=>getInfomation({name:item.uniqueName || '', position: 1, type: 12})}></span>
                </span>
            </p>:
            <p >
                <i className={styles.tagSpan} data-flg="current" onClick={(e)=>this.handleLabelSub(e,item.questionId,idx)}>
                  {item.name}
                  <span className={styles.imgInfo} title='点击i图标可查看详细说明' onClick={()=>getInfomation({name:item.uniqueName || '', position: 1, type: 12})}></span>
                </i>
            </p>
        }

        {
          item.details && item.details.map((val)=>{
            if(val.value && val.value != ''){
              numPlus = ++numPlus
            }
          })
        }
        {
            item.show ?
                <table className={styles.table}>
                    {
                        show?(item.details.map((val)=>{
                            if(val.value && val.value != ''){
                                return <tr>
                                    <td style={{width:'30%'}}>
                                      <span className={styles.tagSpan}>
                                        {val.name}
                                        <span className={styles.imgInfo1} title='点击i图标可查看详细说明' onClick={()=>getInfomation({name:val.uniqueName || '', position: 1, type: 12})}></span>                                        
                                      </span>
                                    </td>
                                    {showDetails(val)}
                                    <td style={{width:'25%'}}>
                                      {val.questionDetailList.length > 0?'':normalVal(val.minValue,val.maxValue)}
                                    </td>
                                    <td style={{width:'25%'}}>{'化验时间:'+item.time}</td>
                                </tr>
                            }
                        })):(item.details.map((val)=>{
                          if(val.value && val.value != '' ){
                              ++numPlus1;
                              if(numPlus1 < 5){
                                return <tr>
                                    <td style={{width:'30%'}}>
                                      <span className={styles.tagSpan}>
                                        {val.name}
                                        <span className={styles.imgInfo1} title='点击i图标可查看详细说明' onClick={()=>getInfomation({name:val.uniqueName || '', position: 1, type: 12})}></span>
                                      </span>
                                    </td>
                                    {showDetails(val)}
                                    <td style={{width:'25%'}}>
                                        {val.questionDetailList.length > 0?'':normalVal(val.minValue,val.maxValue)}
                                    </td>
                                    <td style={{width:'25%'}}>{'化验时间:'+item.time}</td>
                                </tr>
                              }
                          }
                      }))
                    }
                </table>:null
        }
        {
          numPlus > 4 ?  
          <div className={styles.slides} onClick={this.handleSlide}>
              {
                show ? <span>收起</span> :<span>剩余<span className={styles.num}>{numPlus-4}</span>项</span>
              }
              <img src={show ?slideUp:slideDown} alt=""/>
          </div>:null
        }
        <div className={styles.searchResult}>
            {
                showFill && fillActive.id == item.id && idx == currentIdx ?
                    <InspectCommon
                        showFill={showFill}
                        handleClear={(e)=>{
                            changeActivePart('','',true)
                        }}
                        handleConfirm={(e)=>{
                            if(JSON.stringify(currentData) == '{}'){
                                handleConfirm(e,idx,dateTime,fillActive);
                            }else{
                                handleConfirm(e,idx,dateTime,currentData);
                            }
                            changeShowFill()
                            handlePush&&handlePush();     //右侧推送
                        }}
                    >
                    
                        <div className={styles.searchResultT}>
                            <img style={{"position":"absolute","top":"8px","right":"8px",cursor:"pointer"}} onClick={handleShowDate} src={date1} alt="" id="inspectToggleDate"/>
                            <p style={{position:"absolute",right:"25px",top:"4px",lineHeight:"28px",cursor:"pointer",paddingRight:"10px"}} onClick={handleShowDate} id="timeIcon">
                                {
                                  dateTime
                                }
                            </p>
                            <div style={{display:date?"block":"none",position:"relative"}}>
                                {/* 日期组件 */}
                                {
                                  date?<Calendar timeLis={staticTime} isShow={true} timeSure={this.timeSure} needTime={true} sure={true} handleChange={this.handleChangeDate}></Calendar>:null
                                }
                                {/* <Calendar timeLis={staticTime} isShow={true} timeSure={this.timeSure} needTime={true} sure={true} handleChange={handleChangeDate}></Calendar> */}
                            </div>
                        </div>
                            {/* 填写单内容显示 */}
                      <ScrollArea speed={0.8}
                                  horizontal={false}
                                  stopScrollPropagation={stopScroll}
                                  style={{maxHeight:'358px'}}
                                  className={styles["area"]}
                                  verticalContainerStyle={contStyle}
                                  verticalScrollbarStyle={barStyle}
                                  contentClassName="content">
                            { getItemList() }
                      </ScrollArea>
                    </InspectCommon>
                : null
            }
        </div>
        {/*<img className={styles.partDel} src={close} alt="删除项" onClick={()=>{handleDelClick(1,idx)}}/>*/}
        <span id="addClose" className={styles.partDel} onClick={this.handleDel}></span>
        <DelToast show={showToast&&activeInd?true:false}
                    name={activeName} 
                    right={'-34px'}
                    top={'30px'}
                    cancel={this.handleCancel}
                    confirm={this.delConfirm}/>
    </li>
    );
  }
}
export default SlideSelect;