import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaNewScroll,
	WeaSearchGroup,
	WeaFormItem
} 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 ShiftsSettingInfo extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showGroup: true
		}
	}

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	renderBasicInfo = () => {
		const {
			store
		} = this.props;
		const {
			formTarget,
			refreshBasicInfo,
			clearDetail,
			showError
		} = store;
		const {
			shiftsSettingForm: form,
			shiftsSettingFormFields: fields
		} = formTarget;
		let items = [];
		const formParams = form.getFormParams();
		fields.map(f => {
			f.items.map((item, index) => {
				switch (item.domkey[0]) {
					case 'field003':
						items.push({
							com: (
								<div className='itemRow'>
									<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@1mp746@${index}`} error={form.getError(item)}
										tipPosition={'bottom'}
							        	label={`${item.label}`} ratio1to2>
							        	<div className='modelType'>
							            	<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@riov8u@${index}`} fieldConfig={item} form={form} formParams={formParams} onChange={clearDetail}/>
							            </div>
							            <div className='options'>
								        {
								        	formParams.field003 === '6' && 
								        	<div>
								        		<div className='label'>
								        			{`${f.items[2].label}`}
								        		</div>
								        		<div className='input'>
								        			<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@xnkj7u@${index}`} fieldConfig={f.items[2]} form={form} formParams={formParams}/>
								        		</div>
								        	</div>
								        }
								        </div>
								        <div className='options'>
								        {
								        	formParams.field003 === '6' && 
								        	<div>
								        		<div className='label'>
								        			{`${f.items[3].label}`}
								        		</div>
								        		<div className='input'>
								        			<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@c9fdcc@${index}`} fieldConfig={f.items[3]} form={form} formParams={formParams}/>
								        		</div>
								        	</div>
								        }
								        </div>
							        </WeaFormItem>
						        </div>
							),
							col: 1,
							hide: indexOf(['field004', 'field005'], item.domkey[0]) >= 0
						})
						break;
					default:
						items.push({
							com: (
								<div className='itemRow'>
									<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@88uelw@${index}`} error={form.getError(item)} 
										tipPosition={'bottom'}
										label={`${item.label}`} ratio1to2>
				            			<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@pa3qaq@${index}`} fieldConfig={item} form={form} formParams={formParams}/>
				        			</WeaFormItem>
				        		</div>
							),
							col: 1,
							hide: indexOf(['field004', 'field005'], item.domkey[0]) >= 0
						})
						break;
				}
			})
		})

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

	renderDetail = () => {
		const {
			store
		} = this.props;
		const {
			showGroup
		} = this.state;
		const {
			detailTable,
			multiDetailRemoveable,
			addDetail,
			removeDetail
		} = 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.shiftsDetail()}</div>
						<i className={removeBtnClasses} title={i18n.button.delete()} onClick={!multiDetailRemoveable ? removeDetail : null}/>
						<i className={addBtnClasses} title={i18n.button.add()} onClick={addDetail}/>
					</div>
					<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@hba2xi`} comsWeaTableStore={detailTable} {...tableProps} needScroll={true}/>
			</div>
		)
	}

	render() {
		return (
			<div className='sdialog'>
				{this.renderBasicInfo()}
				{this.renderDetail()}
			</div>
		)
	}
}