newICSS/src/components/PushItems/index.jsx

import React, { Component } from "react";
import style from "./index.less";
import possibleImg from "../../common/images/possible.png";
import doubtImg from "../../common/images/doubt.png";
import recommendImg from "../../common/images/recommend.png";
import tipsImg from "../../common/images/tips.png";
import vigilantImg from "../../common/images/vigilant.png";
import showImg from "../../common/images/show.png";
import hideImg from "../../common/images/close.png";
import DetailsModal from './DetailsModal';
import PushDiag from "./PushDiag";
import DiagnosticItem from "@containers/DiagnosticItem";
import store from "@store";
import { getWindowInnerHeight } from "@common/js/func";
import {addLabel} from '@store/actions/inspect';
import {addAssistLabel} from '@store/actions/assistCheck';
import {windowEventHandler} from '@utils/tools'

class PushItems extends Component {
  constructor(props) {
    super(props);

    this.state = {
      moreAssay: false,
      moreCheck: false
    };

    this.showMore = this.showMore.bind(this);
    this.closeMore = this.closeMore.bind(this);
    this.billing = this.billing.bind(this);
    this.changeAssay = this.changeAssay.bind(this);
    this.changeCheck = this.changeCheck.bind(this);
    this.showTips = this.showTips.bind(this);
    this.hideTips = this.hideTips.bind(this)
    this.$cont = React.createRef();
  }

  showMore(type) {
    this.setState({ [type]: true });
  }

  closeMore(type) {
    this.setState({ [type]: false });
  }

  getCurrentDate(){
    let myDate = new Date();
    let year = myDate.getFullYear();       //获取完整的年份(4位,1970-????)
    let mon = myDate.getMonth()-0+1;       //获取当前月份(0-11,0代表1月)
    let day = myDate.getDate();            //获取当前日(1-31)
    let date = year+'-'+(mon<10?'0'+mon:mon)+'-'+(day<10?'0'+day:day);
    return date;
  }

  billing() {
    const { assay, check } = this.props.pushMessage;
    const checkedAssay = assay.filter(item => item.checked);
    const checkedCheck = check.filter(item => item.checked);
    this.props.billing(checkedAssay, checkedCheck);
    // if(checkedAssay.length > 0 || checkedCheck.length > 0) {
    //   const Height = $(".src-components-BodyContainer-2SgEx").height();
    //   const adviceHeight = $(".src-common-components-ItemBox-1Bpz3").height();
    //   const winHeight = window.innerHeight;
    //   const scrollTop = Height;
    //   $('#addScrollEvent').scrollTop(100000)
    // }
    let obj = {   //添加化验
      details: [],
      name: '',
      questionId: '',
      showType: 1,
    }
    let obj1 = {  //添加辅检
      name: '',
      questionId: '',
      showType: 1,
      time:this.getCurrentDate(),
      value:''
    }
    if(checkedAssay.length > 0){
      let assayArr = []
      for(let i = 0;i < checkedAssay.length;i++){
        let tmpObj = JSON.parse(JSON.stringify(obj));
        tmpObj.questionId = checkedAssay[i].id
        tmpObj.name = checkedAssay[i].name
        tmpObj.details = checkedAssay[i].questionMapping
        assayArr.push(tmpObj)
      }
      store.dispatch(addLabel(assayArr))
    }
    if(checkedCheck.length > 0){
      let checkArr = []
      for(let i = 0;i < checkedCheck.length;i++){
        let tmpObj = JSON.parse(JSON.stringify(obj1));
        tmpObj.questionId = checkedCheck[i].id
        tmpObj.name = checkedCheck[i].name
        checkArr.push(tmpObj)
      }
      store.dispatch(addAssistLabel(checkArr))
    }
  }

  changeAssay(item) {
    this.props.changeAssay(item);
  }

  changeCheck(item) {
    this.props.changeCheck(item);
  }

  showTips(tips) {
    const { getTipsDetails, showTipsDetailsModal } = this.props;
    getTipsDetails && getTipsDetails();
    showTipsDetailsModal && showTipsDetailsModal()
  }
  hideTips() {
    const { hideTipsDetailsModal } = this.props;
    hideTipsDetailsModal && hideTipsDetailsModal()
  }
  componentDidMount() {
    const height = getWindowInnerHeight() - 200;
    this.$cont.current.style.height = height + "px";

    windowEventHandler('resize', ()=>{
      const height = getWindowInnerHeight() - 200;
      this.$cont.current.style.height = height + "px";
    });
  }

