import {
	inject,
	observer,
} from 'mobx-react'

import React, {
	Component
} from 'react';

import {
	WeaTableEdit,
	WeaHelpfulTip
} from 'ecCom'

import {
	Spin,
} from 'antd';

import * as mobx from 'mobx'
const toJS = mobx.toJS;

@inject('hrmCardItemSet')

@observer
export default class DefineShowItems extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		this.init();
	}

	init() {
		const {
			hrmCardItemSet
		} = this.props;

		hrmCardItemSet.loadTabTwoRelatedData();
	}

	onRowSelect(sRowKeys, rows, dataIndex, selectedDatas) {
		const {
			hrmCardItemSet
		} = this.props;

		if (dataIndex === undefined || selectedDatas === undefined) {
			return
		}
		hrmCardItemSet.setEnableRows(selectedDatas.isused);
	}


	render() {
		const {
			hrmCardItemSet
		} = this.props, {
			tabTwoRelatedData
		} = hrmCardItemSet, {
			datas,
			columns,
			selectedData,
			loading,
			authorized,
		} = tabTwoRelatedData;

		if (!authorized) {
			return (
				<div style={{height: '100%'}}>
					{loading ?  <div className='hrm-loading-center'>
									<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@bzoa0r`} spinning={loading} size='large'></Spin>
								</div>
						     :	<div className="hrm-wea-alert-page">
		                			<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@2zn68e`}>
						                <div style={{ color: '#000' }}>
						                    {i18n.message.authFailed()}
						                </div>
		                      		</WeaAlertPage>
	                        	</div>
	                }	
                </div>
			)
		} else {
			return (
				<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@7rorir`}
				    draggable
		            deleteConfirm
		            title={''} 
		            columns={toJS(columns)} 
		            datas={toJS(datas)}
		            copyFilterProps={['id']}
		            selectedData={!loading && toJS(selectedData)}
		            onChange={e => hrmCardItemSet.setTableEditDatas(e)}
		            onRowSelect={(sRowKeys, rows, dataIndex, selectedDatas) => this.onRowSelect(sRowKeys, rows, dataIndex, selectedDatas)}
		        />
			)
		}
	}
}