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

@observer
export default class SchedulingInfo extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showGroup: true
		}
	}

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	renderBasicInfo = () => {
		const {
			store
		} = this.props;
		const {
			formTarget,
			refreshBasicInfo
		} = store;
		const {
			schedulingForm: form,
			schedulingFormFields: fields
		} = formTarget;
		let items = [];
		const formParams = form.getFormParams();
		fields.map(f => {
			f.items.map((item, index) => {
				items.push({
					com: (
						<div className='itemRow'>
							<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@novnjk@${index}`} 
								label={`${item.label}`} 
								ratio1to2 
								error={form.getError(item)}
								tipPosition={'bottom'}>
		            			<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@5xogyr@${index}`} fieldConfig={item} form={form} formParams={formParams}/>
		        			</WeaFormItem>
		        		</div>
					),
					col: 1,
				})
			})
		})

		return <div className='basicInfo'><WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@1bbpvv`} title={i18n.label.basicInfo()} center={true} showGroup={this.state.showGroup} onVisibleChange={val => this.setState({showGroup: val})} col={1} items={items}/></div>
	}

	renderDetail = () => {
		const {
			store
		} = this.props;
		const {
			showGroup
		} = this.state;
		const {
			detailTable,
			multiDetailRemoveable,
			addDetail,
			removeDetail,
			saveDetail
		} = store;
		const tableProps = {
			scroll: {
				y: 240 + (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@8k8ol8`}
						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@fomnsz`} 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;
		const {
			editorDialogRightMenu
		} = store;
		return (
			<div className='sdialog'>
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@mfndxa`} datas={editorDialogRightMenu}>
					{this.renderBasicInfo()}
					<SchedulingMember ecId={`${this && this.props && this.props.ecId || ''}_SchedulingMember@jhsvqn`} store={store} showGroup={this.state.showGroup}/>
				</WeaRightMenu>
			</div>
		)
	}
}