newICSS/src/components/CommonSymptom/index.jsx

import React,{Component} from 'react';
import classNames from 'classnames';
import $ from 'jquery';
import style from "./index.less";
import {storageLocal} from "@utils/tools.js";
/**
 * author: Liucf
 * 主诉常见症状下拉--修改为横铺多选（3.13）
 * 接收参数：
 * data: json数组，数据源；
 * show: true/false,与私有属性hide共同控制组件的显示隐藏；
 * onSelect: 确定事件；
 * 
 * **/

class CommonSymptom extends Component{
  constructor(props){
    super(props);
    this.state={
      select:[],
      ids:[],
      hide:false,
      conceptId:[]
    }
    this.div = React.createRef();
    this.handleSelect = this.handleSelect.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.handleConfirm = this.handleConfirm.bind(this);
    this.handleOuter = this.handleOuter.bind(this);
  }
  getClass(){
    let isHide = this.props.show?'':style['hide'];
    return classNames(style['list'],isHide);
  }

  handleSelect(e,item){
    // e.stopPropagation();
    let {select,ids,conceptId} = this.state;
    const id = item.questionId||item.id; //缓存localStorage中的数据有id
    const copid = item.conceptId
    if(conceptId.includes(copid)){
      conceptId.splice(conceptId.indexOf(copid),1);
      if(ids.includes(id)){
        ids.splice(ids.indexOf(id),1);
      }
      let selectData = select;  
      select.forEach((it,i)=>{
        if(it.conceptId==copid){
         selectData.splice(i,1); 
        }
      })
      select = selectData; 
    }else{
      // ids.push(id); //questionId可能没有
      if(id){
        ids.push(id);
      }
      conceptId.push(copid);
      select.push(item);
    }
    this.setState({
      select,
      ids,
      conceptId
    })
  }
  getStyle(id){
    const {conceptId} = this.state;
    if(conceptId.includes(id)){
      return style['selected'];
    }
    return '';
  }
  handleClear(e){
    // e.stopPropagation();
    this.setState({
      select:[],
      ids:[],
      conceptId:[]
    })
  }
  handleConfirm(e){
    // e.stopPropagation();
    const {onSelect} = this.props;
    const {select,ids,conceptId} = this.state;
    onSelect&&onSelect({select,ids,conceptId});
  }

  handleOuter(e){
    e.stopPropagation();
    let itemBox = $('#mainSuit')[0]; //主诉框
    if(this.div.current.contains(e.target) || e.target == itemBox){
      this.setState({
        hide:false
      })
    }else{
      this.setState({
        hide:true,
        select:[],
        ids:[],
        conceptId:[]
      })
    }
  }

  componentDidMount() {
    window.addEventListener('click', this.handleOuter);
  }

  componentWillUnmount() {
    window.removeEventListener('click', this.handleOuter);
  }

  render(){ 
    const {data} = this.props;
    const {hide} = this.state;
    const mainSymp = storageLocal.get('mainSymp');
    const mainHis = mainSymp?JSON.parse(mainSymp).reverse():[];
    return <div className={this.getClass()} contenteditable="false" style={{'display':hide?'none':'block'}} ref={this.div} onClick={this.handleOuter}>
      <ul className={style["listBox"]}>
        {mainHis.length>0?<ul className={style["his"]}>
          <p>最近输入症状：</p>
          {mainHis.map((it)=>{
            return <li onClick={(e)=>this.handleSelect(e,it)} className={this.getStyle(it.conceptId)} title={it.name.length>5?it.name:''}>{it.name.length>5?it.name.slice(0,4)+'...':it.name}</li>
          })}
        </ul>:''}
        <p className={style['c-title']}>常见症状：</p>
        {data&&data.map((it)=>{
          return <li onClick={(e)=>this.handleSelect(e,it)} className={this.getStyle(it.conceptId)} title={it.name.length>5?it.name:''}>{it.name.length>5?it.name.slice(0,4)+'...':it.name}</li>
        })}
      </ul>
      <div className={style['oper']}>
        <span className={style['clear']} onClick={this.handleClear}>清空选项</span>
        <span className={style['confirm']} onClick={this.handleConfirm}>确定</span>
      </div>
    </div>
  }
}

export default CommonSymptom;