import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaRightMenu,
	WeaDialog,
	WeaSearchGroup,
	WeaFormItem
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import {Button,Modal} from 'antd';
import EditSubCompany from './EditSubCompany';
import EditDepartment from './EditDepartment';
import EditResource from './EditResource';
import { i18n } from '../../../public/i18n';
import {addContentPath} from '../../../util/index.js'

@observer
export default class EditRightContainer extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	getForm = () => {
		const {
			store
		} = this.props;
		const {formTarget, verificationCode, refreshVerificationCode} = store;
		const {form, formFields} = formTarget;
		if(form == null)
			return [];
		let formParams = form.getFormParams();
		let arr = [];
		formFields.map((c, i) => {
			let _arr = [];
			c.items.map((field, index) => {
				if(field.domkey[0] != 'belongto' || (field.domkey[0] === 'belongto' && formParams.accounttype == '1')){
					window.e9HideFormFieldKeys = [];
					const itemProps = {
						ratio1to2: true,
						label: field.label,
						labelCol: {
							span: `${window.HrmEngineLabelCol}`
						},
						error: form.getError(field),
						tipPosition: 'bottom',
						wrapperCol: {
							span: `${window.HrmEngineWrapperCol}`
						}
					}
					if(field.domkey[0] != 'validatecode'){
						_arr.push({
							com: (
								<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@t6onry@${index}`} {...itemProps}>
									<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@jr21wp@${index}`} fieldConfig={field} form={form}/>
								</WeaFormItem>
							),
							col: 1
						})
					}else{
						_arr.push({
							com: (
								<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@us7s13@${index}`} {...itemProps}>
									<div>
										<div style={{float: 'left', width: '40%'}}>
											<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@rqdtjt@${index}`} fieldConfig={field} form={form}/>
										</div>
										<img style={{float: 'right'}} border="0" align='absmiddle' src={addContentPath(verificationCode)} onClick={refreshVerificationCode} title={i18n.label.preview()} />
									</div>
								</WeaFormItem>
							),
							col: 1
						})
					}
				}else{
					window.e9HideFormFieldKeys = ['belongto'];
				}
			})
			arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@t67l0f@${i}`} showGroup={true} items={_arr} fontSize={13}/>);
		})
		return arr;
	}

	render(){
		const {
			store,
			routeProps
		} = this.props;
		const {refreshMenu, multFiOp, dialogParams, saveForm, showError,modalVisible,changeModalState} = store;
		const menus = store.rootStore == null ? [] : store.rootStore.topMenuDef().edit[store.rootStore.routeProps.params].menus;

		let com = '';
		switch (routeProps.params) {
			case 'subCompany':
				com = <EditSubCompany ecId={`${this && this.props && this.props.ecId || ''}_EditSubCompany@vwvg4f`} {...this.props} />
				break;
			case 'department':
				com = <EditDepartment ecId={`${this && this.props && this.props.ecId || ''}_EditDepartment@gdtbm9`} {...this.props} />
				break;
			case 'resource':
				com = <EditResource ecId={`${this && this.props && this.props.ecId || ''}_EditResource@t3j72t`} {...this.props} />
				break;
		}

		return (
			<div className="right">
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@mrpo7w`} datas={menus}>
					{com}
				</WeaRightMenu>
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@3jcznq`} {...dialogParams} layout={document.getElementsByClassName('batchMaintenance')[0]}
					buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vs3u1j`} type='primary' onClick={saveForm}>{i18n.button.save()}</Button>]}
					moreBtn={{datas: [{key: '1', content: i18n.button.save(), icon: <i className='icon-coms-Preservation'/>, onClick: saveForm}]}}
				>
					{this.getForm()}
				</WeaDialog>
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@nzugz1`} 
					title={i18n.confirm.defaultTitle()}
					icon={"icon-coms02-Warning"}
					iconBgcolor={"#ff9900"}
					visible={modalVisible}
					onCancel={() => changeModalState(false)}
					style={{width:380,height:100}}
		          	buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vr0gi9`} type="primary" onClick={() => changeModalState(false)}>确定</Button>]}
		        >
		          <p style={{lineHeight:"100px",textAlign:"center"}}>该密码比较容易被猜到，为了您的系统安全，请重新修改密码。</p>
		        </WeaDialog>
			</div>
		)
	}
}