import React, {
	Component
} from 'react';
import ReactDOM from 'react-dom'
import {
	observer
} from 'mobx-react';
import {toJS} from 'mobx'
import {
	WeaRightMenu,
	WeaSearchGroup,
	WeaFormItem,
	WeaNewScroll,
	WeaHelpfulTip,
	WeaCheckbox,
	WeaTab,
	WeaButtonIcon,
	WeaTableEditable,
	WeaBrowser 
} from 'ecCom';
import {
	WeaSwitch
} from 'comsMobx';
import {
	Spin
} from 'antd';
import uuid from 'uuid/v1';
import Tabs from '../../coms/Tabs';
import FormInfo from '../../coms/FormInfo';
import {
	findIndex,
	filter,
	has
} 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,
			initFieldList
		} = store;
		const {
			fieldFormFields: fields
		} = formTarget;
		fields && fields.map(f => {
			f.items.map(item => {
				this.setState({
					[`${item.domkey[0]}ShowAll`]: false
				})
			})
		})
		// initFieldList();
	}

	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
		} = this.props;
		const {
			formTarget,
			resetOptionsVal
		} = store;
		const {
			fieldForm: form
		} = formTarget;
		let items = [];
		field.items.map((item, index) => {
			const checked = this.state[`${item.domkey[0]}ShowAll`];
			const formParams = form.getFormParams();
			let f = {
				...item,
				options: filter(item.options, (i) => checked ? true : i.visible)
			}
			items.push({
				com: (
					<div className='itemRow'>
						<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@j0cs3t@${index}`} error={form.getError(item)}
							tipPosition={'bottom'}
				        	label={`${item.label}`} ratio1to2>
				        	<div className='options'>
				            	<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@xfde8p@${index}`} fieldConfig={{...f, hasBorder: f.viewAttr === 1}} form={form}/>
				            </div>
				            <span className='tips'>
				            	<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@9t3cd2@${index}`} 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
			})
		})
		const title = groupSize > 1 ? field.title : null;
		return <div className='fieldList'><WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@6r3sh0`} center title={title} showGroup={field.defaultshow} col={1} items={items}/></div>
	}

	render() {
		const {
			store,
			rightMenu,
		} = this.props;
		const {
			formTarget,
			spinning,
			topTab,
			tabSelectedKey,
			tabChange,
			fieldListTableProps,
			fieldRemovable,
			deleteFields,
			isEntry,
			browserConfig,
			browserChange,
			loading,
		} = store;
		const {
			fieldFormFields: fields
		} = formTarget;
		const className = classnames({
			['tabPane']: true,
			['tabPane-dialog']: true
		})
		// console.log(toJS(enTryColumns))
		return (
			<div className={className}>
				<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@jpe6qi`} height={'100%'}>
					<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@6cdr59`} datas={rightMenu}>
					<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4gize9`} spinning={spinning}>
						{
							isEntry ?
							<div>
								<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@76a44y`} spinning = {loading}>
									<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@960u38`}
										datas={topTab}
										keyParam="scopeId" //主键
										selectedKey={tabSelectedKey}
										buttons={[
										<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@wycq1n`} customized {...browserConfig} onChange = {browserChange}><WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@6ubi69`} buttonType="add" type="primary"  /></WeaBrowser>,
										<WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@1luc43`} buttonType="del" type="primary" disabled={fieldRemovable} onClick = {deleteFields}/>,
										]}
										onChange={tabChange}
										
									/>
									<WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@ir5rne`} rowKey={(record, index) => uuid()} {...fieldListTableProps}/>
								</Spin>
							</div>
							:
							fields && fields.map(field => this.renderGroup(field, fields.length))
						}
					</Spin>
					</WeaRightMenu>
				</WeaNewScroll>
			</div>
		)
	}
}