import {
    WeaFormItem,
} from 'ecCom'

import {
    Spin,
    Button,
    Tooltip
} from 'antd'

import {
    i18n
} from '../../public/i18n';

import '../../style/common.less';
import { chunk } from 'lodash';

export default class FormItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    render() {
        const {
            groupInfo
        } = this.props, {
        } = this.state;
        const newData = chunk(groupInfo.items, 3);

        return (
            <div className='form-item' id={groupInfo.id}>
                <div className='title'>
                    <div></div>
                    <p>{groupInfo.title}</p>
                </div>
                <div className='content'>
                    {newData.map((item, index) => {
                        return (
                            <div key={index} className='item'>
                                {item.map((subItem) => {
                                    return (
                                        <div>
                                            <span>{subItem.fieldId}</span>
                                            {subItem.fieldValue.length > 10 ? <Tooltip placement="topLeft" title={subItem.fieldValue}>
                                                <span>{subItem.fieldValue}</span>
                                            </Tooltip> : <span>{subItem.fieldValue}</span>}

                                        </div>

                                    );
                                })}
                            </div>
                        );
                    })}
                </div>

            </div>
        )
    }
}