import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaDialog,
	WeaFormItem,
	WeaNewScroll,
	WeaRightMenu,
	WeaMoreButton,
} from 'ecCom'
import {
	Spin,
	Button,
	message
} from 'antd'
import {
	WeaSwitch
} from 'comsMobx'
import {
	i18n
} from '../../public/i18n';

@inject('hrmTrainPlan')
@observer
export default class Editor extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			width: 700,
			height: 480,
		}
	}

	getButtons = () => {
		const {
			hrmTrainPlan
		} = this.props, {
			editor,
			editorSave,
		} = hrmTrainPlan, {
			loading
		} = editor;

		let buttons = [
			(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9p47ly`} type="primary" disabled={loading} onClick={() => editorSave()}>{i18n.button.save()}</Button>),
			(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@ns2n69`} />)
		];

		return buttons;
	}

	getForm() {
		const {
			hrmTrainPlan
		} = this.props, {
			editor,
		} = hrmTrainPlan, {
			form,
			condition,
		} = editor, {
			isFormInit,
		} = form;

		let arr = [];
		isFormInit && condition.map(c => {
			c.items.map((field, index) => {
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@23lgvm@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: 6, offset: 2}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: 14}}
                        >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@kbw5o7@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} onChange={callbackInfo => this.handleChange(callbackInfo)}/>
                        </WeaFormItem>)
			})
		})
		return <div className='wea-form-item-group'>{arr}</div>
	}

	handleChange = (callbackInfo) => {
		const {
			hrmTrainPlan
		} = this.props, {
			getTrainTypeContent,
			changeConditions,
		} = hrmTrainPlan;

		const key = Object.keys(callbackInfo)[0];

		if (key == 'trainTypeId') {
			const {
				trainTypeId
			} = callbackInfo, {
				value
			} = trainTypeId;

			getTrainTypeContent(value);
		}

		if (key == 'layoutStartDate') changeConditions(callbackInfo.layoutStartDate.value);
	}

	getDropMenuDatas = () => {
		const {
			hrmTrainPlan
		} = this.props, {
			editor
		} = hrmTrainPlan, {
			loading
		} = editor;

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

		return menu
	}

	handleMenuClick = (key) => {
		const {
			hrmTrainPlan
		} = this.props, {
			editorSave,
		} = hrmTrainPlan;

		key == '0' && editorSave();
	}

	render() {
		const {
			hrmTrainPlan
		} = this.props, {
			editor,
			setEditorDialogVisible,
			date,
		} = hrmTrainPlan, {
			title,
			visible,
			loading,
		} = editor, {
			width,
			height,
		} = this.state;

		return (
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@nqfm6x`}
                title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                onCancel={() => setEditorDialogVisible(false)}
                buttons={this.getButtons()}
                style={{width: width, height: height}}
                onChangeHeight={(h) => this.setState({height: h})}
            >
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@vr4qpu`} spinning={loading}>
                	<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ds5egx`} datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
                    	<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@xwwxxp`} height={height}>
                    	    <div className='hrm-dialog-form hrm-train-plan-form'>
                    	        {this.getForm()}
                    	    </div>
                    	</WeaNewScroll>
                    </WeaRightMenu>
                </Spin>
            </WeaDialog>
		)

	}
}