import Item from "./Item.js";

class Sub extends React.Component {
	render() {
		const {
			sub,
			form,
			width
		} = this.props;

		const sub_width = (100 - parseFloat(width)) / (sub.datas.length) + "%";

		return (
			sub.datas.map(data => (
				<div style={{width: sub_width}} className={`dp-inb ${data.key}` } >
					{ data.type ? <Item ecId={`${this && this.props && this.props.ecId || ''}_Item@nuwjtq@hrm`} data={data} form={form}/> : <span id={data.key}>{data.label}</span> }
				</div>
			))
		);
	}
}

export default class Group extends React.Component {
	render() {
		const {
			name,
			datas,
			form
		} = this.props;

		return (
			<div>
				{ name && <div className="editor-form-title">{name}</div> }
				{ datas.map(data =>{
					const {
						type,
						width,
						sub
					} = data;

					//type存在，当前渲染的元素为表单元素
					if (type) {
						return (
							<div className="editor-form-row">
								<div style={{width}} className={`dp-inb ${data.key}` }>
									<Item ecId={`${this && this.props && this.props.ecId || ''}_Item@ynsxxt@hrm`} data={data} form={form}/>
								</div>
								{ sub && <Sub ecId={`${this && this.props && this.props.ecId || ''}_Sub@xfwnuy@hrm`} {...data} form={form}/> }
							</div>
						)
					}else {
						return (
							<div className="editor-form-row">
								<div style={{width}} className={`dp-inb ${data.key}` } >{data.label}</div>
								{ sub && <Sub ecId={`${this && this.props && this.props.ecId || ''}_Sub@3tc1qk@hrm`} {...data} form={form}/> }
							</div>
						)
					}
				} ) }
			</div>
		);
	}
}