import React from 'react';
import {
	observer,
	inject
} from 'mobx-react';
import {
	Authority,
	Top,
	Search,
	Table,
	Dialog,
	MagicForm,
	CenterSpin,
} from '../../public/valhalla/components/index.js';
import DispatchImg from './DispatchImg.js';
import DatasProcess from './DatasProcess.js';
import '../../style/payrollSending.less';

@inject('payrollSendingStore')
@observer
export default class PayrollSending extends React.Component {
	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.init();
		}
	}

	componentDidMount() {
		this.init();
	}

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


	    // if (window.doCheckSecondaryVerify4ec) {
	    //     window.doCheckSecondaryVerify4ec({ mouldCode: 'HRM', itemCode: 'SALARY' }, res => {
	    //         if (res.status == "1") {
	    //             init();
	    //         }else{
					// authorityStore.loading = false;
	    //         }
	    //     })
	    // }else{
	    	init();
	    // }
    }

	getTabOneContent = () => {
		const {
			payrollSendingStore
		} = this.props, {
			isSended,
			formStore,
		} = payrollSendingStore;

		if (!isSended) {
			return <MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@7r1v34`} store={formStore}/>
		} else {
			return <DatasProcess ecId={`${this && this.props && this.props.ecId || ''}_DatasProcess@em0k8u`} store={payrollSendingStore}/>
		}
	}

	getDialogContent = () => {
		const {
			payrollSendingStore
		} = this.props, {
			formStore,
			searchStore,
			detailSearchStore,
			detailTableListStore,
		} = payrollSendingStore, {
			selectedKey
		} = searchStore;

		if (selectedKey === '2') {
			return (
				<CenterSpin ecId={`${this && this.props && this.props.ecId || ''}_CenterSpin@j4t50s`} loading={formStore.loading}>
					<div className='payroll-template-form'>
						<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@f30n8x`} store={formStore}/>
					</div>
				</CenterSpin>
			)
		}else{
			return (
				<div>
					<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@80w4ga`} store={detailSearchStore} />
					<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@5j8lxa`} store={detailTableListStore} />
				</div>
			)
		}
	}
	
	render() {
		const {
			payrollSendingStore
		} = this.props, {
			authorityStore,
			topStore,
			searchStore,
			tableListStore,
			dialogStore,
			dispatchImgDialogStore,
			handleRadioChange,
		} = payrollSendingStore, {
			selectedKey
		} = searchStore;

		return (
			<div className='hrm-payroll-sending'>
				<Authority ecId={`${this && this.props && this.props.ecId || ''}_Authority@8ojja3`} store={authorityStore}>
					<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@hp82j1`} store={topStore}>
						<Search ecId={`${this && this.props && this.props.ecId || ''}_Search@20i5n5`} store={searchStore} />
						{
							(selectedKey === '1')  ? this.getTabOneContent()  : (
								<div onChange={handleRadioChange}>
									<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@j2gt7v`} store={tableListStore} />
								</div>
							)
						}
					</Top>
					{
						dialogStore.visible && (
							<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@evn4xt`} store={dialogStore}>
								{
									this.getDialogContent()
								}
							</Dialog>
						)
					}
					{
						dispatchImgDialogStore.visible && (
							<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@dthpph`} store={dispatchImgDialogStore}>
								<div className='payroll-dispatch-form'>
									<DispatchImg ecId={`${this && this.props && this.props.ecId || ''}_DispatchImg@04l341`} store={payrollSendingStore}/>
								</div>
							</Dialog>
						)
					}
				</Authority>
			</div>
		);
	}
}