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

const WeaTable = WeaTableNew.WeaTable;

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

	componentWillMount() {
		const {
			hrmTrainArrange
		} = this.props, {
			setSelectedRowsKeys
		} = hrmTrainArrange;

		setSelectedRowsKeys(this.props.location.query.trainPlanId, 'singlePage');
	}

	componentDidMount() {
		const {
			hrmTrainArrange
		} = this.props, {
			getSingleArrangeInfo,
		} = hrmTrainArrange;

		getSingleArrangeInfo(true);

		$("#container").css('overflow', 'scroll');
	}

	getDropMenuDatas = () => {
		const {
			hrmTrainArrange,
		} = this.props, {
			menu,
		} = hrmTrainArrange, {
			rightMenu
		} = menu;

		let menus = [];
		toJS(rightMenu).map((item, index) => {
			let obj = {
				key: item.menuFun,
				icon: <i className={`${item.menuIcon}`}/>,
				content: item.menuName,
			}
			if (item.menuFun == 'log' || item.menuFun == 'collection' || item.menuFun == 'help' || item.menuFun == 'pageAddress') {
				obj.disabled = true;
			}
			menus.push(obj);
		})

		return menus;
	}

	handleMenuClick = (key) => {
		this[key] && this[key]();
	}

	save = () => {
		const {
			hrmTrainArrange
		} = this.props, {
			singlePageSave
		} = hrmTrainArrange;

		singlePageSave();
	}

	edit = () => {
		const {
			hrmTrainArrange
		} = this.props, {
			getSingleArrangeInfo
		} = hrmTrainArrange;

		getSingleArrangeInfo(false);
	}

	range = () => {
		window.open(`/spa/hrm/engine.html#/hrmengine/arrangeScope?trainPlanId=${this.props.location.query.trainPlanId}`);
	}

	apply = () => {
		const {
			hrmTrainArrange
		} = this.props, {
			getWorkFlowId
		} = hrmTrainArrange;

		getWorkFlowId(this.props.location.query.trainPlanId);
	}

	custom = () => {
		const {
			hrmTrainArrange
		} = this.props, {
			singlePage,
		} = hrmTrainArrange, {
			tableStore
		} = singlePage;

		tableStore.setColSetVisible(true);
		tableStore.tableColSet(true);
	}

	getForm = () => {
		const {
			hrmTrainArrange
		} = this.props, {
			singlePage,
		} = hrmTrainArrange, {
			form,
			conditions,
		} = singlePage, {
			isFormInit,
		} = form;

		let arr = [];
		isFormInit && conditions.map(c => {
			c.items.map((field, index) => {
				arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@2b5fae@${index}`}
                            label={`${field.label}`}
                            labelCol={{span: 6, offset: 2}}
                            wrapperCol={{span: 14}}
                            error={form.getError(field)}
                            tipPosition="bottom"
                            style={index == 0 ? {margin: '20px 12% 0'} : {margin: '0 12%'}}
                        >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@sixdn4@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} onChange={cb => this.handleChange(cb)}/>
                        </WeaFormItem>)
			})
		})
		return <div className='wea-form-item-group'>{arr}</div>
	}

	handleChange = (cb) => {
		const {
			hrmTrainArrange
		} = this.props, {
			singlePage,
			getTrainPlanContent,
			addLimitParam,
		} = hrmTrainArrange, {
			conditions
		} = singlePage;

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

		if (key == 'trainLayoutId') {
			getTrainPlanContent(cb.trainLayoutId.value, 'single')
		}

		if (key == 'planStartDate') {
			addLimitParam(cb.planStartDate.value, conditions, 'single')
		}
	}

	getTable = () => {
		const {
			hrmTrainArrange
		} = this.props, {
			singlePage
		} = hrmTrainArrange, {
			tableStore
		} = singlePage;

		return (
			<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ge414a`} 
				comsWeaTableStore={tableStore}
				hasOrder={true}
				needScroll={true}
			/>
		)
	}

	render() {
		const {
			hrmTrainArrange
		} = this.props, {
			singlePage
		} = hrmTrainArrange, {
			loading
		} = singlePage;

		return (
			<div className='hrm-single-arrange'>
				{loading  ? <div style={{textAlign: 'center', paddingTop: 200}}>
								<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@6tihzh`} spinning={loading}></Spin>
						    </div>
						  : <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@s8susp`} datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
					          	<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@utjvow`} 
					          		title={i18n.label.basicInfo()} 
					          		children={this.getForm()} 
					          		showGroup={true} />
					          	<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@f5xywy`} 
					          		title={i18n.label.trainSchedule()} 
					          		children={this.getTable()} 
					          		showGroup={true} 
					          	/>
	          				</WeaRightMenu>
	          	}
	       	</div>
		)

	}
}