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

import MainForm from './MainForm';
import Table from './Table';

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

	componentDidMount() {
		this.props.hrmConExWarning.getContentInfo();
	}

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

	onOk = () => {
		this.props.hrmConExWarning.deleteTableInfo();
	}

	getCustomComponent = () => {
		const {
			hrmConExWarning
		} = this.props, {
			openDialog,
			table,
		} = hrmConExWarning, {
			tableStore
		} = table;

		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 {
			hrmConExWarning
		} = this.props, {
			mainForm
		} = hrmConExWarning, {
			loading
		} = mainForm;

		return (
			<div>
				{loading ?  <div className='hrm-loading-center-small'>
								<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@w80bgy`} spinning={loading}></Spin>
							</div>
						 :  
						 	(<div className='hrm-search-group'>
								<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@0oujl8`} 
									title={i18n.label.basicInfo()} 
									children={<MainForm ecId={`${this && this.props && this.props.ecId || ''}_MainForm@46rss9`} />} 
									showGroup={true} 
								/>
								<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@rngo9p`} 
									title={i18n.module.contractExpireWarning()} 
									children={<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@9xh0ga`} />} 
									showGroup={true} 
									customComponent={this.getCustomComponent()}
								/>
				          	</div>)
				          	
				} 
			</div>
		)

	}
}