newICSS/src/components/AddAssistCheck/index.jsx

import React from 'react';
import { SearchOption, Calendar } from '@commonComp';
import styles from './index.less';
import $ from 'jquery';
import Textarea from './Textarea';
import more from '@common/images/addItem1.png';

class AddAssistCheck extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            date: false,
            dateTime:"",
            active:'',
        }
        this.handleShowDate = this.handleShowDate.bind(this)
        this.getCurrentDate = this.getCurrentDate.bind(this)
        this.getSearchList = this.getSearchList.bind(this)
        this.getAssistLabel = this.getAssistLabel.bind(this)
    }

    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,handleDelAssist,handleChangeAssistValue,handleChangeDate,isRead} = this.props;
        return <ul className={styles.labelWrap} id="datePick">
            {
                assistLabel.map((item,idx) => {
                    return (<li key={item.id}> 
                        <span style={{float:"left"}}>{item.name}:</span>
                        <p style={{float:"none",overflow:"hidden",marginRight:"215px",paddingLeft:'8px'}}>
                            {/* <textarea
                                className={styles.divTextarea}
                                onChange={(e)=>{
                                    handleChangeAssistValue(e.target.value,idx,e)
                                    if(e.target.value.trim() == '') {
                                        e.target.style.height = '18px';
                                        return;
                                    }
                                    e.target.style.height = e.targetv.scrollHeight+'px';
                                }}
                                value={item.value}
                                // onFocus={(e)=>{e.target.style.height = e.target.scrollHeight+'px';}}
                                onKeyUp={(e)=>{handleChangeAssistValue(e.target.value,idx,e)}} 
                                placeholder="报告描述或意见"
                            ></textarea> */}
                            <Textarea value={item.value} isRead={isRead} handleChangeAssistValue={handleChangeAssistValue} idx={idx}></Textarea>
                        </p>
                        <div>
                            <p>报告日期：<span>{item.time || this.state.dateTime}</span></p>
                            <i onClick={()=>this.handleShowDate(idx)}></i>
                            <a href="javascript:void(0);" onClick={()=>{handleDelAssist(idx)}}></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>
                        {/* <p className={styles.iptWrap}> */}
                            {/* <input type="text" onChange={(e)=>{handleChangeAssistValue(e.target.value,idx)}} placeholder={"报告描述或意见"}/> */}
                        {/* </p> */}
                    </li>)
                })
            }
        </ul>
        
    }
    render() {
        const { handleChangeValue, list } = this.props;
        return (
            <div className={styles.wrapper}>
                {this.getAssistLabel()}
                <div id="searchWrapAssist" style={{position:"relative"}}>
                    <img src={more} style={{verticalAlign:'middle',marginRight:'2px'}}/>
                    <span className={`${styles.staticTag}`} onClick={(e) => this.handleSearchShow(e)} id="assistCheck">添加辅检项目</span>
                    <SearchOption handleChangeValue={handleChangeValue} visible={this.state.show}>
                        {this.getSearchList(list)}
                    </SearchOption>
                </div>
            </div>
        )
    }
}

export default AddAssistCheck;