import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaNewScroll,
	WeaSearchGroup,
	WeaFormItem,
	WeaBrowser,
	WeaRightMenu
} from 'ecCom';
import {
	WeaSwitch,
	WeaTableNew
} from 'comsMobx';
import FormInfo from '../../../coms/FormInfo';
import {
	i18n
} from '../../../public/i18n';
import {
	indexOf
} from 'lodash';
import classnames from 'classnames';
const {
	WeaTable
} = WeaTableNew;

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

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}


	renderDetail = () => {
		const {
            store,
            showGroup
		} = this.props;
		const {
			detailTable,
			multiDetailRemoveable,
			addDetail,
			removeDetail,
			saveDetail
		} = store;
		const tableProps = {
			scroll: {
				y: 265 + (showGroup ? 0 : 240)
			}
		}

		const addBtnClasses = classnames({
				['icon-coms-Add-to-hot']: true,
				['btn']: true,
				['btn-active']: true
			}),
			removeBtnClasses = classnames({
				['icon-coms-form-delete-hot']: true,
				['btn']: true,
				['btn-active']: !multiDetailRemoveable,
				['btn-disable']: multiDetailRemoveable,
			});

		return (
			<div className='detail'>
				<div className='btnBar'>
					<div className='label'>{i18n.label.scheduleMember()}</div>
					<i className={removeBtnClasses} title={i18n.button.delete()} onClick={!multiDetailRemoveable ? () => removeDetail() : null}/>
					<i className='browser'>
					<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@9ax94c`}
						customized
						type={17}
    					textDecoration={true}
						icon={'icon-coms-hrm'}
						iconBgcolor={'#217346'}
						inputStyle={{width: 200}}
						onChange={saveDetail}
						isSingle={false}
						title={i18n.label.multiResouce()}
					>
						<i className={addBtnClasses} title={i18n.button.add()} />
					</WeaBrowser>
					</i>
				</div>
				<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@dwgs3h`} comsWeaTableStore={detailTable} 
					{...tableProps} 
					needScroll={true}
                    onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}/>
			</div>
		)
	}

	onOperatesClick = (record, index, operate) => {
		const func = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
		const id = record.id ? record.id : '';
		this[func] && this[func](id);
	}

	doDel = (id) => {
		const {
			store
		} = this.props;
		const {
			removeDetail
		} = store;
		removeDetail({
			id
		})
	}

	render() {
		const {
			store
		} = this.props;
		return (
            <div>
				{this.renderDetail()}
            </div>
		)
	}
}