import { Button, Form, Input, Space } from "antd";
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import "./index.less";

/** 消防设备查询区块负责收集筛选条件并通知设备列表刷新。 */
function FireSearchPanel({ onSearch }) {
  const [form] = Form.useForm();

  const handleReset = () => {
    form.resetFields();
    form.submit();
  };

  return (
    <Panel title="消防设备查询" className="port-fire__search">
      <div className="port-fire-search__content">
        <Form
          form={form}
          labelCol={{ span: 8 }}
          onFinish={onSearch}
          styles={{ label: { color: "#fff" } }}
        >
          <Form.Item label="消防设备类型" name="fireDeviceType">
            <DictionarySelect
              placeholder="消防设备类型"
              classNames={{ root: "port-fire-search__select" }}
              styles={{
                root: {
                  color: "#fff",
                  backgroundColor: "rgba(2, 30, 81, 0.85)",
                  borderColor: "rgba(2, 30, 81, 1)",
                },
                placeholder: { color: "#fff" },
                suffix: { color: "#fff" },
              }}
              dictValue="fire_device_type"
            />
          </Form.Item>
          <Form.Item label="关键字" name="vagueKey">
            <Input
              placeholder="请输入消防点位关键字"
              classNames={{ input: "port-fire-search__input" }}
              styles={{
                root: {
                  color: "#fff",
                  backgroundColor: "rgba(2, 30, 81, 0.85)",
                  borderColor: "rgba(2, 30, 81, 1)",
                },
              }}
            />
          </Form.Item>
          <Form.Item label=" " colon={false}>
            <div className="port-fire-search__actions">
              <Space>
                <Button onClick={handleReset}>重置</Button>
                <Button type="primary" onClick={form.submit}>
                  查询
                </Button>
              </Space>
            </div>
          </Form.Item>
        </Form>
      </div>
    </Panel>
  );
}

export default FireSearchPanel;
