import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaFormItem, WeaTools,
} from 'ecCom'
import {
	Spin,
} from 'antd'
import {
	WeaSwitch
} from 'comsMobx'
import ErrorDialog from "./ErrorDialog";
import './style/index.css'
import { toJS } from "mobx";

const { getKey } = WeaTools;

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

	componentWillUnmount() {
		this.props.intelogin.resetLoginTestForm();
	}

	getForm = () => {
		const {
			intelogin
		} = this.props, {
			loginTestForm,
		} = intelogin, {
			condition=[],
			form,
			loading,
		} = loginTestForm, {
			isFormInit
		} = form;
		const {hiddenField} = toJS(intelogin.status);

		let arr = [];
		
		(!loading) && isFormInit && condition.forEach(c => {
			c && c.items && c.items.forEach((field) => {
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7wbw9j@integrationLoginTestForm${"1"}`}
						label={`${field.label}`}
						labelCol={{span: 5, offset: 2}}
						wrapperCol={{span: 15}}
						error={form.getError(field)}
						tipPosition="bottom"
						style={{padding: 10, }}
						hideLabel={["redirecturl", "parameters"].includes(getKey(field))? hiddenField:false}
						className={["redirecturl", "parameters"].includes(getKey(field)) ? 'specialCol' : 'normalCol'}
					>
						<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@gqnnf7@integrationLoginTestForm${field.domkey[0]}`} fieldConfig={field} form={form} formParams={form.getFormParams()}/>
					</WeaFormItem>)
			})
		});

		return <div style={{paddingTop: 15}}>{arr}</div>
	};


	render() {
		const {
			intelogin,
		} = this.props, {
			loginTestForm,
		} = intelogin, {
			loading,
		} = loginTestForm;

		if (loading) {
			return (
				<div className='integration-loading-center-small'>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@je4x84`} spinning={loading}></Spin>
					<ErrorDialog ecId={`${this && this.props && this.props.ecId || ''}_ErrorDialog@dsiy3o`}/>
                </div>

			)
		} else {
			return (
				<div className='integrated-login-form'>
				    {this.getForm()}
					<ErrorDialog ecId={`${this && this.props && this.props.ecId || ''}_ErrorDialog@4huv0x`}/>
				</div>
			)
		}
	}
}