newICSS/src/components/PreInIcss/SliddleTgl/index.jsx

import React, { Component } from "react";
import RotateImg from "../RotateImg";
import style from "../index.less";
import mimi from '@common/images/mimi.png';
import down from "@common/images/show.png";
import up from "@common/images/close.png";
import {imgDragMove} from '@utils/drag';

class SlideTgl extends Component {
  constructor(props){
    super(props);
    this.state={
      height:"",
      slide:false,//展开收起显示隐藏
      slideToggle:false,
      text:'展开',
      tgl:true,//展开收起文本设置
      imgList:[],
      idx:'',
      imgShow:false
    }
    this.slideDown = this.slideDown.bind(this)
    this.prePrecImg = this.prePrecImg .bind(this)
    this.handleClose = this.handleClose .bind(this)
  }
  componentDidMount() {
    setTimeout(() => {
      let height = this.refs.current.getDOMNode().offsetHeight;
      this.setState({
        height:height,
        slide:height>24?true:false,
        slideToggle:height>24?true:false
      })
    }, 0);
  }
  slideDown(flg){
    this.setState({
      tgl:flg,
      slide:flg
    })
  }
  prePrecImg(imgs,idx,imgShow){
    let imgLis = imgs&&imgs||[];
    for(let i = 0;i < imgLis.length;i++){
      let size = imgLis[i].originalImage.split('?')[1].split('&');
      let width = size[0].split('=')[1];
      let height = size[1].split('=')[1];
      imgLis[i].width = width;
      imgLis[i].height = height;
    }
    this.setState({
      imgList:imgLis,
      idx,
      imgShow
    })
  }
  handleClose(){
    imgDragMove('del')
    this.props.setMove(false)
    this.setState({
      imgShow:false
    })
  }
  render() {
    const { item,showPre,isMove,setMove,windowHeight } = this.props;
    return <li>
    <div className={style.current} ref="current" style={{height:this.state.slide?'18px':'auto'}}>
      <p className={style.curStyle}><span>现病史：</span>{item.detail.xbs}</p>
      {item.detail.qts?<div className={style.slideTgl}><span>其他史：</span>{item.detail.qts}</div>:null}
      {item.detail.supplement?<div className={style.slideTgl}><span>补充内容：</span>{item.detail.supplement}</div>:null}
      {item.detail.imageList?<p className={style.last}>最近一次报告：</p>:null}
      {item.detail.imageList?<div className={`${style.preImg} clearfix`}>
        {
          item.detail&&item.detail.imageList.map((part,idx)=>{
            return <div className={style.img}>
              <img className={style.report} src={part.originalImage} alt=""/>
              <img className={style.mimi} onClick={()=>this.prePrecImg(item.detail.imageList,idx,true)} src={mimi} alt=""/>
            </div>
          })
        }
      </div>:null}
      {this.state.slideToggle&&!this.state.slide?<p className={style.slidesx} onClick={()=>this.slideDown(true)}>
        收起
        <img src={up} alt="收起"/>  
      </p>:null}
    </div>
      {this.state.slideToggle&&this.state.slide?<p className={style.slidesx} onClick={()=>{this.slideDown(false)}}>
        展开
        <img src={down} alt="展开"/>
      </p>:null}
      <div className={style.pushPre} onClick={()=>showPre(item)}>引用</div>
      {this.state.imgShow?<RotateImg
        imgShow={this.state.imgShow}
        imgLis={this.state.imgList}
        isMove = {isMove}
        windowHeight = {windowHeight}
        setMove = {setMove}
        handleClose={this.handleClose}
        idx={this.state.idx}></RotateImg>:null}
  </li>
  }
}

export default SlideTgl;