/*
 * @Author: lusx 
 * @Date: 2020-03-09 16:45:52 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-20 11:14:32
 */
import { WeaUpload, WeaProgress, WeaLocaleProvider, WeaInputEncrypt, WeaTools } from 'ecCom';
import { Row, Col } from 'antd';
import { toJS } from "mobx"
const prefixCls = "prj-form";
const getLabel = WeaLocaleProvider.getLabel;
var Base64 = ecCom.WeaTools.Base64;
const headerDom = (title) => (
    <header style={{ fontSize: "16px" }} className={`${prefixCls}-card-title`}>
        <span className={`${prefixCls}-main-card-title`} >{title}</span>
    </header>
)
function getHeaderDom(hasTopTitle, title, index) {
    if (hasTopTitle) {
        return (headerDom(title))
    } else {
        return (index !== 0) && headerDom(title)
    }
}
const PrjForm = (props) => {
    const { fieldinfo,hasTopTitle = false } = props;
    if (fieldinfo === undefined) {
        return (
            <div className={`${prefixCls}-no-data`} style={{ height: `${props.height}px` }}><pre>&nbsp;</pre>无对应数据</div>
        )
    } else {
        return (
            <div className={`${prefixCls}-form-container`} >
                {fieldinfo && toJS(fieldinfo).map((item, index) => {
                    return (
                        <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@irnn84@${index}`} key={index}>
                            {getHeaderDom(hasTopTitle,item.title,index)}
                            <section style={{ paddingLeft: "20px" }}>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hg6zey@${index}`} style={{ fontSize: "12px" }}>
                                    {getTaskInfoItem(item.items, props)}
                                </Row>
                            </section>
                            {index + 1 !== fieldinfo.length && <div className={`${prefixCls}-form-bottom-border`}></div>}
                        </React.Fragment>
                    )
                }
                )}
            </div>

        )
    }

};
const getTaskInfoItem = (items, props) => {
    let item = [];
    let stylecss = { 'margin-right': '5px', 'margin-top': '16px' };
    const { showdt = false } = props;
    const colSpan = showdt ? "8" : "12"
    items.map((field, index) => {
        if (field.domkey[0] == "prjprocess") {
            item.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@el91hi@${index}`} span={colSpan} style={{ lineHeight: "30PX", height: "34px" }} key={field.domkey[0]}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qtuzhr@${index}`} span="6" className={`${prefixCls}-field-container`}>
                    <span className={`${prefixCls}-field-name`}>{field.label} </span>
                    <div className={`${prefixCls}-field-name-visable`}>{field.label}</div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@90hv4v@${index}`} span="18" className={`${prefixCls}-cell-label`}>
                    <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@aqt0by@${index}`} name={field.domkey[0]} percent={field.value || 0} status="active" />
                </Col>
            </Col>)
        } else if (field.conditionType == "INPUT") {
            item.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@uhbocj@${index}`} span={colSpan} style={{ lineHeight: "30PX" }} key={field.domkey[0]}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ruf0b4@${index}`} span="6" className={`${prefixCls}-field-container`}>
                    <span className={`${prefixCls}-field-name`}>{field.label} </span>
                    <div className={`${prefixCls}-field-name-visable`}>{field.label}</div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xslsy5@${index}`} span="18" className={`${prefixCls}-cell-label-rich ${prefixCls}-richtext-wraps`}>
                    <div className={`${prefixCls}-cell-label-box`}><WeaInputEncrypt value={field.value}/></div>
                    {!WeaTools.EncryBase.desensitization(field.value)&&<div className={`${prefixCls}-field-name-visable`} dangerouslySetInnerHTML={{__html: field.value}}></div>}
                </Col>
            </Col>);
        } else if (field.conditionType == "BROWSER") {
            item.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@tbcmkx@${index}`} span={colSpan} style={{ lineHeight: "30PX" }} key={field.domkey[0]}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@oruym7@${index}`} span="6" className={`${prefixCls}-field-container`}>
                    <span className={`${prefixCls}-field-name`}>{field.label}</span>
                    <div className={`${prefixCls}-field-name-visable`}>{field.label}</div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mj1w6m@${index}`} span="18" className={`${prefixCls}-cell-label-rich ${prefixCls}-richtext-wraps`}>
                    <div className={`${prefixCls}-cell-label-box`}>
                        {field.browserConditionParam.replaceDatas && field.browserConditionParam.replaceDatas.map((item) => {
                            if(field.browserType == '402'||field.browserType == '403'){
                                return <span className={`${prefixCls}-cell-label`} style={{ paddingRight: "10px" }}>{field.value}</span>
                            }
                            if (field.domkey[0] == "manager" || field.domkey[0] == "members") {
                                return <span style={{ paddingRight: "10px" }} className={`${prefixCls}-cell-label`}>
                                    <a href={'javaScript:openhrm(' + item.id + ');'} onClick={e => window.pointerXY(e)} >{item.name}</a>
                                </span>
                            }
                            if (field.browserConditionParam.linkUrl != "") {
                                return <span style={{ paddingRight: "10px" }} className={`${prefixCls}-cell-label`}>
                                    <a href={field.browserConditionParam.linkUrl + item.id} target="_blank">{item.name}</a>
                                </span>
                            } else {
                                return <span className={`${prefixCls}-cell-label`} style={{ paddingRight: "10px" }}>{item.name}</span>
                            }
                        })}
                    </div>
                    <div className={`${prefixCls}-field-name-visable`}>
                        {field.browserConditionParam.replaceDatas && field.browserConditionParam.replaceDatas.map((item) => {
                            if (field.domkey[0] == "manager" || field.domkey[0] == "members") {
                                return <span style={{ paddingRight: "10px" }} className={`${prefixCls}-cell-label`}>
                                    <a href={'javaScript:openhrm(' + item.id + ');'} onClick={e => window.pointerXY(e)} >{item.name}</a>
                                </span>
                            }
                            if (field.browserConditionParam.linkUrl != "") {
                                return <span style={{ paddingRight: "10px" }} className={`${prefixCls}-cell-label`}>
                                    <a href={field.browserConditionParam.linkUrl + item.id} target="_blank">{item.name}</a>
                                </span>
                            } else {
                                return <span className={`${prefixCls}-cell-label`} style={{ paddingRight: "10px" }}>{item.name}</span>
                            }
                        })}
                    </div>

                </Col>
            </Col>)
        } else if (field.conditionType == "SELECT") {
            item.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wv0z2f@${index}`} span={colSpan} style={{ lineHeight: "30PX" }} key={field.domkey[0]}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@n9c3gf@${index}`} span="6" className={`${prefixCls}-field-container`}>
                    <span className={`${prefixCls}-field-name`}>{field.label}</span>
                    <div className={`${prefixCls}-field-name-visable`}>{field.label}</div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@robbia@${index}`} span="18" className={`${prefixCls}-cell-label-rich ${prefixCls}-richtext-wraps`}>
                    {
                        field.options && field.options.map((item) => {
                            if (item.key == field.value) {
                                return (<span >
                                    <div className={`${prefixCls}-cell-label-box`}>
                                        <span className={`${prefixCls}-cell-label`} style={{ paddingRight: "10px" }}>{item.showname}</span>
                                    </div>
                                    <div className={`${prefixCls}-field-name-visable`} > {item.showname}</div>
                                </span>)
                            }
                        })
                    }
                </Col>
            </Col>)
        } else if (field.conditionType == "PRJDATETIME") {
            item.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@af821a@${index}`} span={colSpan} style={{ lineHeight: "30PX" }} key={field.domkey[0]}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@of3z6p@${index}`} span="6" className={`${prefixCls}-field-container`}>
                    <span className={`${prefixCls}-field-name`}>{field.label}</span>
                    <div className={`${prefixCls}-field-name-visable`}>{field.label}</div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jyclkh@${index}`} span="18" className={`${prefixCls}-cell-label-rich ${prefixCls}-richtext-wraps`}>
                    <div className={`${prefixCls}-cell-label-box`}>
                        <span className={`${prefixCls}-cell-label`} style={{ paddingRight: "10px" }}>
                            {field.isTimeShow==1 
                            ?
                             `${field.value[0] ? field.value[0] : getLabel('514133','未设置')} ~ ${field.value[1] ? field.value[1] : getLabel('514133','未设置')}` 
                            :
                            `${field.value[0] ? field.value[0] : getLabel('514133','未设置')}`
                            }   
                        </span>
                    </div>
                    <div className={`${prefixCls}-field-name-visable`} >
                        {`${field.value[0] ? field.value[0] : getLabel('514133','未设置')} ~ ${field.value[1] ? field.value[1] : getLabel('514133','未设置')}`}
                    </div>
                </Col>
            </Col>)
        } else if (field.conditionType == "CHECKBOX") {
            item.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j7v80k@${index}`} span={colSpan} style={{ lineHeight: "30PX" }} key={field.domkey[0]}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kfx9my@${index}`} span="6" className={`${prefixCls}-field-container`}>
                    <span className={`${prefixCls}-field-name`}>{field.label}</span>
                    <div className={`${prefixCls}-field-name-visable`}>{field.label}</div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3a0aaz@${index}`} span="18" className={`${prefixCls}-cell-label-rich ${prefixCls}-richtext-wraps`}>
                    <div className={`${prefixCls}-cell-label-box`}>
                        <span className={`${prefixCls}-cell-label`} style={{ paddingRight: "10px" }}>{field.value != "1" ? getLabel('30587', '否') : getLabel('163', '是')}</span>
                    </div>
                    <div className={`${prefixCls}-field-name-visable`} > {field.value != "1" ? getLabel('30587', '否') : getLabel('163', '是')}</div>
                </Col>
            </Col>)
        } else if (field.conditionType == "ATTACHEMENT") {
            let domkey = field.domkey[0];

            item.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@atvqyd@${index}`} span={colSpan} style={{ lineHeight: "30PX" }} key={field.domkey[0]}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ah4j9f@${index}`} span="6" className={`${prefixCls}-field-container`}>
                    <span className={`${prefixCls}-field-name`}>{field.label}</span>
                    <div className={`${prefixCls}-field-name-visable`}>{field.label}</div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xmuj9r@${index}`} span="18" className={`${prefixCls}-cell-label`}>
                    <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@fs784c@${index}`}
                        name={domkey}
                        uploadId={[domkey]}
                        uploadUrl={(window.ecologyContentPath || '')+"/api/proj/prjutil/fileUpload?accsec=" + field.accsec}
                        category={field.accsec}
                        autoUpload={true}
                        showBatchLoad={false}
                        showClearAll={false}
                        multiSelection={true}
                        datas={toJS(field.datas)}
                        maxUploadSize={field.accsize}
                        viewAttr={field.viewAttr}
                    // onUploading={(state)=>{}}
                    />
                </Col>
            </Col>)
        } else if (field.conditionType == "TEXTAREA") {
            item.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@75y1sb@${index}`} span={colSpan} style={{ lineHeight: "30PX" }} key={field.domkey[0]}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9z9tv1@${index}`} span="6" className={`${prefixCls}-field-container`}>
                    <span className={`${prefixCls}-field-name`}>{field.label}</span>
                    <div className={`${prefixCls}-field-name-visable`}>{field.label}</div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@9sgkys@${index}`} span="18" className={`${prefixCls}-cell-label-rich ${prefixCls}-richtext-wraps`}>
                    <div className={`${prefixCls}-cell-label-box`}><WeaInputEncrypt ecId={`${this && this.props && this.props.ecId || ''}_WeaInputEncrypt@c6gfas`} value={field.value} type={'TEXTAREA'} /></div>
                    {!WeaTools.EncryBase.desensitization(field.value)&&<div className={`${prefixCls}-field-name-visable`} > {field.value}</div>}
                </Col>
            </Col>)
        } else if (field.conditionType == "RICHTEXT") {
            item.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3icd9c@${index}`} span={colSpan} style={{ lineHeight: "30PX" }} key={field.domkey[0]}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j63t7j@${index}`} span="6" className={`${prefixCls}-field-container`}>
                    <span className={`${prefixCls}-field-name`}>{field.label}</span>
                    <div className={`${prefixCls}-field-name-visable`}>{field.label}</div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ka3k8g@${index}`} span="18" className={`${prefixCls}-cell-label-rich ${prefixCls}-richtext-wraps`}>
                    <div className={`${prefixCls}-cell-label-box`}><WeaInputEncrypt ecId={`${this && this.props && this.props.ecId || ''}_WeaInputEncrypt@d2gfas`} value={Base64.decode(field.value)} type={'TEXTAREA'} /></div>
                    {!WeaTools.EncryBase.desensitization(Base64.decode(field.value))&&<div className={`${prefixCls}-field-name-visable`} dangerouslySetInnerHTML={{ __html: '<div>' + Base64.decode(field.value) + '</div>' }}></div>}
                </Col>
            </Col>)
        } else if (field.conditionType == "DATEPICKER") {
            item.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3icd9c@${index}`} span={colSpan} style={{ lineHeight: "30PX" }} key={field.domkey[0]}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j63t7j@${index}`} span="6" className={`${prefixCls}-field-container`}>
                    <span className={`${prefixCls}-field-name`}>{field.label}</span>
                    <div className={`${prefixCls}-field-name-visable`}>{field.label}</div>
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ka3k8g@${index}`} span="18" className={`${prefixCls}-cell-label-rich ${prefixCls}-richtext-wraps`}>
                    <span className={`${prefixCls}-cell-label`} style={{ paddingRight: "10px" }}>{field.value}</span>
                </Col>
            </Col>)
        }

    });
    return item;
}
export default PrjForm;