import React, { Component } from 'react'
import {observer,inject} from 'mobx-react'
import {toJS} from 'mobx'
import { WeaSwitch} from 'comsMobx';
import { WeaSearchGroup, WeaFormItem,WeaTools,WeaDialogFooter,WeaLocaleProvider ,WeaHelpfulTip , WeaNewScroll} from 'ecCom';
import UploadAvatar from '../../../../pc4public/hrm/uploadAvatar'

@inject('hrmAvatarSetting')
@observer
export default class AvatarSetting extends Component {
    componentDidMount() {
        const {hrmAvatarSetting} = this.props;
        const {getForm} = hrmAvatarSetting;
        getForm();
    }

    // 渲染表单
    getWriteForm = (form, condition) => {
        const {hrmAvatarSetting} = this.props;
        let {onChange,resetColor,testParams} = hrmAvatarSetting;
        condition = toJS(condition);
        const { isFormInit } = form;
        const formParams = form.getFormParams();
        let group = [];
        isFormInit && condition && condition.map((c,index) => {
            let items = [];
            c.items.map((fields, j) => {
                if(fields.domkey[0] == "mfixedimageid"){
                    items.push({
                        com:(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@63b3y7@${j}`}
                            label={[
                                `${fields.label}`,
                                ':',
                                <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@hnhmby@${j}`} style={{margin:"0 5px"}} title={`${fields.helpfulTip}`}/>,
                            ]} // label 标签的文本
                            colon={false}
                            labelCol={{span: `${fields.labelcol}`}} // label标签占一行比例
                            wrapperCol={{span: `${fields.fieldcol}`}} // 右侧控件占一行比例
                            error={form.getError(fields)} // 错误提示: 处理表单中有必填项,保存的校验
                            tipPosition="bottom" // 错误提示的显示位置: top/bottom
                        >
                           <UploadAvatar ecId={`${this && this.props && this.props.ecId || ''}_UploadAvatar@zg7zf8@${j}`} nohelpful = {true} onChange = {onChange} domkey ={fields.domkey[0]} value={formParams.mfixedimageid}/>
                        </WeaFormItem>),
                        colSpan:1,
                    })
                }else if(fields.domkey[0] == "ffixedimageid"){
                    items.push({
                        com:(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@1lmkxz@${j}`}
                            label={[
                                `${fields.label}`,
                                ':',
                                <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@usvjws@${j}`} style={{margin:"0 5px"}} title={`${fields.helpfulTip}`}/>,
                            ]} // label 标签的文本
                            colon={false}
                            labelCol={{span: `${fields.labelcol}`}} // label标签占一行比例
                            wrapperCol={{span: `${fields.fieldcol}`}} // 右侧控件占一行比例
                            error={form.getError(fields)} // 错误提示: 处理表单中有必填项,保存的校验
                            tipPosition="bottom" // 错误提示的显示位置: top/bottom
                        >
                           <UploadAvatar ecId={`${this && this.props && this.props.ecId || ''}_UploadAvatar@rqs35t@${j}`} nohelpful = {true} onChange = {onChange} domkey ={fields.domkey[0]} value={formParams.ffixedimageid}/>
                        </WeaFormItem>),
                        colSpan:1,
                    })
                }
                else{
                    const fieldKey = fields.domkey[0];
                    const value = formParams[fields.domkey[0]];
                    const isColorPicker = fields.conditionType == 'COLORPICKER';
                    const showReset = isColorPicker ? (value != testParams[fieldKey]) : false;
                    
                    items.push({
                        com:(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@1aq4x3@${j}`}
                            label={`${fields.label}`} // label 标签的文本
                            labelCol={{span: `${fields.labelcol}`}} // label标签占一行比例
                            wrapperCol={{span: `${fields.fieldcol}`}} // 右侧控件占一行比例
                            error={form.getError(fields)} // 错误提示: 处理表单中有必填项,保存的校验
                            tipPosition="bottom" // 错误提示的显示位置: top/bottom
                        >
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@g5uzo6@${j}`}
                            fieldConfig={fields}
                            form={form}
                            formParams={formParams}
                            />
                            {
                                showReset
                                && 
                                <i className="icon-coms-Revoke2" style={{fontSize:'23px',marginLeft:'10px',display:'inline',cursor:'pointer'}} onClick = {() => resetColor(fields.domkey[0])}/>
                            } 
                        </WeaFormItem>),
                        colSpan:1,
                    })
                }

                    

            });
            group.push(
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@6kbehw@${index}`}
                showGroup={true}
                needTigger={true}
                  items={items} // 条目数组数据
                  center={true} // 内容是否居中：一般弹框需要
                  title={c.title}
                />)
        })
         return group;
    }



    render() {
        const {hrmAvatarSetting} = this.props;
        const {avatarStyleCondition,avatarSettingForm,getBtns} = hrmAvatarSetting;
        const btns = getBtns();
        return (
            <div>
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@7svinb`}
                height={540}>
                {
                    this.getWriteForm(avatarSettingForm,avatarStyleCondition)
                    
                }
                </WeaNewScroll>
                {
                    <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@7ftnx5`} 
                    buttons={btns}
                    />
                }
            </div>
        )
    }
}
