import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaRightMenu,
	WeaSearchGroup,
} from 'ecCom'
import {
	Spin,
	Modal,
} from 'antd'
import {
	i18n
} from '../../public/i18n';
const confirm = Modal.confirm;

import PageFormInfo from './PageFormInfo';
import TableEdit from './TableEdit';

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

	getDropMenuDatas = () => {
		const {
			hrmAttendanceSetting
		} = this.props, {
			pageFormInfo
		} = hrmAttendanceSetting, {
			loading
		} = pageFormInfo;

		const menu = [{
			key: '0',
			icon: <i className='icon-coms-Preservation' />,
			content: i18n.button.save(),
			disabled: loading,
		}, {
			key: '3',
			icon: <i className='icon-coms-Print-log' />,
			content: i18n.button.log(),
		}, {
			key: '1',
			icon: <i className='icon-coms-Collection' />,
			content: i18n.button.collect(),
			disabled: true,
		}, {
			key: '2',
			icon: <i className='icon-coms-help' />,
			content: i18n.button.helper(),
			disabled: true,
		}];

		return menu
	}

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

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

		key == '3' && window.setLogViewProps({
			logSmallType: '20039'
		});
	}

	showConfirm = () => {
		let _this = this;
		confirm({
			title: i18n.confirm.defaultTitle(),
			content: i18n.confirm.removeSelected(),
			okText: i18n.button.ok(),
			cancelText: i18n.button.cancel(),
			onOk() {
				_this.onOk()
			},
			onCancel() {
				return false
			},
		});
	}

	onOk = () => {
		const {
			hrmAttendanceSetting,
		} = this.props, {
			deleteTableInfo,
		} = hrmAttendanceSetting;

		deleteTableInfo()
	}

	getCustomComponent = () => {
		const {
			hrmAttendanceSetting
		} = this.props, {
			openDialog,
			tableEdit,
		} = hrmAttendanceSetting, {
			tableStore
		} = tableEdit;

		const len = tableStore.selectedRowKeys.length;

		return (<div>
						<i 
							className='icon-coms-plus hrm-attendance-setting-icon' 
							onClick={() => openDialog()}
						/>
						<i 
							className='icon-coms-Loss hrm-attendance-setting-icon' 
							style={len > 0 ? {backgroundColor: '#2DB7F5'} : {backgroundColor: '#D9D9D9'}}
							onClick={() => (len > 0) && this.showConfirm() }
						/>
					</div>)
	}

	render() {
		const {
			hrmAttendanceSetting
		} = this.props, {
			pageFormInfo
		} = hrmAttendanceSetting, {
			loading
		} = pageFormInfo;

		return (
			<div className='hrm-work-hour'>
				{loading  ? <div className='hrm-loading-center-small'>
								<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@j0j4yd`} spinning={loading}></Spin>
							</div>
						 : <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ocgnxf`} 
						 		datas={this.getDropMenuDatas()} 
						 		onClick={ key => this.handleMenuClick(key)}
						 		collectParams={{favname:i18n.module.attendanceSetting(),favouritetype:5}}
						 	>
								<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ifnjtb`} 
									title={i18n.label.basicInfo()} 
									children={<PageFormInfo ecId={`${this && this.props && this.props.ecId || ''}_PageFormInfo@v8waa4`} />} 
									showGroup={true} 
								/>
								{window.WeaHrm4Formal && <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@4xll3m`} 
									title={i18n.label.attendanceRulesSetting()} 
									children={<TableEdit ecId={`${this && this.props && this.props.ecId || ''}_TableEdit@wgygbh`} />} 
									showGroup={true} 
									customComponent={this.getCustomComponent()}
								/>} 
				          	</WeaRightMenu>
				}
			</div>
		)

	}
}