newICSS/src/components/Emergency/HisList/index.jsx

import React,{Component} from 'react';
import style from './index.less';
import empty from '@common/images/check-circle.png';
import check from '@common/images/check-right.png';
import date from '@common/images/date1.png';
import TimeInterval from '@components/TimeInterval';
import {getCurrentDate} from "@utils/tools";
/**
  科室病历列表
**/

class HisList extends Component {
  constructor(props){
    super(props);
    this.state = {
      select:[], //选中ids
      hasSecond:-1,
      all:false,
      index:0,
      startTime:getCurrentDate(false,'/')+' 00:00:00',
      endTime:getCurrentDate(false,'/')+' 23:59:59',
    }
    this.handleGetMore = this.handleGetMore.bind(this);
    this.handleSelect = this.handleSelect.bind(this);
    this.handleAll = this.handleAll.bind(this);
    this.handleDownload = this.handleDownload.bind(this);
    this.getStartTime = this.getStartTime.bind(this);
    this.getEndTime = this.getEndTime.bind(this);
  }
  getStartTime(date){
    this.setState({startTime:date});
    const {handleFilter} = this.props;
    const {endTime} = this.state;
    const obj = {
      startDate:date.replace(/\//g,'-'),
      endDate:endTime.replace(/\//g,'-'),
      flag:999 //自定义以区分筛选条件
    }
    handleFilter&&handleFilter(obj);
  }
  getEndTime(date){
    this.setState({endTime:date});
    const {handleFilter} = this.props;
    const {startTime} = this.state;
    const obj = {
      startDate:startTime.replace(/\//g,'-'),
      endDate:data.replace(/\//g,'-'),
      flag:999 //自定义以区分筛选条件
    }
    handleFilter&&handleFilter(obj);
  }
  handleFilter(flag){
    const {handleFilter} = this.props;
    this.setState({
      hasSecond:flag
    })
    const obj = {
      flag:flag
    }
    handleFilter&&handleFilter(obj);
  }

  handleGetMore(){
    const {getMore} = this.props;
    getMore&&getMore();
  }

  getClassName(id,ind){
    const {select,index} = this.state;
    if(select.indexOf(id) !=-1 || ind==index){
      return style['select-li']
    }
    return '';
  }

  handleSelect(e,id){
    e.stopPropagation();
    let {select} = this.state;
    if(select.indexOf(id)==-1){
      select.push(id);
    }else{
      select.splice(select.indexOf(id),1);
    }
    this.setState({
      select
    })
  }

  getIcon(id){
    const {select} = this.state;
    if(select.indexOf(id)==-1){
      return empty;
    }
    return check;
  }

  getAllIcon(){
    const {all,select} = this.state;
    const {data} = this.props;
    if(all || select.length==data.length&&select.length!=0){
      return check;
    }
    return empty;
  }

  handleAll(){
    const {data} = this.props;
    let {all} = this.state;
    let allIds = [];
    if(!all){
      data&&data.map((v,i)=>{
        allIds.push(v.inquiryId);
      })
    }
    this.setState({
      all:!all,
      select:allIds
    })
  }

  handleDetail(index){
    const {detail} = this.props;
    detail&&detail(index);
    this.setState({
      index:index
    })
  }

  handleDownload(){
    const { handleDownload } = this.props;
    const {select} = this.state;
    handleDownload&&handleDownload(select);
  }

  getExportStyle(){
    const {select} = this.state;
    if(select.length>0){
      return `${style['export']} ${style['exp-select']}`
    }
    return style['export'];
  }

  getList(){
    const { data } = this.props;
    let list = data&&data.map((v,i)=>{
      return <li className={this.getClassName(v.inquiryId,i)} key={v.inquiryId} onClick={this.handleDetail.bind(this,i)}>
        <p>{v.diagnose}</p>
        <p className={style['name']}>{v.doctorName} {'于'}{v.inquiryTime} {'保存病历'}</p>
        {v.diagnoseSecond?<div className={style['second']}>
          <p>{v.diagnoseSecond}{'（诊后添加）'}</p>
          <p className={style['name']}>{v.doctorNameSecond} {'于'}{v.inquiryTimeSecond} {'添加'}</p>
        </div>:''}
        <img src={this.getIcon(v.inquiryId)} className={style['check-box']} onClick={(e)=>this.handleSelect(e,v.inquiryId)}/>
      </li>
    })
    return list;
  }

  render(){
    const { data,total } = this.props;
    const { hasSecond } = this.state;
    return <div className={style['list-Box']}>
      <h2>本科室近期全部历史病历</h2>
      <div className={style['list-time']}>
        <img src={date} />
        <TimeInterval getStartTime={this.getStartTime} getEndTime={this.getEndTime}></TimeInterval>
      </div>
      <div className={style['filter-box']}>
        <span className={style['filter']}>筛选：</span>
        <span className={hasSecond==-1?`${style['condition']} ${style['select']}`:style['condition']} onClick={this.handleFilter.bind(this,-1)}>默认</span>
        <span className={hasSecond==1?`${style['condition']} ${style['select']}`:style['condition']} onClick={this.handleFilter.bind(this,1)}>有二次诊断</span>
        <span className={hasSecond==0?`${style['condition']} ${style['select']}`:style['condition']} onClick={this.handleFilter.bind(this,0)}>没有二次诊断</span>
      </div>
      <div className={style['list']}>
        <ul>
          {this.getList()}
        </ul>
        {total>data.length?<p className={style['more']} onClick={this.handleGetMore}>点击查看更多</p>:''}
      </div>
      <div className={style['all-box']}>
        <img src={this.getAllIcon()} className={style['check-all']} onClick={this.handleAll}/>
        <span onClick={this.handleAll}>全选</span>
        <span className={this.getExportStyle()} onClick={this.handleDownload}>导出已选数据</span>
      </div>
    </div>
  }
}

export default HisList;