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 PushDiag from "./PushDiag";
import DiagnosticItem from "@containers/DiagnosticItem";
import $ from "jquery";
import { getWindowInnerHeight } from "@common/js/func";
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.$cont = React.createRef();
  }

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

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

  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);
    const Height = $(".src-components-BodyContainer-2SgEx").height();
    const adviceHeight = $(".src-common-components-ItemBox-1Bpz3").height();
    const winHeight = window.innerHeight;
    const scrollTop = Height;
    document.documentElement.scrollTop = 10000;
  }

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

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

  showTips(tips) {
    const { getTipsDetails } = this.props;
    getTipsDetails && getTipsDetails();
  }
  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
    } = this.props.pushMessage;
    const { tipsDiscalimer } = this.props;
    const { moreAssay, moreCheck } = this.state;
    const {
      showMore,
      closeMore,
      billing,
      changeCheck,
      changeAssay,
      showAdd,
      showTips
    } = this;
    // console.log('tipsDiscalimer', tipsDiscalimer)
    let assayNum = 0;
    let assayHide = assay.map((item, index) => {
      assayNum = assayNum + item.name.length + 2;
      if (assayNum > 22) {
        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>
        );
      }
    });

    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 checkHide = check.map((item, index) => {
      checkNum = checkNum + item.name.length + 2;
      if (checkNum > 22) {
        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>
        );
      }
    });

    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 <DiagnosticItem item={item} />;
    });

    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={28}
              />
            )}
            {possible && possible.length > 0 && (
              <PushDiag
                titleBg="#FAEBEC"
                icon={possibleImg}
                title="可能诊断"
                diagList={possible}
                maxShowNum={28}
              />
            )}
            <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"]}  onClick={billing}>开单</div>
              </h1>
              <div>
                {assay.length === 0 && check.length === 0 ? (
                  "无"
                ) : (
                  <ul>
                    <li className={style["firstLi"]}>
                      <div className={style["title"]}>化验：</div>
                      <div className={style["content"]}>
                        {assay.length === 0
                          ? "无"
                          : moreAssay
                          ? assays
                          : assayHide}
                        {assayNum > 28 ? (
                          <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}
                        {checkNum > 28 ? (
                          <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>}
        
        
      </div>
    );
  }
}

export default PushItems;