import React, { Component } from "react";
import styles from "./index.less";
import { normalVal, timestampToTime, getStatusImg,setFontColorSize } 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} ${styles.selectTagSpan}`}>
            <span className={`${styles.menus} ${setFontColorSize(2)}`}>{item.menus}</span>
            <span className={styles.imgInfo} title='点击i图标可查看详细说明' onClick={() => getInfomation({ name: item.lisExcelItem[0].uniquemealName || '', type: 12, position: 1 })}></span>
          </span>
        </span>
        <table className={`${styles.table} ${setFontColorSize(2)}`}>
          {show ? (item.lisExcelItem && item.lisExcelItem.map((value, idx) => {
            return <tr>
              <td style={{ width: '30%' }}>
                <span className={styles.tagSpan}>
                  {value.itemName}
                  <span className={styles.imgInfo1} title='点击i图标可查看详细说明' 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.imgInfo1} title='点击i图标可查看详细说明' 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} ${setFontColorSize(2)}`} 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;