import React, { Component } from "react";
import styles from "./index.less";
import { normalVal,timestampToTime } from '@utils/tools';
import { InspectCommon, Calendar} from '@commonComp';
import slideUp from "@common/images/slide-up.png";
import slideDown from "@common/images/slide-down.png";
import date1 from '../img/date1.png';
import close from '../img/close.png';
class SlideSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show:false
    };
    this.toTime = this.toTime.bind(this)
    this.handleSlide = this.handleSlide.bind(this)
  }
  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
    })
  }
  render() {
    const {handleConfirm,changeActivePart,handleDelClick,getItemList,date,item,idx,handleFillShow,showDetails,handleLabelSub,showFill,changeShowFill,handlePush,dateTime,currentIdx,currentData,fillActive,handleShowDate,handleChangeDate} = this.props;
    const {show} = this.state;
    return (
      <li key={item.questionId} className={styles.slideLi}> 
        {
            // 标签，血常规。。
            item.show ?
            <p className={styles.staticTagActive}>
                <span data-flg="current" style={{color:"#000"}} onClick={(e) => { handleLabelSub(e, item.questionId,idx); handleFillShow(e,idx) }}>{item.name}</span>
            </p>:
            <p>
                <i data-flg="current" onClick={(e) => { handleLabelSub(e,item.questionId,idx); handleFillShow(e,idx) }}>{item.name}</i>
            </p>
        }
        {
            item.show ? 
                <table className={styles.table}>
                    {
                        show?(item.details.map((val)=>{
                            if(val.value && val.value != ''){
                                return <tr>
                                    <td style={{width:'30%'}}>{val.name}</td>
                                    {showDetails(val)}
                                    <td style={{width:'25%'}}>
                                        {normalVal(val.minValue,val.maxValue)}
                                    </td>
                                    <td style={{width:'25%'}}>{'化验时间:'+item.time}</td>
                                </tr>
                            }
                        })):(item.details.map((val,num)=>{
                          if(val.value && val.value != '' && num < 4 ){
                              return <tr>
                                  <td style={{width:'30%'}}>{val.name}</td>
                                  {showDetails(val)}
                                  <td style={{width:'25%'}}>
                                      {normalVal(val.minValue,val.maxValue)}
                                  </td>
                                  <td style={{width:'25%'}}>{'化验时间:'+item.time}</td>
                              </tr>
                          }
                      }))
                    }
                </table>:null
        }
        {
          item.details && item.details.length > 5 ?  
          <div className={styles.slides} onClick={this.handleSlide}>
              <span>{show ?'收起':'展开'}</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"}} src={date1} alt="" onClick={handleShowDate}/>
                            <p style={{position:"absolute",right:"38px",top:"4px",lineHeight:"28px"}}>
                                {
                                  dateTime
                                }
                            </p>
                            <div style={{display:date?"block":"none",position:"relative"}}>
                                {/* 日期组件 */}
                                <Calendar isShow={true} handleChange={handleChangeDate}></Calendar>
                            </div>
                        </div>
                            {/* 填写单内容显示 */}
                            { getItemList() }
                    </InspectCommon>
                : null
            }
        </div>
        <img className={styles.partDel} src={close} alt="删除项" onClick={()=>{handleDelClick(1,idx)}}/>
    </li>
    );
  }
}
export default SlideSelect;