newICSS/src/components/AddAssistCheck/index.jsx

import React from 'react';
import { SearchOption, Calendar, ConfirmModal, Notify, Add ,DelToast} from '@commonComp';
import styles from './index.less';
import $ from 'jquery';
import Textarea from './Textarea';
import { getPageCoordinate } from '@utils/tools';
import close from './img/close.png';

class AddAssistCheck extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      date: false,
      dateTime: "",
      active: '',
      visible: false,
      pageTop:'',
      id: null,
      activeName:''
    }
    this.handleShowDate = this.handleShowDate.bind(this)
    this.getCurrentDate = this.getCurrentDate.bind(this)
    this.getSearchList = this.getSearchList.bind(this)
    this.getAssistLabel = this.getAssistLabel.bind(this)
    this.handleDelClick = this.handleDelClick.bind(this)
    this.delConfirm = this.delConfirm.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
  }

  handleDelClick(id,item) {
    this.setState({
      visible: true,
      id: id,
      activeName:item.name
    })
  }

  delConfirm() {
    const { handleDelAssist, handlePush } = this.props;
    const { id } = this.state;
    handleDelAssist && handleDelAssist(id);
    handlePush && handlePush();           //右侧推送
    this.setState({
      visible: false,
      id: null,
      activeName:''
    })
    Notify.success("删除成功");
  }

  handleCancel() {
    this.setState({
      visible: false,
      id: null,
      activeName:''
    })
  }

  componentDidMount() {
    $(document).click((event) => {
      let _con = $('#searchWrapAssist');   // 设置目标区域
      let _cons = $('#datePick');   // 设置目标区域
      let _del = $('#delBox')[0];   // 删除弹窗
      let _close = $('#assiClose')[0];   // 删除icon
      let _closeTil = $('#delTit')[0];   // 弹窗标题
      if (_con && searchWrapAssist != event.target && !_con.is(event.target) && _con.has(event.target).length === 0) { // Mark 1
        this.setState({ show: false });
      }
      if (!_cons.is(event.target) && _cons.has(event.target).length === 0) { // Mark 1
        this.setState({ date: false });
      }
      if(!event.target.isEqualNode(_close) && !event.target.isEqualNode(_del)  && event.target.parentNode != _del && !event.target.isEqualNode(_closeTil)){
          this.setState({
            visible: false,
            id: null,
            activeName:''
          })
      }
    });
    this.getCurrentDate();
  }
  handleSearchShow(e) {
    let tmpShow = this.state.show;
    this.setState({ show: !tmpShow,pageTop:getPageCoordinate(e).boxTop })
    // e.stopPropagation();
  }
  handleShowDate(idx) {
    this.setState({
      date: !this.state.date,
      active: idx
    })
  }
  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);
    this.setState({ dateTime: date })
  }

  getSearchList(list) {      //搜索列表
    const { handleSign } = this.props;
    return <ul className={styles.searchLiUl}>
      {
        list && list.map((item, idx) => {
          return <li key={item.id}
            className={styles.searchLi}
            title={(item.name == item.retrievalName || !item.retrievalName) ? null : '(' + item.retrievalName + ')'}
            onClick={() => {
              handleSign(item.questionId, idx,'search');
              this.setState({ show: false })
            }}
          >
            {item.name}{(item.name == item.retrievalName || !item.retrievalName) ? null : '(' + item.retrievalName + ')'}
          </li>
        })
      }
    </ul>
  }
  getCommonList() {      //常用列表
    const { handleSign,assistList } = this.props;
    return <ul className={styles.searchLiUl}>
      {
        assistList && assistList.map((item, idx) => {
          return <li key={item.id}
            className={styles.searchLi}
            title={item.name}
            onClick={() => {
              handleSign(item.questionId, idx,'common');
              this.setState({ show: false })
            }}
          >
            {item.name}
          </li>
        })
      }
    </ul>
  }
  getAssistLabel() {
    const { assistLabel, handleChangeAssistValue, handleChangeDate, isRead, handlePush, winWidth,getInfomation } = this.props;
    const { visible,activeName,id } = this.state;
    return <ul className={styles.labelWrap} id="datePick">
      {
        assistLabel.map((item, idx) => {
          return (<li key={item.questionId} className={`${styles.assistLists} ${styles.clearfix}`}>
            <span className={styles.assistName} style={{ width: winWidth < 1200 ? '120px' : 'auto' }}>
              <span className={styles.tagSpan}>
                {item.name}：
                <span className={styles.imgInfo} onClick={()=>getInfomation(item.questionId,item.name)}></span>
              </span>
            </span>
            <div className={styles.textareaWrap}>
              <Textarea value={item.value} handlePush={handlePush} isRead={isRead} handleChangeAssistValue={handleChangeAssistValue} idx={idx}></Textarea>
            </div>
            <div className={styles.pointerFinger}>
              <p onClick={() => this.handleShowDate(idx)}>报告日期：<span>{item.time || this.state.dateTime}</span></p>
              <i onClick={() => this.handleShowDate(idx)}></i>
              {/*<a href="javascript:void(0);" onClick={() => { this.handleDelClick(idx,item) }}><img src={close} alt="" /></a>*/}
              <span className={styles.closeIcon} id="assiClose" onClick={() => { this.handleDelClick(idx,item) }}></span>
              <div style={{ display: this.state.date && idx == this.state.active ? "block" : "none", position: "relative" }}>
                <Calendar isShow={true} handleChange={(info) => { handleChangeDate(info, idx); this.setState({ date: false }) }}></Calendar>
              </div>
            </div>
          <DelToast show={idx==id?visible:false}
                    name={activeName} 
                    cancel={this.handleCancel}
                    confirm={this.delConfirm}/>
          </li>)
        })
      }
    </ul>
  }
  render() {
    const { handleChangeValue, list,assistVal,windowHeight } = this.props;
    const { visible,pageTop } = this.state;
    return (
      <div className={styles.wrapper}>
        {this.getAssistLabel()}
        <div id="searchWrapAssist" style={{ position: "relative", clear: 'both' }}>
          <Add showText="添加辅检项" handleClick={(e) => this.handleSearchShow(e)} id="assistCheck" />
          {this.state.show ? <SearchOption windowHeight={windowHeight} pageTop={pageTop} height={280} handleChangeValue={handleChangeValue} visible={true}>
            {list && list.length>0?this.getSearchList(list):(assistVal == ''?'':<p style={{padding:'5px 30px',color:'#bfbfbf'}}>暂无筛选项</p>)}
            {
              list && list.length>0 || (assistVal != '')?'':<div>
                <p style={{padding:'5px 30px',color:'#bfbfbf'}}>常用辅检项</p>
                {
                  this.getCommonList()
                }
              </div>
            }
          </SearchOption> : ''}
        </div>
        {/*<ConfirmModal
          visible={visible}
          confirm={this.delConfirm}
          close={this.handleCancel}
          cancel={this.handleCancel}
          okText="删除"
          cancelText='取消'
          okBorderColor={'#3B9ED0'}
          okColor={'#fff'}
          oKBg={'#3B9ED0'}
        >
          <p className={styles['center']}>是否删除该辅检项？</p>
        </ConfirmModal>*/}
      </div>
    )
  }
}

export default AddAssistCheck;