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

@inject('hrmSecondaryVerifyCom')
@observer
export default class SecondaryVerifyCom extends Component {
	componentDidMount() {
		const {
			params,
			location
		} = this.props;

		const {
			authType
		} = params;

		const langid = location.query.langid || window.currLanguageId || window.e9_locale.userLanguage || 7;
        const dialogId = location.query.dialogId;
		setTimeout(() => {
			getLocaleLabelByLang('common,hrm', langid).then(() => {
				this.init(dialogId, authType);
			})
		}, 500)
		
	}

	componentWillMount(){
		const {hrmSecondaryVerifyCom: store} = this.props;
		store.clearTimer();
	}

	// componentWillReceiveProps(nextProps) {
	// 	const {location} = this.props;
    //     const dialogId = location.query.dialogId;
	// 	this.init(dialogId);
	// }

	init = (dialogId, secondAuthType) => {
		const {hrmSecondaryVerifyCom: store} = this.props;
		store.init(dialogId, secondAuthType);
	}

	render() {
		const {
			hrmSecondaryVerifyCom: store,
		} = this.props
		const {
			verifyType,
			spinning,
			topBtnAndMenu,
			formTarget,
			childrenComponents,
			itemRender,
			qrCode
		} = store;
		const {
			verifyForm: form,
			verifyFormFields: formFields,
		} = formTarget;
		const {
			btns, menus
		} = topBtnAndMenu;

		return (
			<div>
				{
					verifyType != 40 ?
					<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@5exmjp`}
						form={form} 
						formFields={formFields} 
						itemRender={itemRender}
						childrenComponents={childrenComponents}/>
					:
					<CAVerify ecId={`${this && this.props && this.props.ecId || ''}_CAVerify@rutlq4`} store={store} />
				}
				{
					(verifyType != null && verifyType != 40) ? <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@u6i2m2`} buttons={btns} /> : null
				}
			</div>
		)
	}
}