import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaFormItem,
	WeaRightMenu,
	WeaSearchGroup,
} from 'ecCom'
import {
	Spin,
} from 'antd'
import {
	WeaSwitch
} from 'comsMobx'
import {
	i18n
} from '../../public/i18n';

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

	componentDidMount() {
		this.props.hrmFuncManageDecent.getFormInfo();
	}

	componentWillUnmount() {
		this.props.hrmFuncManageDecent.refreshFormInfo();
	}

	getItem(field, comProps) {
		const { hrmFuncManageDecent } = this.props;
		const { formInfo, roleField, resourceField } = hrmFuncManageDecent;
		const { form } = formInfo;
		const { permissionType } = form.getFormParams();
	
	const key = field.domkey[0];

	const broField =  (permissionType == "2") ? roleField : resourceField;

    return {
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@1rxhj7`}
          ratio1to2
          label={`${field.label}`}
          error={form.getError(field)}
          fieldType={field.conditionType.toUpperCase()}
          viewAttr={field.viewAttr}
          tipPosition="bottom"
        >
          <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ciulfh`} form={form} formParams={form.getFormParams()} fieldConfig={field}  className={key}/>
        	{ (key == "permissionType") && (
        		<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7kyt2t`}
			          label={""}
			          labelCol={{span:0}}
			          wrapperCol={{span:24}}
			          error={form.getError(broField)}
			          fieldType={broField.conditionType.toUpperCase()}
			          viewAttr={broField.viewAttr}
			          tipPosition="bottom"
			          className="role-resource"
			        >
				 	<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@r1x554`} form={form} formParams={form.getFormParams()} fieldConfig={{...broField, className: 'overrideBrowserReadonly'}}/>
        		</WeaFormItem>
        	) }
        </WeaFormItem>
      ),
      hide:["roleId","resourceId"].includes(key) ? true : false
    };
  }

	getForm = () => {
		const {
		    hrmFuncManageDecent
		} = this.props, {
		    formInfo,
		} = hrmFuncManageDecent, {
		    form
		} = formInfo;

		return (
			<div>{ form.render({},{},true,
			(c, idx) => {
				let items = [];
	            c.items.map(field => {
	              items.push(this.getItem(field));
	            });

				return (
				<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@q5kldr`}
	                needTigger={true}
	                showGroup={c.defaultshow}
	                col={1}
	                title={c.title}
	                items={items}
	              />
				)
			} )}</div>
		)
	}

	handleChange = (cb) => {
		const {
			hrmFuncManageDecent
		} = this.props, {
			exportSelectedValue
		} = hrmFuncManageDecent;

		const key = Object.keys(cb)[0];
		if (key == 'permissionType') exportSelectedValue(cb.permissionType.value);
	}

	getDropMenuDatas = () => {
		const {
			hrmFuncManageDecent
		} = this.props, {
			formInfo
		} = hrmFuncManageDecent, {
			loading
		} = formInfo;

		const menu = [{
			key: '0',
			icon: <i className='icon-coms-Preservation' />,
			content: i18n.button.save(),
			disabled: loading,
		}];

		return menu
	}

	handleMenuClick = (key) => {
		const {
			hrmFuncManageDecent,
		} = this.props, {
			save,
		} = hrmFuncManageDecent;

		key == '0' && save();
	}

	render() {
		const {
			hrmFuncManageDecent,
		} = this.props, {
			formInfo,
		} = hrmFuncManageDecent, {
			date,
			loading,
			fconditions,
			sconditions,
		} = formInfo;

		return (<div style={{height: '100%'}}>
					{loading ? 	<div style={{textAlign: 'center', paddingTop: 70}}>
									<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@xvqvg1`} spinning={loading}></Spin>
							   	</div>
							 : 	<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@giy0w8`} datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
							 		{this.getForm()}
                				</WeaRightMenu>
					}
				</div>)
	}
}