import React from 'react'
import * as mobx from 'mobx'
import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaTop,
	WeaAlertPage,
} from 'ecCom'
import {
	Spin,
	message,
} from 'antd'
import Editor from './Editor'
import {
	HocFactory
} from './HocFactory'
import {
	i18n
} from '../../public/i18n';

const JobGroupEditor = HocFactory(Editor, 'jobGroup');
const JobEditor = HocFactory(Editor, 'job');
const PostEditor = HocFactory(Editor, 'post');

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

	componentWillMount() {
		const {
			hrmSinglePostFormStore
		} = this.props, {
			setPostId
		} = hrmSinglePostFormStore;

		setPostId(this.props.location.query.id);
	}

	componentDidMount() {
		const {
			hrmSinglePostFormStore
		} = this.props, {
			getRight,
			setParentHideMthd,
		} = hrmSinglePostFormStore;

		getRight();
		this.props.onRef && this.props.onRef(this);
		setParentHideMthd(this.props.hide)
	}

	handlePlusClick = (type) => {
		const {
			hrmSinglePostFormStore
		} = this.props, {
			setJobGroupDialogVisible,
			setJobDialogVisible
		} = hrmSinglePostFormStore;

		type == 'jobGroup' && setJobGroupDialogVisible(true);
		type == 'job' && setJobDialogVisible(true);
	}

	save = () => {
		const {
			hrmSinglePostFormStore
		} = this.props, {
			savePostForm
		} = hrmSinglePostFormStore;

		savePostForm()
	}

	saveForm = () => {
		const {
			hrmSinglePostFormStore
		} = this.props, {
			post,
			job,
			jobGroup,
			saveJobGroupForm,
			saveJobForm
		} = hrmSinglePostFormStore;

		if (jobGroup.visible) {
			saveJobGroupForm();
			return;
		}
		if (job.visible) {
			saveJobForm();
			return;
		}
	}

	render() {
		const {
			hrmSinglePostFormStore
		} = this.props, {
			post,
			job,
			jobGroup,
			setJobDialogVisible,
			setJobGroupDialogVisible,
			date,
			auth,
		} = hrmSinglePostFormStore;

		if (!auth) {
			return (
				<div style={{height: '100%'}}>
					{post.loading ? <div className='hrm-loading-center'>
										<Spin spinning={post.loading} size='large'></Spin>
									</div>
						     	  :	<div className="hrm-wea-alert-page">
			                			<WeaAlertPage>
							                <div style={{ color: '#000' }}>
							                    {i18n.message.authFailed()}
							                </div>
			                      		</WeaAlertPage>
	                        		</div>
	                }	
                </div>
			)
		} else {
			return (
				<div>
					<WeaTop 
						title={i18n.label.post()}
						icon={<i className='icon-coms-hrm' />}
                		iconBgcolor="#217346"
					/>
					<PostEditor {...post} isFormInit={post.form.isFormInit} plusClick={type => this.handlePlusClick(type)}/>
					{job.visible && <JobEditor 
										{...job} 
										isFormInit={job.form.isFormInit} 
										plusClick={type => this.handlePlusClick(type)} 
										saveForm={() => this.saveForm()} 
										closeDialog={() => setJobDialogVisible(false)}
									/>
					}
					{jobGroup.visible && <JobGroupEditor 
											{...jobGroup} 
											isFormInit={jobGroup.form.isFormInit} 
											saveForm={() => this.saveForm()} 
											closeDialog={() => setJobGroupDialogVisible(false)}
										 />
					}
				</div>
			)
		}

	}
}