import styles from './index.less';
import PartSec from './PartSec';
import PartTrd from './PartTrd';
import {windowEventHandler,getWindowInnerHeight} from '@utils/tools'

class EmergencyProcedure extends React.Component {
  constructor(props){
    super(props);
    this.$cont = React.createRef();
    this.state = {
      secShow:true,
      trdShow:false,
      trdNum:'',
      num:'',
      back:true,
      resback:true,
    }
    this.makeSureWar = this.makeSureWar.bind(this)
    this.makeSureCom = this.makeSureCom.bind(this)
  }
  componentDidMount(){
    const height = getWindowInnerHeight()-144;
    this.$cont.current.style.height = height+"px";
    windowEventHandler('resize', ()=>{
      if(this.$cont.current){
        const height = getWindowInnerHeight()-144;
        this.$cont.current.style.height = height+"px";
      }
    });
  }
  componentWillReceiveProps(nextState){
    if(nextState.idx != this.props.idx){
      this.setState({trdShow:false})
    }
  }
  makeSureWar(num){
    this.setState({
      trdNum:num
    })
  }
  makeSureCom(link,flg,num,back){
    const {setDataIdx,idx} = this.props
    if(idx == 0){
      if(link){
        setDataIdx(link)
        this.setState({
          trdShow:false
        })
      }else{
        this.setState({
          trdShow:flg,
          num:num
        })
      }
    }else if(idx == 2){
      this.setState({
        trdShow:flg,
        num:num,
        back:back
      })
    }else if(idx == 3){
      this.setState({
        trdShow:flg,
        num:num,
        resback:true,
        resback:back
      })
    }else if(idx == 5){
      this.setState({
        trdShow:flg,
        num:num
      })
    }else if(idx == 4){
      this.setState({
        trdShow:flg,
        num:num
      })
    }
  }
  render(){
    const {data,idx} = this.props
    const {makeSureCom,makeSureWar} = this
    const {secShow,trdShow,num,trdNum,back,resback} = this.state
    return <div className={styles.emergencyParts} ref={this.$cont}>
      <div className={`${styles.partFst} ${styles.partPub}`}>
        <p>步骤1</p>
        <h4>{data.step1.checks}</h4>
      </div>
      {secShow?<PartSec idx={idx} data={data.step2} resback={resback} reback={back} makeSureCom={makeSureCom} makeSureWar={makeSureWar}></PartSec>:null}
      {trdShow?<PartTrd idx={idx} num={num} trdNum={trdNum} makeSureCom={this.makeSureCom}></PartTrd>:null}
    </div>
  }
}

export default EmergencyProcedure;