import React, { Fragment } from 'react';
import {
	observer,
	inject
} from 'mobx-react';
import {
	WeaLeftRightLayout,
} from 'ecCom';
import {
	Authority,
	Top,
	Search,
	OrgTree,
	RadioGroup,
	Table,
	Dialog,
	MagicForm,
} from '../../public/valhalla/components/index.js';
import { Spin } from 'antd';
import { isEmpty } from "lodash";
import Import from '../../public/valhalla/components/importRelatedComponet/index.js';
import '../../style/vacationRemain.less';

@inject('vacationRemainStore')
@observer
export default class VacationRemain extends React.Component {
	componentWillMount () {
		this.props.vacationRemainStore.preMount();
	}

	componentWillReceiveProps (nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			const {
				vacationRemainStore: store
			} = this.props, {
				orgTreeStore
			} = store;

			this.init();

			orgTreeStore.trigger();
		}
	}

	componentDidMount () {
		this.init();
	}

	init = () => {
		const {
			vacationRemainStore
		} = this.props, {
			init
		} = vacationRemainStore;

		init();
	}

	render () {
		const {
			vacationRemainStore
		} = this.props, {
			authorityStore,
			topStore,
			searchStore,
			tableListStore,
			orgTreeStore,
			radioGroupStore,
			detailDialogStore,
			detailDialogSearchStore,
			detailDialogTableStore,
			editDialogStore,
			formStore,
			importExcelStore,
			pageLoading
		} = vacationRemainStore;

		const { datas } = searchStore;

		return (
			<div className='hrm-vacation-remain'>
				<Authority ecId={`${this && this.props && this.props.ecId || ''}_Authority@ceirwu`} store={authorityStore}>
					<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@kat9fz`} spinning={pageLoading}>
						<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@u3u6p8`} store={topStore}>
							<WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@ck0fcc`}
								isNew={true}
								resize={true}
								leftWidth={300}
								leftCom={<OrgTree ecId={`${this && this.props && this.props.ecId || ''}_OrgTree@0mev2j`} store={orgTreeStore} />}
							>
								{!isEmpty(datas) ? (
									<Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@89bkvu`}>
										<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@w5fk80`} store={searchStore} />
										<RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@iqg5j5`} store={radioGroupStore} />
										<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@rjpija`} store={tableListStore} />
									</Fragment>
								) : (
										<div className="vacation-no-data">
											<div>
												<i className="icon-coms-NoData" />
												<div>
													请启用假期类型并启用假期余额！
											</div>
											</div>
										</div>
									)}
							</WeaLeftRightLayout>
						</Top>
					</Spin>
					{
						importExcelStore.importDialog.visible && <Import ecId={`${this && this.props && this.props.ecId || ''}_Import@q6ec4l`} store={importExcelStore} />
					}
					{
						detailDialogStore.visible && (
							<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@eq5ryp`} store={detailDialogStore}>
								<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@gmljbe`} store={detailDialogSearchStore} />
								<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@xtsg2b`} store={detailDialogTableStore} />
								{
									editDialogStore.visible && (
										<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@73bbqp`} store={editDialogStore}>
											<div className='hrm-balance-detail-form'>
												<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@2j5l09`} store={formStore} />
											</div>
										</Dialog>
									)
								}
							</Dialog>
						)
					}
				</Authority>
			</div>
		);
	}
}