import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx';
import {
	WeaRightMenu,
	WeaSearchGroup,
	WeaTableEdit,
} from 'ecCom'
import {
	Spin,
	Button,
} from 'antd'
import {
	i18n
} from '../../public/i18n';

import FormInfo from './FormInfo';

@inject('hrmAssType')
@observer
export default class Group extends React.Component {
	constructor(props) {
		super(props);
		this.assedPostColumns = [{
			title: i18n.label.post(),
			dataIndex: 'post',
			com: [{
				label: '',
				type: 'BROWSER',
				editType: '1',
				key: 'jobtitleId',
				browserConditionParam: {
					type: 24,
					icon: 'icon-coms-hrm',
					iconBgcolor: '#217346',
					title: i18n.label.post(),
				},
			}],
		}];
		this.assItemColumns = [{
			title: i18n.label.assItem(),
			dataIndex: 'item',
			com: [{
				label: '',
				type: 'BROWSER',
				editType: '1',
				key: 'checkItemId',
				browserConditionParam: {
					type: 305,
					icon: 'icon-coms-hrm',
					iconBgcolor: '#217346',
					title: i18n.label.assItem(),
				},
			}, ],
			colSpan: 1,
		}, {
			title: i18n.label.weight(),
			dataIndex: 'weight',
			com: [{
				label: '',
				type: 'INPUTNUMBER',
				editType: '1',
				key: 'checkItemProportion',
			}, (<span style={{paddingTop: 5, paddingLeft: 5}}>{'%'}</span>)],
			colSpan: 1,
		}];
		this.assPersonColumns = [{
			title: i18n.label.type(),
			dataIndex: 'type',
			com: [{
				type: 'CASCADER',
				key: 'cascader',
				compDef: {
					type: 'SELECT',
					options: [{
						key: '1',
						selected: true,
						showname: i18n.label.oneself(),
					}, {
						key: '2',
						selected: false,
						showname: i18n.label.directSuperior(),
					}, {
						key: '3',
						selected: false,
						showname: i18n.label.allSuperiors(),
					}, {
						key: '4',
						selected: false,
						showname: i18n.label.directSubordinates(),
					}, {
						key: '5',
						selected: false,
						showname: i18n.label.allLowerLevels(),
					}, {
						key: '6',
						selected: false,
						showname: i18n.label.anotherDeptPerson(),
					}, {
						key: '7',
						selected: false,
						showname: i18n.label.humanResource(),
					}],
					parent: {
						type: 'div',
						style: {
							width: 100,
							display: 'inline-block',
							float: 'left'
						}
					},
					subChildren: {
						'7': {
							type: 'BROWSER',
							propType: '1',
							key: 'resourceId',
							icon: 'icon-coms-hrm',
							iconBgcolor: '#217346',
							title: i18n.label.humanResource(),
						},
					}
				}
			}],
			width: '60%',
			colSpan: 1,
		}, {
			title: i18n.label.weight(),
			dataIndex: 'weight',
			com: [{
				label: '',
				type: 'INPUTNUMBER',
				editType: '1',
				key: 'checkProportion',
			}, (<span style={{paddingTop: 5, paddingLeft: 5}}>{'%'}</span>)],
			width: '40%',
			colSpan: 1,
		}];
	}

	componentDidMount() {
		this.props.hrmAssType.getFormInfo();
	}

	componentWillUnmount() {
		const {
			hrmAssType
		} = this.props, {
			refreshFormInfo,
			resetTableEdit
		} = hrmAssType;

		refreshFormInfo();
		resetTableEdit();
	}

	getDropMenuDatas = () => {
		const {
			hrmAssType
		} = this.props, {
			formInfo
		} = hrmAssType, {
			loading
		} = formInfo;

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

		return menu
	}

	handleMenuClick = (key) => {
		const {
			hrmAssType,
		} = this.props, {
			save,
		} = hrmAssType;

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

	getAssedPostCom = () => {
		const {
			hrmAssType
		} = this.props, {
			tableEdit,
			setTableEditDatas,
		} = hrmAssType, {
			postDatas,
		} = tableEdit;

		return (
			<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@rii759`} 
				title={i18n.label.assedPost()}
				columns={this.assedPostColumns}
				datas={toJS(postDatas)}
				onChange={cb => setTableEditDatas(cb,'post')}
			/>
		)
	}

	getAssItemCom = () => {
		const {
			hrmAssType
		} = this.props, {
			tableEdit,
			setTableEditDatas,
		} = hrmAssType, {
			itemDatas,
		} = tableEdit;

		return (
			<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@kgao2p`} 
				title={i18n.label.assItem()}
				columns={this.assItemColumns}
				datas={toJS(itemDatas)}
				onChange={cb => setTableEditDatas(cb,'item')}
			/>
		)
	}

	getAssPersonCom = () => {
		const {
			hrmAssType
		} = this.props, {
			tableEdit,
			setTableEditDatas,
		} = hrmAssType, {
			personDatas,
		} = tableEdit;

		return (
			<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@atlsbj`} 
				title={i18n.label.assPerson()}
				columns={this.assPersonColumns}
				datas={toJS(personDatas)}
				onChange={cb => setTableEditDatas(cb,'person')}
			/>
		)
	}

	render() {
		const {
			hrmAssType
		} = this.props, {
			formInfo
		} = hrmAssType, {
			loading
		} = formInfo;

		return (
			<div className='hrm-ass-type'>
				{loading  ? <div className='hrm-loading-center-small'>
								<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ock7s6`} spinning={loading}></Spin>
						    </div>
						  : <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@xamj9x`} datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
					          	<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@9vw27y`} 
					          		title={i18n.label.assDoc()} 
					          		children={<FormInfo ecId={`${this && this.props && this.props.ecId || ''}_FormInfo@9ok7os`} />} 
					          		showGroup={true} />
					          	{/*<WeaSearchGroup 
					          		title={i18n.label.assedPost()} 
					          		children={this.getAssedPostCom()} 
					          		showGroup={true} />
					          	<WeaSearchGroup 
					          		title={i18n.label.assItem()} 
					          		children={this.getAssItemCom()} 
					          		showGroup={true} />
					          	<WeaSearchGroup 
					          		title={i18n.label.assPerson()} 
					          		children={this.getAssPersonCom()} 
					          		showGroup={true} />*/}
					          	<div className='hrm-ass-type-tb'>
					          		<div style={{margin: 10}}>
					          			{this.getAssedPostCom()} 
						          	</div>
						          	<div style={{margin: 10}} >
						          		{this.getAssItemCom()}
						          	</div>
						          	<div className='hrm-ass-type-person' style={{margin: 10}}>
						          		{this.getAssPersonCom()}
						          	</div>
					          	</div>
	          				</WeaRightMenu>
	          	}
	       	</div>
		)

	}
}