import { Button, Form, InputNumber, Select } from "antd";

const layout = {
  labelCol: { span: 10 },
  wrapperCol: { span: 12 },
};
const tailLayout = {
  wrapperCol: { offset: 10, span: 14 },
};

export default function FormPanel({ setShowResult }) {
  const [form] = Form.useForm();

  return (
    <div className="form-panel">
      <Form
        {...layout}
        form={form}
        name="control-hooks"
        initialValues={{
          N: 100,
          MCMC: 50,
          randFlag: 1,
          proxyFlag: 1,
          L: 5000,
        }}
        onFinish={(values) => {
          setShowResult(true);
        }}
      >
        <Form.Item
          name="N"
          label="背景场集合数量"
          rules={[{ required: true, message: "背景场集合数量是必填项" }]}
        >
          <InputNumber precision={0} placeholder="请输入背景场集合数量" />
        </Form.Item>
        <Form.Item
          name="MCMC"
          label="蒙特卡罗采样次数"
          rules={[{ required: true, message: "蒙特卡罗采样次数是必填项" }]}
        >
          <InputNumber precision={0} placeholder="请输入蒙特卡罗采样次数" />
        </Form.Item>
        <Form.Item
          name="randFlag"
          label="随机数生成方式"
          rules={[{ required: true, message: "随机数生成方式是必选项" }]}
        >
          <Select options={[{ label: "随机数生成方式一", value: 1 }]} />
        </Form.Item>
        <Form.Item
          name="proxyFlag"
          label="同化代用资料的方式"
          rules={[{ required: true, message: "同化代用资料的方式是必选项" }]}
        >
          <Select options={[{ label: "同化代用资料方式一", value: 1 }]} />
        </Form.Item>
        <Form.Item
          name="L"
          label="协方差局地化半径(KM)"
          rules={[{ required: true, message: "协方差局地化半径是必填项" }]}
        >
          <InputNumber placeholder="请输入协方差局地化半径" />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}