import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaFormItem,
	WeaInputSearch
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import DateSwitch from './DateSwitch';
import {
	i18n
} from '../../public/i18n';
import {
	findIndex
} from 'lodash';
import classnames from 'classnames';

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

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	render() {
		const {
			store
		} = this.props;
		const {
			refreshCondition,
			formTarget,
			onCountryChange,
			onOptionChange,
			showAttendanceType,
			setHolidayName,
			getDataList,
			holidayname
		} = store;
		const {
			conditionForm: form,
			conditionFormFields: fields
		} = formTarget;
		let children = [];
		fields && fields.map(f => {
			f.items.map((item, index) => {
				switch (item.domkey[0]) {
					case 'countryid':
						children.push(
							(
								<div className='country'>
									<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0iptiy@${index}`} ratio1to2 label={item.label}>
										<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@3y5lcx@${index}`} form={form} fieldConfig={item} onChange={onCountryChange} />
									</WeaFormItem>
								</div>
							)
						);
						children.push(<DateSwitch ecId={`${this && this.props && this.props.ecId || ''}_DateSwitch@nluel3@${index}`} store={store}/>);
						break;
					case 'attendancetype':
						if(showAttendanceType){
							const {
								options,
								otherParams
							} = item;
							const {
								optionsParams
							} = otherParams;
							children.push(
								(
									<div className='options'>
									{
										options.map((option, i) => {
											let bgColor = null, val = '';
											if(i > 0){
												const colorKey = `${i}_color`,valKey = `${i}_value`;
												bgColor = optionsParams[i - 1][colorKey];
												val = `:${optionsParams[i - 1][valKey]}${i18n.label.day()}`;
											}
											return (
												<div className='item' onClick={() => onOptionChange(option.key)}>
													<div className='square' style={{background: bgColor}}></div>
													<div className='label'>{`${option.showname}${val}`}</div>
												</div>
											)
										})
									}
									</div>
								)
							)
						}
						break;
					default:
						break;
				}
			})
		})
		if(!showAttendanceType)
			children.push(<div className='options' style={{paddingRight: 13}}><WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@xg4okt`} value={this.holidayname} onSearch={(val) => {setHolidayName(val);getDataList()}} /></div>)

		return (
			<div className='conditionBar'>
				{children}
			</div>
		)
	}
}