newICSS/src/components/AddInspect/SlideExcel/index.jsx

import React, { Component } from "react";
import styles from "./index.less";
import { normalVal,timestampToTime,getStatusImg } from '@utils/tools';
import slideUp from "@common/images/slide-up.png";
import slideDown from "@common/images/slide-down.png";
class SlideExcel 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 {items,item,idx,getInfomation,dateTime} = this.props;
    const {show} = this.state;
    return (
      <li className={`${styles.excelDataLis} clearfix`} style={{border:items.lisExcelRes.length-1 == idx? 0:''}}>
          <span className={styles.excelDataTitle}>
              <span className={styles.tagSpan}>
                {item.menus}
                <span className={styles.imgInfo} onClick={()=>getInfomation({name:item.lisExcelItem[0].uniquemealName || '',type:12, position: 1})}></span>
              </span>
          </span>
          <table className={styles.table}>
             {  show ? (item.lisExcelItem && item.lisExcelItem.map((value,idx)=>{
                  return <tr>
                      <td style={{width:'30%'}}>
                        <span className={styles.tagSpan}>
                          {value.itemName}
                          <span className={styles.imgInfo} onClick={()=>getInfomation({name: value.uniqueName || '',type:12, position: 1})}></span>
                        </span>
                      </td>
                      <td style={{width:'20%'}}>
                        {
                          getStatusImg(value.type,value.value,1)
                        }
                        {value.unit}</td>
                      <td style={{width:'25%'}}>
                          {normalVal(value.min,value.max)}
                      </td>
                      <td style={{width:'25%'}}>{value.time == ''?('导入时间: '+dateTime):'化验时间: '+this.toTime(value.time)}</td>
                  </tr>
                })):(item.lisExcelItem && item.lisExcelItem.map((value,idx)=>{
                  if(idx < 4){
                    return <tr>
                        <td style={{width:'30%'}}>
                          <span className={styles.tagSpan}>
                            {value.itemName}
                            <span className={styles.imgInfo} onClick={()=>getInfomation({name: value.uniqueName || '',type:12, position: 1})}></span>
                          </span>
                        </td>
                        <td style={{width:'20%'}}>
                          {
                            getStatusImg(value.type,value.value,1)
                          } 
                          {value.unit}</td>
                        <td style={{width:'25%'}}>
                            {normalVal(value.min,value.max)}
                        </td>
                        <td style={{width:'25%'}}>{value.time == ''?('导入时间: '+dateTime):'化验时间: '+this.toTime(value.time)}</td>
                    </tr>
                  }
                }))
            }
        </table>
        {
          item.lisExcelItem && item.lisExcelItem.length > 5 ?
          <div className={styles.slides} onClick={this.handleSlide}>
              {
                show ? <span>收起</span> :<span>剩余<span className={styles.num}>{item.lisExcelItem.length-4}</span>项</span>
              }
              <img src={show ?slideUp:slideDown} alt=""/>
          </div>:null
        }
      </li>
    );
  }
}
export default SlideExcel;