  render() {
    const {
      vigilant,
      determine,
      doubt,
      possible,
      assay,
      check,
      tips,
      showTipsDetails,
      tipsDetails
    } = this.props.pushMessage;
    const { tipsDiscalimer } = this.props;
    const { moreAssay, moreCheck } = this.state;
    const {
      showMore,
      closeMore,
      billing,
      changeCheck,
      changeAssay,
      showAdd,
      showTips
    } = this;
    let assayNum = 0;
    let assayNum2 = 0; 
    let assayHide = assay.map((item, index) => {
      assayNum = assayNum + item.name.length + 2;
      if (assayNum > 28) {
        assayNum2 = assayNum2 + item.name.length + 2; 
        if(assayNum2 > 23) {
          return;
        } else {
          return (
            <span>
              
              <input
                id={item.id + item.name}
                onChange={() => changeAssay(item)}
                type="checkbox"
                checked={item.checked}
              />
              <label for={item.id + item.name}>{item.name}</label>
            </span>
          );
        }
      } else {
        return (
          <span>
            
            <input
              id={item.id + item.name}
              onChange={() => changeAssay(item)}
              type="checkbox"
              checked={item.checked}
            />
            <label for={item.id + item.name}>{item.name}</label>
          </span>
        );
      }
    });

    const assays = assay.map(item => {
      return (
        <span>
          <input
            id={item.id + item.name}
            onChange={() => changeAssay(item)}
            type="checkbox"
            checked={item.checked}
          />
          <label for={item.id + item.name}>{item.name}</label>
        </span>
      );
    });

    let checkNum = 0;
    let checkNum2 = 0;
    let checkHide = check.map((item, index) => {
      checkNum = checkNum + item.name.length + 2;
      if (checkNum > 28) {
        checkNum2 = checkNum2 + item.name.length + 2; 
        if(checkNum2 > 23) {
          return;
        }else {
          return (
            <span>
              <input
                id={item.id + item.name}
                onChange={() => changeCheck(item)}
                type="checkbox"
                checked={item.checked}
              />
              <label for={item.id + item.name}>{item.name}</label>
            </span>
          );
        }


        
      } else {
        return (
          <span>
            <input
              id={item.id + item.name}
              onChange={() => changeCheck(item)}
              type="checkbox"
              checked={item.checked}
            />
            <label for={item.id + item.name}>{item.name}</label>
          </span>
        );
      }
    });

    const checks = check.map(item => {
      return (
        <span>
          <input
            id={item.id + item.name}
            onChange={() => changeCheck(item)}
            type="checkbox"
            checked={item.checked}
          />
          <label for={item.id + item.name}>{item.name}</label>
        </span>
      );
    });

    const vigilants = vigilant.map((item, index) => {
      return <div key={item.id} className={style['push-diag-item']}><DiagnosticItem item={item}/></div>;
    });

    return (
      <div className={style["push-content-wrapper"]}>
        <div className={style["push-content"]} ref={this.$cont}>
          <div style = {{width: '420px'}}>
            {vigilant && vigilant.length > 0 && (
              <div className={style["vigilant"]}>
                <div className={style["title"]}>
                  <img src={vigilantImg} />
                  警惕
                </div>
                <div className={style["vigilantContent"]}>{vigilants}</div>
              </div>
            )}
            {/* 不展示确诊 */}
            {/* {determine && determine.length>0 && <PushDiag titleBg='#FAEBEC' icon={possibleImg} title='确诊' diagList={determine} maxShowNum={28}/>} */}
            {doubt && doubt.length > 0 && (
              <PushDiag
                titleBg="#FAEBEC"
                icon={doubtImg}
                title="疑似诊断"
                diagList={doubt}
                maxShowNum={26}
              />
            )}
            {possible && possible.length > 0 && (
              <PushDiag
                titleBg="#FAEBEC"
                icon={possibleImg}
                title="可能诊断"
                diagList={possible}
                maxShowNum={26}
              />
            )}
            <div className={style["diagnose"]}>
              {vigilant.length === 0 &&
                determine.length === 0 &&
                doubt.length === 0 &&
                possible.length === 0 && (
                  <div className={style["doubt"]}>
                    <h1>
                      <img src={doubtImg} />
                      疑似诊断
                    </h1>
                    <div className={style["no-push"]}>无</div>
                  </div>
                )}
            </div>

            <div className={style["recommend"]}>
              <h1>
                <img src={recommendImg} />
                推荐检验检查
                <div className={style["billing"]} 
                     style={assay.length === 0 && check.length === 0 ? {color: 'gray', border: '1px solid gray'} : ''} 
                     onClick={assay.length === 0 && check.length === 0 ? '' : billing}>
                    开单
                </div>
              </h1>
              <div>
                {assay.length === 0 && check.length === 0 ? (
                  <span>无</span>
                ) : (
                  <ul>
                    <li className={style["firstLi"]}>
                      <div className={style["title"]}>化验：</div>
                      <div className={style["content"]}>
                        {assay.length === 0
                          ?<span >无</span>
                          : moreAssay
                          ? assays
                          : assayHide}
                        {assayNum2 > 23 ? (
                          <span
                            style={
                              moreAssay
                                ? { display: "none" }
                                : { display: "inline-block" }
                            }
                            className={style["show"]}
                            onClick={() => showMore("moreAssay")}
                          >
                            更多
                            <img src={showImg} />
                          </span>
                        ) : (
                          ""
                        )}
                        <span
                          style={
                            moreAssay
                              ? { display: "inline-block" }
                              : { display: "none" }
                          }
                          className={style["close"]}
                          onClick={() => closeMore("moreAssay")}
                        >
                          收起
                          <img src={hideImg} />
                        </span>
                      </div>
                    </li>
                    <li className={style["lastLi"]}>
                      <div className={style["title"]}>检查：</div>
                      <div className={style["content"]}>
                        {check.length === 0
                          ? "无"
                          : moreCheck
                          ? checks
                          : checkHide}
                        {checkNum2 > 23 ? (
                          <span
                            style={
                              moreCheck
                                ? { display: "none" }
                                : { display: "inline-block" }
                            }
                            className={style["show"]}
                            onClick={() => showMore("moreCheck")}
                          >
                            更多
                            <img src={showImg} />
                          </span>
                        ) : (
                          ""
                        )}
                        <span
                          style={
                            moreCheck
                              ? { display: "inline-block" }
                              : { display: "none" }
                          }
                          className={style["close"]}
                          onClick={() => closeMore("moreCheck")}
                        >
                          收起
                          <img src={hideImg} />
                        </span>
                      </div>
                    </li>
                  </ul>
                )}
              </div>
            </div>
            <div className={style["tips"]}>
              <h1>
                <img src={tipsImg} />
                提示信息
              </h1>
              <div className={style["content"]}>
                {tips && tips.introduceDetailList ? (
                  <div>
                    <div className={style["title"]}>
                      {tips.tagName}
                      <span
                        className={style["tips-details"]}
                        onClick={() => showTips(tips)}
                      >
                        详情
                      </span>
                    </div>
                    {tips.introduceDetailList &&
                      tips.introduceDetailList.map((item, index) => {
                        return (
                          item.position.indexOf("1") > -1 && (
                            <div>
                              <div
                                dangerouslySetInnerHTML={{
                                  __html: item.title
                                }}
                              />
                              <div
                                dangerouslySetInnerHTML={{
                                  __html: item.content
                                }}
                              />
                              {item.isReason === 1 && (
                                <div className={style["warn"]}>
                                  {tipsDiscalimer.data.data[0].description}
                                </div>
                              )}
                            </div>
                          )
                        );
                      })}
                  </div>
                ) : (
                  "无"
                )}
              </div>
            </div>
          </div>
        </div>
        {tipsDiscalimer.data && <div className={style['disTips']} dangerouslySetInnerHTML={{__html: tipsDiscalimer.data.data[1].description}}></div>}
        {showTipsDetails && <DetailsModal  
            showTipsDetails = {showTipsDetails}
            hideTips = {this.hideTips}
            tipsDetails = {tipsDetails}/>}
        
      </div>
    );
  }
}

export default PushItems;