import { AutoCenter, Button, Form, Space } from 'antd-mobile';
import './index.css';
import { XFormOne } from './XFormOne';
import { useAsyncEffect } from 'ahooks';
import { useXForm } from './useXForm';
import React from 'react';


interface Props {
  formJson: any[];
  loadData: any;
}

const XForm: React.FC<Props> = ({ formJson, loadData }) => {
  const {
    fromItem,
    SelectsData,
    onFinish,
    initForm,
    realJsonData,
    selectsItemCheck
  } = useXForm(formJson, loadData)
  useAsyncEffect(async () => {
    await initForm()
  }, [formJson]);
  return (
    <>
      {SelectsData && (
        <Form
          name="form"
          form={fromItem}
          onFinish={onFinish}
          footer={
            <Space wrap justify="center" block>
              <Button
                block
                type="button"
                color="primary"
                size="middle"
                shape="default"
                onClick={() => {
                  fromItem.resetFields();
                }}
              >
                重置
              </Button>
              <Button
                block
                type="submit"
                color="primary"
                size="middle"
                shape="default"
              >
                查询
              </Button>
            </Space>
          }
        >
          <Form.Header>
            {' '}
            <AutoCenter>筛选条件</AutoCenter>
          </Form.Header>
          {realJsonData.map((item, index) => (
            <XFormOne
              attr={item}
              selectsArray={SelectsData.SelectsArray}
              selectsItemCheck={selectsItemCheck}
              key={index}
            />
          ))}
        </Form>
      )}
    </>
  );
};

export default XForm;