newICSS/src/components/EmergencyProcedure/EmergencyModal/index.jsx

import styles from './index.less'
import small from '../img/small.png'
import EmergencyPart from '../EmergencyPart'
import pic from '../img/pic.png'
import pic1 from '../img/pic1.png'
import pic2 from '../img/pic2.png'
import pic3 from '../img/pic3.png'
import pic4 from '../img/pic4.png'
import pic5 from '../img/pic5.png'
import $ from 'jquery'
import { dragBox } from '@utils/drag';
import close from '@common/images/icon_close.png';

class EmergencyModal extends React.Component{
  constructor(props){
    super(props)
    this.state={
      show:false,
      imgShow:false,
      diseaseName:[
        '','心包积液','气胸','肺栓塞','急性冠脉综合征','主动脉夹层'
      ]
    }
    this.handleImgShow=this.handleImgShow.bind(this)
  }
  componentDidMount() {
    $(document).click((event) => {
      let modalTopR = document.getElementById("modalTopR")
      let nameLis = document.getElementById("nameLis")
      if (nameLis) {
        if (modalTopR != event.target && !nameLis.contains(event.target)) {
          this.setState({ show: false });
        }
      }
    });
  }
  handleSlideShow(){
    let flg = this.state.show
    this.setState({show:!flg})
  }
  setDataIdx(num,flg){
    this.setState({show:flg})
    this.props.setDataIdx(num)
  }
  handleImgShow(flg){
    this.setState({imgShow:flg},()=>{
      if(flg){
        dragBox('dragModalWrap','dragModalTitle','add')
      }else{
        dragBox('dragModalWrap','dragModalTitle','del')
      }
    })
  }
  render(){
    const {data,handleShow,setDataIdx,idx,show} = this.props;
    return <div className={styles.emergencyProdure} style={{display:show?'block':'none'}}>
      <div className={`${styles.modalTop} clearfix`}>
          <div className={styles.modalTopL}>
            <img onClick={()=>handleShow(false)} src={small} alt=""/>
            <p className="ellipsOver">{data.emergencyname}</p>
            {
              idx == 0?null:<img src={pic} onClick={()=>{this.handleImgShow(true)}} alt=""/>
            }
            {
              this.state.imgShow?<React.Fragment>
                <div className={styles.imageModalWrap} onClick={()=>{this.handleImgShow(false)}}></div>
                <div className={styles.imageModal} id="dragModalWrap">
                  <div id="dragModalTitle" className={`${styles.dragImgWrap} drag-title`}>
                    {data.emergencyname}
                  </div>
                  <img className={styles.emergencyImg} src={idx==1?pic1:idx==2?pic2:idx==3?pic3:idx==4?pic4:idx==5?pic5:null}/>
                  <img className={styles.img} src={close} onClick={()=>{this.handleImgShow(false)}} />
                </div>
              </React.Fragment>:null
            }
          </div>
          <div className={styles.modalTopR} onClick={()=>{this.handleSlideShow()}} id="modalTopR">其他危重症状</div>
          {
            this.state.show?<ul className={styles.nameLis} id="nameLis">
              <i></i>
              {
                this.state.diseaseName.map((item,index)=>{
                  return <li className={idx == index?styles.selectColor:null} style={{display:item?'inline-block':'none'}} onClick={()=>{this.setDataIdx(index,false)}}>
                    {item}
                  </li>
                })
              }
            </ul>:null
          }
      </div>
      <div className={styles.modalMain}>
        <div className={styles.part}>
          <EmergencyPart idx={idx} setDataIdx={setDataIdx} data={data}></EmergencyPart>
        </div>
      </div>
    </div>
  }
}

export default EmergencyModal;