import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaSearchGroup,
	WeaFormItem,
	WeaCheckbox,
	WeaRangePicker,
	WeaHelpfulTip,
	WeaError
} from 'ecCom';
import {
	Button
} from 'antd';
import {
	i18n
} from '../../public/i18n';

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

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	render() {
		const {
			store
		} = this.props;
		const {
			sync,
			syncSettingFormCondition,
			setValid,
			setSyncDate,
			setErrorRef
		} = store;
		let items = [],
			children = [];
		items.push({
			com: <div className='syncForm'>{children}</div>
		})
		Object.keys(syncSettingFormCondition).length > 0 && syncSettingFormCondition.items.map((item, index) => {
			switch (index) {
				case 0:
					children.push(
						(
							<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9yj7r0@${index}`} label={i18n.label.checkEnable()} labelCol={{span:8}} wrapperCol={{span:16}}>
								<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@mmiuf3@${index}`} value={item.isVaild ? '1' : '0'} display={'switch'} onChange={setValid}/>
								<span className='tips'><WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@0pmo1h@${index}`} title={item.tips} /></span>
					        </WeaFormItem>
						)
					);
					break;
				case 1:
					children.push(
						(
							<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@btbxb2@${index}`} label={i18n.label.syncDateRange()}  labelCol={{span:8}} wrapperCol={{span:16}}>
								<div className='dateRange'>
									<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@o0invy@${index}`} error={i18n.message.dataEmpty()} ref={dom => setErrorRef(dom)} tipPosition={'bottom'}>
										<WeaRangePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaRangePicker@cefehi@${index}`} onChange={setSyncDate}/>
									</WeaError>
									<div className='btnGroup'>
										<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@686qoa@${index}`} type='primary' onClick={sync}>{i18n.button.immediateSync()}</Button>
										<div className='tips'><WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@whfii6@${index}`} title={item.tips} /></div>
									</div>
								</div>
					        </WeaFormItem>
						)
					);
					break;
			}
		})

		return (
			<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@1zhhg2`} col={1} title={syncSettingFormCondition.title} showGroup={syncSettingFormCondition.defaultshow} items={items}></WeaSearchGroup>
		)
	}
}