newICSS/src/components/AddAssistCheck/index.jsx

import React from 'react';
import { SearchOption, Calendar ,ConfirmModal,Notify,Add} from '@commonComp';
import styles from './index.less';
import $ from 'jquery';
import Textarea from './Textarea';
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,
            id:null
        }
        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){
        this.setState({
            visible:true,
            id:id
        })
    }

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

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

    componentDidMount() {
        $(document).click((event) => {
            let _con = $('#searchWrapAssist');   // 设置目标区域
            let _cons = $('#datePick');   // 设置目标区域
            if (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 });
            }
        });
        this.getCurrentDate();
    }
    handleSearchShow(e) {
        let tmpShow = this.state.show;
        this.setState({ show: !tmpShow })
        // 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>
        {
            list && list.map((item) => {
                return <li key={item.id}
                    className={styles.searchLi}
                    title={item.name}
                    onClick={() => {
                        handleSign(item.questionId);
                        this.setState({ show: false })
                    }}
                >
                    {item.name}{item.name == item.retrievalName?null:'('+item.retrievalName+')'}
                </li>
            })
        }
    </ul>
    }
    getAssistLabel(){
        const {assistLabel,handleChangeAssistValue,handleChangeDate,isRead,handlePush} = this.props;
        return <ul className={styles.labelWrap} id="datePick">
            {
                assistLabel.map((item,idx) => {
                    return (<li key={item.id} className={styles.assistLists}>
                        <span className={styles.assistName}>{item.name}：</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)}}><img src={close} alt=""/></a>
                            <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>
                    </li>)
                })
            }
        </ul>
    }
    render() {
        const { handleChangeValue, list } = this.props;
        const { visible } = this.state;
        return (
            <div className={styles.wrapper}>
                {this.getAssistLabel()}
                <div id="searchWrapAssist" style={{position:"relative"}}>
                    <Add showText="添加辅检项" handleClick={(e) => this.handleSearchShow(e)} id="assistCheck"/>
                  {this.state.show?<SearchOption handleChangeValue={handleChangeValue} visible={true}>
                        {this.getSearchList(list)}
                    </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;