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

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

	componentDidMount() {
		const {
			hrmAttendanceSetting
		} = this.props, {
			getSubFormInfo
		} = hrmAttendanceSetting;

		getSubFormInfo();
	}

	componentWillUnmount() {
		const {
			hrmAttendanceSetting
		} = this.props, {
			refreshSubFormInfo
		} = hrmAttendanceSetting;

		refreshSubFormInfo();
	}

	getDropMenuDatas = () => {
		const {
			hrmAttendanceSetting
		} = this.props, {
			subFormInfo
		} = hrmAttendanceSetting, {
			loading
		} = subFormInfo;

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

		return menu
	}

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

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

	getForm = () => {
		const {
			hrmAttendanceSetting
		} = this.props, {
			subFormInfo,
		} = hrmAttendanceSetting, {
			form,
			conditions,
			date,
		} = subFormInfo, {
			isFormInit,
		} = form;

		const {
			showseclevel,
			showseclevelto
		} = form.getFormParams();

		const arr = [];
		isFormInit && conditions.map(c => {
			c.items.map((field, index) => {
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@rn4b5v@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: 6, offset: 2}}
                            wrapperCol={{span: 14}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                        >
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ox8rmz@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />
                        </WeaFormItem>)
			})
		})

		arr.push(this.getInstruction());

		return <div className='wea-form-item-group'>{arr}</div>
	}

	getInstruction = () => {
		const {
			hrmAttendanceSetting
		} = this.props, {
			subFormInfo
		} = hrmAttendanceSetting, {
			prompts
		} = subFormInfo;

		const arr = []
		toJS(prompts).map(ps => {
			arr.push(<p>{ps}</p>);
		});

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@48rszu`}
                label={i18n.label.explain()}
                labelCol={{span: 6, offset: 2}}
                wrapperCol={{span: 14}}
            >
            	{arr}
            </WeaFormItem>
		)

	}

	render() {
		const {
			hrmAttendanceSetting
		} = this.props, {
			subFormInfo
		} = hrmAttendanceSetting, {
			loading
		} = subFormInfo;

		return (<div style={{height: '100%'}}>
					{loading ? 	<div style={{textAlign:'center',padding: 90}}>
									<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@l9mrzo`} spinning={loading}></Spin>
								</div>
							 :	<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@lmlq4b`} datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
									<div className='hrm-dialog-form'>
								        {this.getForm()}
								    </div>
					            </WeaRightMenu>
		             }
				</div>)
	}
}