import {
	observer,
	inject
} from 'mobx-react';
import {
	Button,
	Popconfirm
} from 'antd';
import {
	WeaFormItem,
	WeaLocaleProvider,
	WeaSlideModal,
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import {
	MagicForm,
} from '../../public/sweet-form.js';
import {
	DistanceToPeak,
} from '../../public/learn.js';
const getLabel = WeaLocaleProvider.getLabel;

const InitButton = props => {
	const {
		handleClick,
		confirm,
		cancel,
		visible,
	} = props;

	return (
		<div className='hrm-init-btnparent'>
			<Popconfirm ecId={`${this && this.props && this.props.ecId || ''}_Popconfirm@yvyjv7`} title={getLabel('505588','本次操作将会覆盖上一次初始化的数据，确认覆盖？')}
				onConfirm={confirm} 
				onCancel={cancel} 
				placement='bottom'
				visible={visible}
			>
				  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bn6wcl`} 
				  	type="primary" 
				  	className='hrm-init-btnparent-button'
				  	onClick={() => handleClick()}
				  >
			    	{getLabel('505589',"开始初始化")}
				</Button>
			</Popconfirm>
    	</div>
	)
}

const Guide = props => {
	const {
		visible,
		open,
		close,
		datas,
		top,
	} = props;

	let width;
	if (screen) {
		width = (screen.width >= 1920) ? 400 : 300
	} else {
		width = 400;
	}

	return (
		<div className='guide' style={{right:window.e9_locale.userLanguage === 8 && -170}}>
			<div onClick={open} className='wrapper'>
				<div className='icon float'>
					<i className='icon-coms-investigate' />
				</div>
				<div className='title wea-f14 float'>{
					getLabel('505590','初始化说明')
				}</div>
			</div>
			<WeaSlideModal ecId={`${this && this.props && this.props.ecId || ''}_WeaSlideModal@8uw1rd`} 
				visible={visible}
				top={top}
				width={width}
				height={100}
				direction={'right'}
				measureY={'%'}
				title={<SlideModalTitle ecId={`${this && this.props && this.props.ecId || ''}_SlideModalTitle@4va3qy`} close={close}/>}
				content={<SlideModalContent ecId={`${this && this.props && this.props.ecId || ''}_SlideModalContent@yo3u6c`} datas={datas}/>}
				onClose={close}
			/>
		</div>
	)
}

const SlideModalTitle = props => {
	const {
		close
	} = props;

	return (
		<div className='header-title'>
			<span className='header-title-icon' onClick={close}>
				<i className='icon-coms-Left'/>
			</span>
			<span>{getLabel('505590','初始化说明')}</span>
		</div>
	)
}

const SlideModalContent = props => {
	const {
		datas
	} = props;

	return (
		<div>
			{
				datas.map((data, index) => {
					const {
						title,
						desc,
						key
					} = data;

					const len = desc.length;
					let c;
					if(len > 1){
						c = (d,i) => <p>{`${i + 1}. ${d}`}</p>
					}else{
						c = (d,i) => <p>{d}</p>
					}

					return (
						<div key={key}>
							<div className='slide-modal'>
								<HorizontalLine ecId={`${this && this.props && this.props.ecId || ''}_HorizontalLine@1mcsvh@${index}`} />
								<span className='slide-modal-title'>
									<i className='icon-coms-task-list' />
									{title}
								</span>
							</div>
							<div  className='slide-modal-content'>{
								desc.map( (d,i) => c(d,i))
							}</div>
						</div>
					)
				})
			}
	</div>
	)
}

const HorizontalLine = props => {
	return (
		<div className='line'></div>
	)
}

@inject('hrmInit')
@observer
export default class InitForm extends React.Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		this.props.hrmInit.getFormMaterial();
	}

	getTransverseSiblingComponents = (params) => {
		const {
			form,
			items
		} = params;

		if (!items) return

		let timerRanger;

		items.map((item, index) => {
			const {
				domkey
			} = item;

			if (domkey[0] === 'restTime_start') {
				//【排除休息时间】开关的状态值
				const excludeRestTime = form.getFormParams().excludeRestTime;

				if (excludeRestTime !== '1') return;

				timerRanger = (
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0ru0vo@${index}`}
			    		label={''}
			    		colon={false}
			    		labelCol={{span: 0}}
			    		wrapperCol={{span: 24}}
			    		error={form.getError(item) } 
	 					tipPosition='bottom'
	 					style={{position: 'absolute', top: 0 ,left: 58}}
          			>	
          				<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@rar62w@${index}`} fieldConfig={item} form={form} formParams={form.getFormParams()} />
          			</WeaFormItem>
				)
			}
		});

		const transverseSiblingComponents = {
			'excludeRestTime': timerRanger,
		};

		return transverseSiblingComponents;
	}

	getTransverseSecondComponent = (conditions) => {
		if (conditions.length === 0) return;

		let transverseSecondComponents = [];

		conditions[0].items.map(item => {
			const {
				domkey
			} = item;

			if (['restTime_start'].includes(domkey[0])) {
				transverseSecondComponents.push(item);
			}
		});

		return transverseSecondComponents
	}

	getDistanceToPeak = (distance) => {
		const {
			hrmInit: store
		} = this.props;

		const {
			setDistanceToPeak
		} = store;

		setDistanceToPeak(distance);
	}

	render() {
		const {
			hrmInit
		} = this.props, {
			formConfig,
			formElements,
			hasInitButton,
			handleInitButtonClick,
			errors,
			confirm,
			cancel,
			switchSlideModal,
			close,
			popConfirmVisible,
			slideModalVisible,
			slideModalDatas,
			slideTop,
		} = hrmInit, {
			form,
			conditions,
		} = formElements;

		return (
			<div className='hrm-init-form'>
				<MagicForm ecId={`${this && this.props && this.props.ecId || ''}_MagicForm@ndpw8o`} 
            		{...formElements}
            		{...formConfig}
            		transverseSiblingComponents={this.getTransverseSiblingComponents({
	        			form,
	        			items: this.getTransverseSecondComponent(conditions),
	        		})}
            		wrapperStyle={{padding: 0}}
            		isFormInit={form.isFormInit}
            		errors={errors}
            	/>
            	{
            		hasInitButton && <InitButton ecId={`${this && this.props && this.props.ecId || ''}_InitButton@56cdfm`} 
            			handleClick={handleInitButtonClick} 
            			confirm={() => confirm()}
            			cancel={() => cancel()}
            			visible={popConfirmVisible}
            			/>
            	}
            	{
            		hasInitButton &&  <Guide ecId={`${this && this.props && this.props.ecId || ''}_Guide@u43oq9`} 
            			visible={slideModalVisible}
            			open={() => switchSlideModal()}
            			close={() => close()}
            			datas={slideModalDatas}
            			top={slideTop}
            		/>
            	}
            	<DistanceToPeak ecId={`${this && this.props && this.props.ecId || ''}_DistanceToPeak@ye3y6n`} requestDistanceToPeak={distance => this.getDistanceToPeak(distance)}/>
			</div>
		);
	}
}