import {
    Row,
    Col,
    Icon
} from 'antd';
import {WeaInput} from 'ecCom';
import {i18n} from '../public/i18n';
import isEmpty from 'lodash/isEmpty';

class InfoGroup4Formal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showGroup: true
        }
    }
    render() {
        const {
            title,
            items,
            colLeft = 6,
            colRight = 15,
            hide,
        } = this.props;
        const {
            showGroup
        } = this.state;
        let rowArr = [];
        let colArr = [];
        items && items.forEach((obj, index) => {
            const firstItem = (index % 2 == 0);
            if(firstItem)
                colArr = [];
            let showValue;
            if (obj.isOpenHrm) {
                showValue = obj.showName != '' ? <a href={`javaScript:openhrm(${obj.value})`} onClick={event => window.pointerXY(event)}>{obj.showName}</a> : <div>&nbsp;</div>;
            } else {
                if(obj.value){
                    if(obj.value.indexOf('desensitization__') > -1){
                        showValue = (
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@z8kdei@${index}`} value={obj.value} viewAttr={1} />
                        )
                    }else{
                        showValue = (
                            <div style={{whiteSpace: 'pre-wrap'}}  dangerouslySetInnerHTML={{__html:obj.value}}/>
                        )
                    }
                }else{
                    showValue = (
                        <div>&nbsp;</div>
                    )
                }
            }
            colArr.push(
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bli408@${index}`} span={12}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2gnr7e@${index}`}>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@psv7qq@${index}`} className="wea-info-group-content-cell-label" span={colLeft}>
                        {obj.label ? obj.label : <div>&nbsp;</div>}:
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@114adu@${index}`} className="wea-info-group-content-cell-value" span={colRight} >
                        { showValue }
                    </Col>
                  </Row>
                </Col>
            );
            if(!firstItem || index == items.length - 1){
                rowArr.push(<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mris4r@s${index}`}>{colArr}</Row>)
            }
        })
        return (
            <div className="wea-info-group" style={hide?{display:'none'}:null}>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mpltq2`} className="wea-info-group-title">
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@txuoaj`} span={20}>
                        <div className='wea-info-group-title-info'>{title}</div>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@l4tjw2`} span={4} style={{textAlign:"right",paddingRight:10,fontSize:12,lineHeight:'32px'}}>
                        <i style={{cursor: 'pointer'}} className={showGroup ? 'icon-coms-up' : 'icon-coms-down'} onClick={()=>this.setState({showGroup:!showGroup})}/>
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@xc9s0a`} className="wea-info-group-content" style={showGroup ? null : {display:'none'}} >
                    {rowArr}
                </Row>
            </div>
        )
    }

}

