newICSS/src/components/PatInfo/index.jsx

import React, { Component } from "react";
import style from "./index.less";
import Select from './Select/index'
import { timesYMDTime, timestampToTime} from '@utils/tools';
import config from '@config/index';
import Notify from '@commonComp/Notify';
import { getHospitalInfo } from '@store/async-actions/historyTemplates';
import store from '@store';
import { embedPush } from '../../store/async-actions/pushMessage'
class PatInfo extends Component {
  constructor(props){
    super(props)
    this.state ={
      patientInfo: [
        {
          label: 'patientIdNo',
          id: 'patientIdNo',
          value: '330127198912311234',
          title: '卡号',
          maxlength: 50
        },
        {
          label: 'patientName',
          id: 'patientName',
          value: '王明明',
          title: '姓名',
          maxlength: 50
        },
        {
          label: 'patientAge',
          id: 'patientAge',
          value: '50',
          title: '年龄',
          maxlength: 11
        },
        {
          label: 'patientSex',
          id: 'patientSex',
          value: 2,
          title: '性别',
          maxlength: 11
        },
        {
          label: 'systemTime',
          id: 'systemTime',
          // value: timesYMDTime(new Date().getTime()),
          value: timestampToTime(new Date().getTime()),
          title: '就诊时间',
          maxlength: 100
        },
        {
          label: 'hospitalDeptName',
          id: 'hospitalDeptName',
          value: '全科',
          title: '科室',
          maxlength: 50
        },
        // {
        //   label: 'doctorName',
        //   id: 'doctorName',
        //   value: '付医生',
        //   title: '医生',
        //   maxlength: 50
        // },
        {
          label: 'doctorName',
          id: 'doctorName',
          value: '医师',
          title: '医生职称',
          maxlength: 50
        },
        {
          label: 'recordId',
          id: 'recordId',
          value: '4332',
          title: '门诊号',
          maxlength: 50
        }

      ],
      timer: null,
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleSexChange = this.handleSexChange.bind(this)
    this.inputOnFocus = this.inputOnFocus.bind(this)
  }
  componentWillMount() {
    const { getMessage, initPatInfoData } = this.props;
    getMessage && getMessage()
    initPatInfoData && initPatInfoData(this.state.patientInfo)
    store.dispatch(getHospitalInfo())
    // console.log(timesYMDTime(new Date().getTime()),'电脑时间');

  }
  componentWillReceiveProps(nextProps){
    // console.log(nextProps,'nextProps');
    const { patInfoData } = nextProps.patInfo
    this.setState({
      patientInfo:patInfoData
    })
  }

  handleChange(e){
    const tempTimer = this.state.timer
    const { initPatInfoData } = this.props;    
    let { patientInfo } = this.state;
    let newInfo = Object.assign([], patientInfo);
    let patientItem = newInfo.find(item =>{
      return item.id === e.target.id
    })      
    // if (patientItem.id === 'patientAge'){
    //   let temp = Math.round(e.target.value.replace(/[^\d\.]+/, ''))
    //   if (isNaN(temp)){
    //     patientItem.value = 50
    //     Notify.info('请输入正确的年龄')
    //     return 
    //   }else {
    //     patientItem.value = temp
    //   }
    // } else {
    //   patientItem.value = e.target.value;
    // }
    patientItem.value = e.target.value;  // 20201014 取消年龄格式限制 lcq
    if (patientItem.id === 'patientAge' && +patientItem.value > 200) {
      Notify.info('年龄不能超过200')
      // return false
    }
    this.setState({
      patientInfo: newInfo
    })
    initPatInfoData && initPatInfoData(newInfo)
    // 年龄/科室改变时,默认延迟推送

    if (patientItem.id === 'patientAge' || patientItem.id === 'hospitalDeptName') {
      clearTimeout(tempTimer)
      let timer =setTimeout(() => {
        store.dispatch(embedPush({
          action: "info",
          mode: 1
        }))
        clearTimeout(tempTimer)
      }, config.delayPushTime);
      this.setState({
        timer
      })     
    } 
  }

  handleSexChange (item){
    const { initPatInfoData } = this.props;   
    let { patientInfo } = this.state;
    let newInfo = Object.assign([], patientInfo);
    newInfo[3] = item
    this.setState({
      patientInfo: 'newInfo'
    })
    initPatInfoData && initPatInfoData(newInfo)
  }

  // 获取焦点推送
  inputOnFocus(){
    store.dispatch(embedPush({
      action: "info",
      mode: 1
    }))
  }

  render(){
    const {message} = this.props.patInfo;
     return (
       <div className={style["infoContainer"]}>         
         {
            this.state.patientInfo.map((item, index) => {
              return (
                <div className={style["infoItem"]} key={item.id}>
                  <label for={item.label}>{item.title}：</label>
                  {item.id === 'patientSex' && (
                    <Select
                      default={this.state.patientInfo[3]}
                      label=""
                      placeholder="请选择"
                      onChange={(item) => this.handleSexChange(item)}
                    ></Select>
                  )}
                  {item.id === 'patientAge' && (<input id={item.id} type="text" autocomplete="off" maxlength={11} value={item.value} onChange={this.handleChange} onFocus={this.inputOnFocus}/>)}
                  {item.id === 'systemTime' && (<input id={item.id} type="text" autocomplete="off" disabled value={item.value.split(' ')[0]} onChange={this.handleChange} onFocus={this.inputOnFocus}/>)}
                  {item.id !== 'patientAge' && item.id !== 'patientSex' && item.id !== 'systemTime' && (<input id={item.id} type="text" maxlength={50} autocomplete="off" value={item.value} onChange={this.handleChange} onFocus={this.inputOnFocus}/>) }                  
                </div>
              )
            })
         }
       </div>

     );
  }
}

export default PatInfo;