import { Col, Row } from 'antd';
import React from 'react';
import { getComUi } from "../../FormComponent"
import { getItemProps } from "../../utils"
import schema from "./schema"

const GroupWapper = (item: any) => {
  const data: any = getItemProps(schema, item)
  const { HeaderProps, ControlProps, FormItemProps } = data
  const { Content, style: ControlStyle } = ControlProps
  const { grid, style: FormItemStyle } = FormItemProps
  const { style: HeaderStyle, title } = HeaderProps
  return <Row
    style={{ ...FormItemStyle }}
  >
    <div style={{ width: "100%", background: "#fff" }}>
      <div className='kx_group_header' style={HeaderStyle}>{title || "标题"}</div>
      <Row style={ControlStyle} className="kx_group_body">
        {Content?.map((item: any) => {
          return <Col span={24 / grid} key={item.$id}>
            {getComUi({ ...item, componentType: 'FormItem' })}
          </Col>
        })}
      </Row>
    </div>
  </Row>;
};

export default GroupWapper;