import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaDialogFooter,
	WeaLocaleProvider
} from 'ecCom';
import {Spin} from 'antd';
import FormInfo from '../../coms/FormInfo';
import {
	i18n
} from '../../public/i18n';
import '../../style/index.css';
const { getLocaleLabelByLang } = WeaLocaleProvider;

@inject('hrmForgetPassword')
@observer
export default class ForgetPassword extends Component {
	constructor(props) {
		super(props);
		this.state = {
			show: false
		}
	}

	componentDidMount() {
		const {
			location
		} = this.props;
		setTimeout(() => {
			getLocaleLabelByLang('common,hrm', location.query.langid).then(() => {
				this.init();
			})
		}, 500)
	}

	componentWillReceiveProps(nextProps) {
		this.init();
	}

	getDialogInfo = () => {
		return top.window.getParentDialog();
	}

	init = () => {
		const {
			hrmForgetPassword: store,
			location
		} = this.props;
        store.initData(location.query.langid, this.getDialogInfo, () => this.setState({show:true}));
	}

	render() {
		const {
			hrmForgetPassword: store,
		} = this.props
		const {
			refreshForm,
			formTarget,
			itemRender,
            step,
			topBtnAndMenu,
			spinning
		} = store;
		const {
			findPasswordForm,
			findPasswordFormFields,
			checkForm,
			checkFormFields,
			passwordForm,
			passwordFormFields
		} = formTarget;
		const {
			btns, menus
		} = topBtnAndMenu();

		return (
			<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@moap34`} spinning={spinning}>
				<div style={{height: 245}} className="hrmForgetPassword">
					<div style={{width:600, margin: '0px auto'}}>
					{
						step === 1 && 
						<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@twip2v`} center={false} form={findPasswordForm} formFields={findPasswordFormFields} itemRender={itemRender} menus={menus}/>
					}
					{
						step === 2 && 
						<div className="step2">
							<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@y0t6ue`} center={false} form={checkForm} formFields={checkFormFields} itemRender={itemRender} menus={menus}/>
						</div>
					}
					{
						step === 3 && 
						<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@1iqwnv`} center={false} form={passwordForm} formFields={passwordFormFields} itemRender={itemRender} menus={menus}/>
					}
					</div>
					{ 
						this.state.show && 
						<WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@4i95cc`} 
							buttons={btns}
							moreBtn={{datas: menus}}
						/>
					}
				</div>
        	</Spin>
		)
	}
}