import styles from '../EmergencyModal/index.less'
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 close from '@common/images/icon_close.png';
import ReactDom from "react-dom";

class ImgView extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    const {name,idx,handleImgShow} = this.props;
    const domNode = document.getElementById('root');
    return ReactDom.createPortal(<React.Fragment>
            <div className={styles.imageModalWrap} onClick={()=>{handleImgShow(false)}}></div>
            <div className={styles.imageModal} id="dragModalWrap">
              <div id="dragModalTitle" className={`${styles.dragImgWrap} drag-title`}>
                {name}
              </div>
              <img id="preImg" 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={()=>{handleImgShow(false)}} />
            </div>
          </React.Fragment>,domNode)
  }
}

export default ImgView;