import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaFormItem,
    WeaSearchGroup
} from 'ecCom'
import {
    Spin
} from 'antd'
import {
    WeaSwitch
} from 'comsMobx'
import {addContentPath} from '../../util/index.js'

@inject('hrmSecondaryVerify')
@observer
export default class FormInfo extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const {
            hrmSecondaryVerify
        } = this.props, {
            getFormConditions,
        } = hrmSecondaryVerify;

        getFormConditions();
    }

    componentWillUnmount() {
        const {
            hrmSecondaryVerify
        } = this.props, {
            resetFormInfo,
        } = hrmSecondaryVerify;

        resetFormInfo();
    }

    getForm = () => {
        const {
            hrmSecondaryVerify,
        } = this.props, {
            formInfo,
            date,
            setDate,
        } = hrmSecondaryVerify, {
            form,
            conditions,
            passwordComplexity,
        } = formInfo, {
            isFormInit,
        } = form;


        let outterArray = [];
        const len = conditions.length > 0 && conditions[0].items.length;

        isFormInit && conditions.map((c, i) => {
            let innerArray = [];
            c.items.map((field, index) => {
                const key = field.domkey[0];
                innerArray.push({
                    com: (
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@2vsti1@${index}`}
                            label={`${field.label}`}
                            labelCol={this.getLabelCol(len,passwordComplexity)}
                            wrapperCol={{span: 12}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                        >
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@f2kx2i@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} onBlur={cb => this.handleBlur({key, cb})}/>
                            {key === 'validatecode' && <img 
                              src={addContentPath(`/weaver/weaver.file.MakeValidateCode?isView=1&validatetype=0&validatenum=4&seriesnum_=${date}`)}
                              style={{cursor:'pointer', position: 'absolute', left: '105%'}} 
                              onClick={() => setDate()}
                            />}
                        </WeaFormItem>
                    ),
                    colSpan: 1
                })
            })
            outterArray.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@i7kz7y@${i}`} needTigger={true} title={''} showGroup={c.defaultshow} items={innerArray} col={1} />)
        })

        return outterArray;
    }

    getLabelCol = (len, passwordComplexity) => {
        const labelCol = {
            span: 5,
        };
        if (passwordComplexity != '0') {
            if (len > 1) {
                Object.assign(labelCol, {
                    offset: 0
                });
            } else {
                Object.assign(labelCol, {
                    offset: 3
                });
            }
        } else {
            Object.assign(labelCol, {
                offset: 2
            });
        }

        return labelCol;
    }

    handleBlur = (params) => {
        const {
            key,
            cb
        } = params;

        const {
            hrmSecondaryVerify
        } = this.props, {
            verifyPassword,
        } = hrmSecondaryVerify;


        (key == 'oldSecondaryPwd' || key == 'secondaryPwd1' || key == 'newSecondaryPwd1') && verifyPassword({
            cb,
            key
        });
    }


    render() {
        const {
            hrmSecondaryVerify,
        } = this.props, {
            formInfo,
        } = hrmSecondaryVerify, {
            loading,
        } = formInfo;

        if (loading) {
            return (
                <div className='hrm-loading-center-small'>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@gv8hr5`} spinning={loading}></Spin>
                </div>
            )
        } else {
            return this.getForm()
        }

    }
}