import React, {
	Component
} from 'react';
import ReactDOM from 'react-dom'
import {
	observer
} from 'mobx-react';
import {
	WeaRightMenu,
	WeaSearchGroup,
	WeaFormItem,
	WeaNewScroll,
	WeaHelpfulTip,
	WeaCheckbox
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import {
	Spin
} from 'antd';
import {
	filter,
} from 'lodash';
import {
	i18n
} from '../../public/i18n';
import classnames from 'classnames';

@observer
export default class FieldList extends Component {
	constructor(props) {
		super(props);
		this.state = {}
	}

	componentDidMount() {
		const {
			store
		} = this.props;
		const {
			formTarget
		} = store;
		const {
			fieldFormFields: fields
		} = formTarget;
		fields && fields.map(f => {
			f.items.map(item => {
				this.setState({
					[`${item.domkey[0]}ShowAll`]: false
				})
			})
		})
	}

	componentWillReceiveProps(nextProps) {
		const {
			store
		} = nextProps;
		const {
			formTarget
		} = store;
		const {
			fieldFormFields: fields
		} = formTarget;
		fields && fields.map(f => {
			f.items.map(item => {
				this.setState({
					[`${item.domkey[0]}ShowAll`]: false
				})
			})
		})
	}

	renderGroup = (field, groupSize) => {
		const {
			store,
			moduleName
		} = this.props;
		const {
			formTarget,
			resetOptionsVal
		} = store;
		const {
			fieldForm: form
		} = formTarget;
		let items = [];
		field.items.map((item, idx) => {
			const {conditionType} = item;
			const checked = this.state[`${item.domkey[0]}ShowAll`];
			const formParams = form.getFormParams();
			let f = {
				...item,
				options: filter(item.options, (i) => checked ? true : i.visible)
			}

			if(conditionType != 'DESCRIPTION'){
				items.push({
					com: (
						<div className='itemRow'>
							<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qmdcpb@${idx}`} error={form.getError(item)}
								tipPosition={'bottom'}
								label={`${item.label}`} ratio1to2>
								<div className='options'>
									<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@do7l09@${idx}`} fieldConfig={{...f, hasBorder: f.viewAttr === 1}} form={form}/>
								</div>
								<span className='tips'>
									<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@wr29id@${idx}`} disabled={item.viewAttr === 1} content={i18n.label.showAllType()} onChange={(val) => {
										resetOptionsVal(item.domkey[0]);
										this.setState({
											[`${item.domkey[0]}ShowAll`]: (val === '0' ? false : true)
										})
										}}
									/>
								</span>
							</WeaFormItem>
						</div>
					),
					col: 1
				})
			}else{
			f.value = (<div><span>{idx}</span><span>{f.viewAttr}</span></div>)
				items.push({
					com: (
						<div className='itemRow1'>
							<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@3ofvpi@${idx}`} hideLabel={true}>
								<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@k5d0kv@${idx}`} fieldConfig={{...f, hasBorder: f.viewAttr === 1}} form={form}/>
							</WeaFormItem>
						</div>
					),
					col: 1
				})
			}
		})
		let title = '';
		if('statesShedule' === moduleName){
			title = field.title;
		}else {
			title = (groupSize > 1 ? field.title : null);
		}
		return <div className='fieldList'><WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@wr347a`} center title={title} showGroup={field.defaultshow} col={1} items={items}/></div>
	}

	render() {
		const {
			store,
			rightMenu,
			moduleName
		} = this.props;
		const {
			formTarget,
			spinning
		} = store;
		const {
			fieldFormFields: fields
		} = formTarget;
		const className = classnames({
			['tabPane']: true,
			['tabPane-dialog']: true
		})
		return (
			<div className={className}>
				<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@gdlvgm`} height={'100%'}>
					<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@chbgxn`} datas={rightMenu}>
					<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ekhewt`} spinning={spinning}>
					{
						fields && fields.map(field => this.renderGroup(field, fields.length))
					}
					</Spin>
					</WeaRightMenu>
				</WeaNewScroll>
			</div>
		)
	}
}