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

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 6, span: 16 },
};

const { Option } = Select;

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

  return (
    <div className="form-panel">
      <Form
        {...layout}
        form={form}
        name="control-hooks"
        initialValues={{
          sic: ["sic_s"],
          sce: ["sc_ea", "sc_tp"],
          st: [
            "ts_1",
            "ts_2",
            "ts_3",
            "ts_4",
            "ts_5",
            "ts_6",
            "ts_7",
            "ts_8",
            "ts_9",
            "ts_10",
            "ts_11",
            "ts_12",
          ],
        }}
        onFinish={(values) => {
          setShow(true);
        }}
      >
        <Form.Item
          name="sic"
          label="海冰密集度"
          rules={[{ required: true, message: "海冰密集度是必选项" }]}
        >
          <Select placeholder="请选择海冰密集度区域" mode="multiple">
            <Option value="sic_s">南极附近海冰</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="sce"
          label="积雪范围"
          rules={[{ required: true, message: "积雪范围是必选项" }]}
        >
          <Select placeholder="请选择积雪范围" mode="multiple">
            <Option value="sc_ea">欧亚大陆积雪异常</Option>
            <Option value="sc_tp">青藏高原积雪异常</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="st"
          label="地表温度范围"
          rules={[{ required: true, message: "地表温度范围是必选项" }]}
        >
          <Select placeholder="请选地表温度范围" mode="multiple">
            <Option value="ts_1">ts_1</Option>
            <Option value="ts_2">ts_2</Option>
            <Option value="ts_3">ts_3</Option>
            <Option value="ts_4">ts_4</Option>
            <Option value="ts_5">ts_5</Option>
            <Option value="ts_6">ts_6</Option>
            <Option value="ts_7">ts_7</Option>
            <Option value="ts_8">ts_8</Option>
            <Option value="ts_9">ts_9</Option>
            <Option value="ts_10">ts_10</Option>
            <Option value="ts_11">ts_11</Option>
            <Option value="ts_12">ts_12</Option>
          </Select>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
