import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaTableEdit,
	WeaTimeRangePicker,
} from 'ecCom'
import {
	i18n
} from '../../public/i18n';

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

	getColumns = () => {
		const {
			hrmWorkHour
		} = this.props, {
			changeAm,
			changePm
		} = hrmWorkHour;

		const columns = [{
			title: i18n.label.daytime(),
			dataIndex: 'day',
			key: 'day',
			render: (text) => (
				<span>{text}</span>
			)
		}, {
			title: i18n.label.am(),
			key: 'am',
			render: (text, record) => (
				<WeaTimeRangePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaTimeRangePicker@zj0w4n`} value={record.am} onChange={cb => changeAm(cb,record.key)}/>
			),
		}, {
			title: i18n.label.pm(),
			key: 'pm',
			render: (text, record) => (
				<WeaTimeRangePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaTimeRangePicker@ga5j7b`} value={record.pm} onChange={cb => changePm(cb,record.key)}/>
			),
		}]

		return columns;
	}

	render() {
		const {
			hrmWorkHour
		} = this.props, {
			tableEdit,
			setTableEditDatas,
			setSelectedIndex,
			setRef,
			mainDialog,
		} = hrmWorkHour, {
			datas,
			selectedIndexs,
			totalTime,
		} = tableEdit;

		return (
			<div>
				<WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@zlthcz`}
		            ref={com => setRef(com)}
		          	columns={this.getColumns()}
		          	datas={toJS(datas)}
		          	showAdd={false}
		          	showCopy={false}
		          	showDelete={false}
		          	showTitle={false}
		          	selectedRowKeys={toJS(selectedIndexs)}
		          	onRowSelect={indexs => setSelectedIndex(indexs)}
		          	onChange={datas => setTableEditDatas(datas)}
		        />
		        {mainDialog.contentType == 'edit' ? <p style={{padding: '10px 0',color: 'red', fontWeight: 'bold'}}>
		        										<span>{i18n.label.workingTime()}</span>
		        										<span>{totalTime}</span>
		        									</p>
		        								   : <div></div>
		       	}
		    </div>
		)

	}
}