newICSS/src/components/DiagnosticList/index.jsx

import React, { Component } from 'react';
import style from './index.less';
import del_icon from './img/delete.png'
import del_on from './img/delete-on.png'
import diagUp from './img/diagUp.png'
import diagDown from './img/diagDown.png'
import manageIcon from '@common/images/manage.png';
import { ConfirmModal, Message, ComplexModal, Footer } from '@commonComp';
import Notify from '@commonComp/Notify';
import Treat from '@containers/Treat'
import store from '@store';
import { initItemList, setInitHistory } from '@store/async-actions/historyTemplates';
import { pushAllDataList, inspectAndAssist, deepClone } from '@utils/tools';
import iconRadioDefault from '@common/images/icon-radio-default.png'
import iconRadioActive from '@common/images/icon-radio-active.png'
import AssessResult from '@containers/AssessResult';
import tableIcon from '@common/images/table.png';
import { CONFIRM_TYPE } from "@store/types/typeConfig";
import $ from "jquery";

class DiagnosticList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      delItem: {},
      treatTitle: '',
      activeHistory: -1,
      sign: -1,
      showAssess: false,
      assessId: '',
      disName: '',
      isAssessConfirm: false,
      radioVal: {},  //可能结果选择内容
      possible: {},  //可能结果
      hasOndel: false
    }
    this.deleteItem = this.deleteItem.bind(this);
    this.cancel = this.cancel.bind(this);
    this.close = this.close.bind(this);
    this.showTreat = this.showTreat.bind(this);
    this.handleClickDiag = this.handleClickDiag.bind(this);
    this.referRecord = this.referRecord.bind(this);
    this.noReferRecord = this.noReferRecord.bind(this);
    this.getHistoryCase = this.getHistoryCase.bind(this);
    this.closeHistoryCaseModal = this.closeHistoryCaseModal.bind(this);
    this.referCase = this.referCase.bind(this);
    this.handleSaveAssess = this.handleSaveAssess.bind(this);       //评估弹窗确定
    this.handleSavePossible = this.handleSavePossible.bind(this);
    this.onPrint = this.onPrint.bind(this);
  }
  onPrint() {
    let dom = $("#AssistResult");
    dom.jqprint({
      debug: false,
      importCSS: true,
      printContainer: true,
      operaSupport: false,
    });
  }
  upDiagnostic(index) {
    const { upDiagnostic } = this.props;
    upDiagnostic && upDiagnostic(index)
  }
  downDiagnostic(index) {
    const { downDiagnostic } = this.props;
    downDiagnostic && downDiagnostic(index)
  }
  deleteItem() {
    const { delItem } = this.state;
    const { delDiagnostic, delReact, delFollowUp } = this.props;
    delDiagnostic && delDiagnostic(delItem);
    delReact && delReact(delItem);
    delFollowUp && delFollowUp(delItem);
    this.setState({
      visible: false,
    })
    Notify.success('删除成功')
  }
  cancel() {
    this.setState({
      visible: false
    })
  }
  close() {
    this.setState({
      visible: false
    })
  }
  handleDeleteItem(item) {
    this.setState({
      visible: true,
      delItem: item,
    })
  }
  showTreat(item, index) {
    // item.treatIndex = index
    const { showTreat, getTreatResult } = this.props;
    getTreatResult && getTreatResult(item);
    // showTreat && showTreat();//添加loading，移到async-actions中
    this.setState({
      treatTitle: item.name
    })
  }
  handleClickDiag(item) {
    const { getTips } = this.props;
    // getTips && getTips(item);
    getTips && getTips({ id: item.id, type: 7 });
  }
  referRecord() {
    const { hideReferRecord, showHistoryCaseModal, chronicMagItem, hisTemplates, autoFillModules, typeConfig } = this.props
    hideReferRecord && hideReferRecord()
    // showHistoryCaseModal && showHistoryCaseModal()
    // store.dispatch(initItemList(chronicMagItem))
    initItemList(chronicMagItem).then((res) => {
      const result = res.data;
      if (result.code == 0 && result.data) {
        store.dispatch(setInitHistory(result.data));
        showHistoryCaseModal && showHistoryCaseModal();
      } else {
        if (typeConfig == 0) {
          Notify.info("暂无历史病历，已默认展示慢病相关内容");
          const timer = setTimeout(function () {
            autoFillModules && autoFillModules();
            clearTimeout(timer);
          }, 1000) //需求要求延时
        }
      }
    })
  }
  noReferRecord() {
    const { hideReferRecord, autoFillModules, typeConfig } = this.props
    hideReferRecord && hideReferRecord();
    if (typeConfig == 0) {//智能推送模式才自动填充
      autoFillModules && autoFillModules();
    }

  }
  referCase() {
    const { hideHistoryCaseModal, items, autoFillModules, typeConfig } = this.props
    const { sign } = this.state;
    hideHistoryCaseModal && hideHistoryCaseModal()
    if (this.state.activeHistory === -1 && typeConfig == 0) {//没有选择历史病例直接点确定
      Notify.info("未选择历史病历，已默认展示慢病相关内容");
      const timer = setTimeout(function () {
        autoFillModules && autoFillModules();
        clearTimeout(timer);
      }, 1000)
      return
    }
    let baseList = store.getState();

    let baseObj = items[this.state.activeHistory];
    // 切换模式
    if (sign != typeConfig) {
      store.dispatch({ type: CONFIRM_TYPE, confirmType: baseObj.sign });
    }
    pushAllDataList(baseObj.sign, 'push', baseObj, 'history')       //引用
    this.props.getBilling();
    this.setState({
      activeHistory: -1,
      sign: -1
    })
  }
  closeHistoryCaseModal() {
    const { hideHistoryCaseModal, autoFillModules, typeConfig } = this.props
    this.setState({
      activeHistory: -1,
      sign: -1
    })
    hideHistoryCaseModal && hideHistoryCaseModal()
    if (typeConfig == 0) {//智能推送模式才自动填充
      autoFillModules && autoFillModules();
    }
  }
  handleQuoteClick(item, index) {
    const { handleQuoteClick } = this.props
    // handleQuoteClick && handleQuoteClick(item)
    this.setState({
      activeHistory: index,
      sign: item.sign
    })
  }
  getHistoryCase() {
    const { items } = this.props
    return (<div className={style['history-info']}>
      {items.map((item, index) => {
        return <div onClick={this.handleQuoteClick.bind(this, item, index)} style={this.state.activeHistory === index ? { color: '#3B9ED0' } : ''}>
          <img src={this.state.activeHistory === index ? iconRadioActive : iconRadioDefault} />{item.diagnose + '（' + item.inquiryDate + '）'}
        </div>
      })}
    </div>)
  }
  showAssessFn(item) {
    if (item && item.id) {         //显示评估弹窗
      this.setState({
        showAssess: true,
        isAssessConfirm: false,
        assessId: item.id,
        disName: item.name
      });
    } else {          //关闭评估弹窗
      this.setState({
        showAssess: false,
        isAssessConfirm: false,
      });
    }
  }
  handleSavePossible(obj) {
    this.setState({
      possible: Object.assign({}, obj.possible),
      radioVal: Object.assign({}, obj.radioVal),//不设置radioVal只有最近一次选中的值
    })
  }
  handleSaveAssess() {
    this.setState({
      isAssessConfirm: true
    });
    const that = this;
    setTimeout(() => {
      that.setState({
        showAssess: false
      });
    });
  }
  componentWillReceiveProps(nextprops) {
    if (this.props.diagnosticStr != nextprops.diagnosticStr) {
      this.props.getBilling();
    }
    if (deepClone(nextprops.wholeResults) != deepClone(this.props.wholeResults)) {
      this.setState({
        radioVal: Object.assign({}, nextprops.wholeResults.radioVal),
        possible: Object.assign({}, nextprops.wholeResults.possible),
      })
    }
  }
  handleEnterDel() {
    this.setState({
      hasOndel: true
    })
  }
  handleLeaveDel() {
    this.setState({
      hasOndel: false
    })
  }
  render() {
    const { list, treatment, showReferRecord, showHistoryCase, chronicMagItem } = this.props;
    const { visible, treatTitle, showAssess, isAssessConfirm, radioVal, possible, assessId, disName, hasOndel } = this.state;
    const chronicList = JSON.parse(localStorage.getItem('chronic') || null);
    const chronicLine = chronicMagItem && chronicMagItem.name;     //当前是否走的慢病流程
    let isChronic = false;      //是否要显示管理评估
    const footer = <Footer print={true}
      footText="确定"
      handlePrint={this.onPrint}
      handleConfirm={this.handleSaveAssess} />;
    return (
      <div className={style['diaglist-wrap']}>
        {list && (list.length > 0) && list.map((item, index) => {
          const hasTreat = item.treat && (item.treat.commonTreatment.content || item.treat.surgeryTreatment.content || item.treat.treatment.length > 0 || (item.adverseReactions && item.adverseReactions.length > 0)
            || (item.drugHistory && item.drugHistory['慢病用药内容'] && item.drugHistory['慢病用药内容'].length > 0) || (item.drugHistory && item.drugHistory['普通病用药内容'] && item.drugHistory['普通病用药内容'].length > 0) || item.follow)
          isChronic = chronicLine && item.type == 2 && chronicList.findIndex((it) => it.id == item.id) != -1;
          return (<div draggable={true} className={style['diag-box'] + ' clearfix'} key={item.id} >
            {index === 0 ? '' : <span className={style['diag-up']} onClick={() => { this.upDiagnostic(index) }}><img className={style["diag-up"]} src={diagUp} /></span>}
            {list.length === 1 ? '' : index !== 0 ? '' : <span onClick={() => { this.downDiagnostic(index) }} className={style['diag-down']}><img className={style["diag-down"]} src={diagDown} /></span>}
            <span className={style['diag-number']} style={{ fontWeight: index === 0 ? 'bold' : 'normal' }}>{index === 0 ? '1' : index + 1}</span>
            <span className={style['diag-name']} onClick={() => { this.handleClickDiag(item) }}>{item.name}<span></span></span>
            {item.type === 1 ? <span className={style['diag-first']}>初诊</span> : <span className={style['diag-second']}> 复诊</span>}
            <span className={style['treat']}
              style={hasTreat ? '' : { color: 'gray', cursor: 'text' }}
              onClick={() => { hasTreat && this.showTreat(item, index) }}>
              治疗方案
                                    </span>
            {isChronic ? <span className={style['assess']}
              onClick={this.showAssessFn.bind(this, item)}>
              管理评估
                                    </span> : ''}
            <img className={style['diag-del']} src={hasOndel ? del_on : del_icon} onMouseEnter={this.handleEnterDel.bind(this)} onMouseLeave={this.handleLeaveDel.bind(this)} onClick={() => { this.handleDeleteItem(item) }} />
          </div>)
        })}
        {treatment && <Treat title={treatTitle}></Treat>}
        {showAssess ? <ComplexModal onclose={this.showAssessFn.bind(this)} footer={footer}
          title='管理和评估'
          icon={manageIcon}
          top={'3%'}
          bottom={'3%'}
          width={820}>
          <AssessResult handleSavePossible={this.handleSavePossible}
            closeAssess={this.showAssessFn.bind(this)}
            disId={assessId}
            disName={disName}
            radioVal={radioVal}
            possible={possible}
            isAssessConfirm={isAssessConfirm}
          ></AssessResult>
        </ComplexModal> : ''}
        <ConfirmModal visible={visible}
          okText='删除'
          cancelText='取消'
          confirm={this.deleteItem}
          cancel={this.cancel}
          close={this.close}
        >
          <div className={style['del-msg']}>是否删除该诊断？</div>
        </ConfirmModal>
        <ConfirmModal visible={showReferRecord} okText='是' cancelText='否' confirm={this.referRecord} cancel={this.noReferRecord} close={this.noReferRecord}>
          <div className={style['confirm-info']}>是否引用往期病历</div>
        </ConfirmModal>
        <ConfirmModal visible={showHistoryCase} noFooter='true' title='请选择历史病历' close={this.closeHistoryCaseModal} titleBg="#DFEAFE" icon={tableIcon} height={300}>
          {this.getHistoryCase()}
          <div className={style['confirm-history']}><span className={style['confirm-history-btn']} onClick={this.referCase}>确定</span></div>
        </ConfirmModal>
      </div>

    )
  }
}

export default DiagnosticList;