class InfoGroup4Formal1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showGroup: true
        }
    }
    render() {
        const {
            title,
            items,
            colLeft = 6,
            colRight = 18
        } = this.props;
        const {
            showGroup
        } = this.state;
        const colArr = [];
        items && items.forEach((obj, index) => {
            let showValue;
            if (obj.isOpenHrm) {
                showValue = obj.showName != '' ? <a href={`javaScript:openhrm(${obj.value})`} onClick={event => window.pointerXY(event)}>{obj.showName}</a> : <div>&nbsp;</div>;
            } else {
                showValue = obj.value ? <div dangerouslySetInnerHTML={{__html:obj.value}}/> : <div>&nbsp;</div>;
            }
            colArr.push(
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@f2bb7r@${index}`}>
                    {obj.label && 
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3p9g5i@${index}`} className="wea-info-group-content-cell-label" span={colLeft}>
                            {obj.label ? obj.label : <div>&nbsp;</div>}:
                        </Col>
                    }
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4pluzd@${index}`} className="wea-info-group-content-cell-value" span={obj.label ?colRight:24} >
                        {showValue}
                    </Col>
                </Row>
            );
        })

        if(isEmpty(colArr) || colArr.length==0){
            colArr.push(<li style={{textAlign:'center',listStyleType:'none'}}>
            <div style={{width:'100%',fontSize:'30px'}}><i className='icon-coms-NoData'></i></div>
            <div style={{color:'#B2B2B2'}}>{i18n.message.dataNone()}</div>
            </li>)
        }
        return (
            <div className="wea-info-group">
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@my1nko`} className="wea-info-group-title">
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jrv8yv`} span={20}>
                        <div className='wea-info-group-title-info'>{title}</div>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@p4dqol`} span={4} style={{textAlign:"right",paddingRight:10,fontSize:12,lineHeight:'32px'}}>
                        <i style={{cursor: 'pointer'}} className={showGroup ? 'icon-coms-up' : 'icon-coms-down'} onClick={()=>this.setState({showGroup:!showGroup})}/>
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ikwki3`} className="wea-info-group-content" style={showGroup ? null : {display:'none'}} >
                    {colArr}
                </Row>
            </div>
        )
    }
}

class InfoGroup4Formal2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showGroup: true
        }
    }
    render() {
        const {
            title,
            items
        } = this.props;
        const {
            showGroup
        } = this.state;
        const colArr = [];
        items && items.forEach((obj, index) => {
            colArr.push(
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@wpe401@${index}`} className="wea-info-group-row">
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@fc1q58@${index}`} className="wea-info-group-content-cell-label" span={6}>
                        {obj.label}
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ptpaet@${index}`} className="wea-info-group-content-cell-value" span={18}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@l2cird@${index}`}  span={14} >
                            {obj.value}
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2bdvq5@${index}`} span={10} dangerouslySetInnerHTML={{__html:obj.link}}>
                        </Col>
                    </Col>
                </Row>
            );
        })
        return (
            <div  className="wea-info-group">
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5e51wp`} className="wea-info-group-title">
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@csrazl`} span={20}>
                        <div className='wea-info-group-title-info'>{title}</div>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@izuesg`} span={4} style={{textAlign:"right",paddingRight:10,fontSize:12,lineHeight:'32px'}}>
                        <i style={{cursor: 'pointer'}} className={showGroup ? 'icon-coms-up' : 'icon-coms-down'} onClick={()=>this.setState({showGroup:!showGroup})}/>
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ody30a`} className="wea-info-group-content" style={showGroup ? null : {display:'none'}} >
                    {colArr}
                </Row>
            </div>
        )
    }
}

class InfoGroup4Formal3 extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        const {
            title,
            items,
            colLeft = 6,
            colRight = 18
        } = this.props;
        const colArr = [];
        items && items.forEach((item, index) => {
            let children = [];
            colArr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6iwl65@${index}`} span={12}>{children}</Col>);
            item.map((obj, index) => {
                let showValue;
                if (obj.isOpenHrm) {
                    showValue = obj.showName != '' ? <a href={`javaScript:openhrm(${obj.value})`} onClick={event => window.pointerXY(event)}>{obj.showName}</a> : <div>&nbsp;</div>;
                } else {
                    if(obj.value){
                        if(obj.value.indexOf('desensitization__') > -1){
                            showValue = (
                                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@fim1fk@${index}`} value={obj.value} viewAttr={1} />
                            )
                        }else{
                            showValue = (
                                <div style={{whiteSpace: 'pre-wrap'}}  dangerouslySetInnerHTML={{__html:obj.value}}/>
                            )
                        }
                    }else{
                        showValue = (
                            <div>&nbsp;</div>
                        )
                    }
                }
                children.push(
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@lxre1f@${index}`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1nu6t9@${index}`} className="wea-info-group-new-content-cell-label" span={colLeft}>
                            {obj.label ? obj.label : <div>&nbsp;</div>}:
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7kkyd8@${index}`} className="wea-info-group-new-content-cell-value" span={colRight} >
                            {showValue}
                        </Col>
                    </Row>
                );
            })
        })
        return (
            <div className="wea-info-group-new">
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@66tawo`} className="wea-info-group-new-title">
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@adb4je`} span={24}>
                        <div className='wea-info-group-new-title-info'>{title}</div>
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@53tfxy`} className="wea-info-group-new-content" gutter={64}>
                    {colArr}
                </Row>
            </div>
        )
    }
}

export {
    InfoGroup4Formal,
    InfoGroup4Formal1,
    InfoGroup4Formal2,
    InfoGroup4Formal3
}