/*
 * @Author: yangzonglong
 * @Date: 2021-09-10 17:55:27
 * @version: v1.0.0
 * @Descripttion: 
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-09-14 09:28:43
 * @Auditor: 
 */
import React, { memo } from 'react';
import { Col, Form } from 'antd';
import { ExtendFormItemProps, ExtraItemProps } from './interface';
import { FormControls, FormItemTypes } from './util';

const AFormItem = Form.Item;

interface _FormItemProps extends ExtendFormItemProps {
  _extra?: ExtraItemProps[]; // _extra 避免和antd formItem extra冲突
  groupNumber?: number;
}

const FormItem: React.FC<_FormItemProps> = ({
  type,
  groupNumber,
  _extra,
  options,
  ...aFormItemProps
}) => {
  const span = 24 / (groupNumber || 1);
  const Control: any = type ? FormControls[type] : FormControls[FormItemTypes.INPUT];
  const valuePropName = type === FormItemTypes.SWITCH ? 'checked' : 'value';
  const extraRender = _extra?.find(item => item.name === aFormItemProps.name)?.render;

  return (
    <Col span={span}>
      <AFormItem
        valuePropName={valuePropName}
        {...aFormItemProps}>
        {extraRender ? extraRender() : <Control {...options} />}
      </AFormItem>
    </Col>
  )
}

export default memo(FormItem);