alarm-component/src/pages/Alarm/components/easy.jsx

import React, {
  useEffect,
  useState,
  forwardRef,
  useImperativeHandle,
} from "react";
import {
  Form,
  Input,
  Select,
  message,
  Switch,
  Space,
  Col,
  Checkbox,
} from "antd";
import { Modal, Button, Radio } from "antd";
import styles from "./easy.module.less";
import API2 from "../../../api/alarm";
import { useMemoizedFn } from "ahooks";
import { DownOutlined, UpOutlined } from "@ant-design/icons";

function TranslateText(arr) {
  const dtLanguage = localStorage.getItem("dtLanguage");
  if (!Array.isArray(arr)) {
    return arr;
  }

  if (arr.length < 2 && arr.length > 0) {
    return arr?.[0];
  }

  if (dtLanguage === "en") {
    return arr?.[1];
  }

  return arr?.[0];
}

const Easy = (props, ref) => {
  const { editId, groupList = [], pointId = null } = props;
  const [form] = Form.useForm();
  // const [alarmId, setAlarmId] = useState(searchParams.get('alarm_id'))
  // const [token, setToken] = useState(searchParams.get('token'))
  // const [apiUrl, setApiUrl] = useState(decodeURIComponent(searchParams.get('api_url')) + '/')
  const ah = Form.useWatch("ah_value", form);
  const ahh = Form.useWatch("ahh_value", form);
  const al = Form.useWatch("al_value", form);
  const all = Form.useWatch("all_value", form);

  const [data, setData] = useState();
  const [deferUnit, setDeferUnit] = useState();
  const [status, setStatus] = useState(2);
  const [dateTime, setDateTime] = useState(null);
  const [subType, setSubType] = useState();
  const [isDisabled, setIsDisabled] = useState(false);
  const [loading, setLoading] = useState(false);
  const [ahhEnable, setAhhEnable] = useState(false);
  const [ahEnable, setAhEnable] = useState(false);
  const [alEnable, setAlEnable] = useState(false);
  const [allEnable, setAllEnable] = useState(false);
  const [showMore, setShowMore] = useState(false);
  const [alarmId, setAlarmId] = useState(-1);

  const onModalOk = useMemoizedFn(async () => {
    const isNull = (val, bool) => {
      if (bool) {
        return Number(val);
      } else {
        return ["", undefined, null].indexOf(val) === -1 ? Number(val) : -9999;
      }
    };

    const isBool = (bool) => {
      return bool ? bool : false;
    };

    if (alarmId == -1) {
      let bool = false;
      if (["", undefined, null].indexOf(dateTime) !== -1 && status === 1) {
        setDateTime(undefined);
        bool = true;
      }
      const value = await form.validateFields();
      if (bool) {
        return;
      }

      if (
        (value?.ahh_enable && value?.ahh_value === "-9999") ||
        (value?.ah_enable && value?.ah_value === "-9999") ||
        (value?.al_enable && value?.al_value === "-9999") ||
        (value?.all_enable && value?.all_value === "-9999")
      ) {
        message.error(`${
          value?.ahh_enable && value?.ahh_value === "-9999" ? "上上限;" : ""
        }
        ${value?.ah_enable && value?.ah_value === "-9999" ? "上限;" : ""}
        ${value?.al_enable && value?.al_value === "-9999" ? "下限;" : ""}
        ${value?.all_enable && value?.all_value === "-9999" ? "下下限;" : ""}
        禁止输入-9999`);
        return;
      }

      setLoading(true);
      let details = {};

      if (value?.sub_type === 13) {
        details = {
          alarm_value: isNull(value?.alarm_value),
        };
      } else {
        details = {
          ahh_value: isNull(value?.ahh_value, isBool(value?.ahh_enable)),
          ahh_enable: isBool(value?.ahh_enable),
          ah_value: isNull(value?.ah_value, isBool(value?.ah_enable)),
          ah_enable: isBool(value?.ah_enable),
          al_value: isNull(value?.al_value, isBool(value?.al_enable)),
          al_enable: isBool(value?.al_enable),
          all_value: isNull(value?.all_value, isBool(value?.all_enable)),
          all_enable: isBool(value?.all_enable),
        };
      }
      delete value.alarm_value;
      delete value?.ahh_value;
      delete value?.ahh_enable;
      delete value?.ah_value;
      delete value?.ah_enable;
      delete value?.al_value;
      delete value?.al_enable;
      delete value?.all_value;
      delete value?.all_enable;

      const obj = {
        ...value,
        point_name: value?.point_name?.split("<==>")[0],
        threshold_high: value.threshold_high?.toString().trim()
          ? Number(value.threshold_high?.toString().trim())
          : null,
        threshold_low: value.threshold_low?.toString().trim()
          ? Number(value.threshold_low?.toString().trim())
          : null,
        ext_notify_list: [],
        high_enabled: value.threshold_high?.toString().trim() ? true : false,
        low_enabled: value.threshold_low?.toString().trim() ? true : false,
        status: value.status ? 1 : 2,
        defer_unit: deferUnit,
        defer_seconds: Number(dateTime) ?? 0,
        type: 1,
        sub_type: value?.sub_type,
        group_id: value?.group_id ?? 0,
        details,
      };

      API2.addRule(obj)
        .then((res) => {
          if (res?.state === 0) {
            form.resetFields();
            message.success("保存成功");
            props.onConfirm();
          } else {
            message.error(res?.state_info);
          }
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      let bool = false;
      if (["", undefined, null].indexOf(dateTime) !== -1 && status === 1) {
        setDateTime(undefined);
        bool = true;
      }
      const value = await form.validateFields();

      if (bool) {
        return;
      }

      if (
        (value?.ahh_enable && value?.ahh_value === "-9999") ||
        (value?.ah_enable && value?.ah_value === "-9999") ||
        (value?.al_enable && value?.al_value === "-9999") ||
        (value?.all_enable && value?.all_value === "-9999")
      ) {
        message.error(`${
          value?.ahh_enable && value?.ahh_value === "-9999" ? "上上限;" : ""
        }
        ${value?.ah_enable && value?.ah_value === "-9999" ? "上限;" : ""}
        ${value?.al_enable && value?.al_value === "-9999" ? "下限;" : ""}
        ${value?.all_enable && value?.all_value === "-9999" ? "下下限;" : ""}
        禁止输入-9999`);
        return;
      }

      setLoading(true);
      let details = {};

      if (value?.sub_type === 13) {
        console.log(value?.alarm_value);
        details = {
          alarm_value: isNull(value?.alarm_value),
        };
      } else {
        details = {
          ahh_value: isNull(value?.ahh_value, isBool(value?.ahh_enable)),
          ahh_enable: isBool(value?.ahh_enable),
          ah_value: isNull(value?.ah_value, isBool(value?.ah_enable)),
          ah_enable: isBool(value?.ah_enable),
          al_value: isNull(value?.al_value, isBool(value?.al_enable)),
          al_enable: isBool(value?.al_enable),
          all_value: isNull(value?.all_value, isBool(value?.all_enable)),
          all_enable: isBool(value?.all_enable),
        };
      }
      delete value.alarm_value;
      delete value?.ahh_value;
      delete value?.ahh_enable;
      delete value?.ah_value;
      delete value?.ah_enable;
      delete value?.al_value;
      delete value?.al_enable;
      delete value?.all_value;
      delete value?.all_enable;
      delete data?.Details;

      const obj = {
        ...data,
        ...value,
        point_name: value?.point_name?.split("<==>")[0],
        threshold_high: value.threshold_high?.toString().trim()
          ? Number(value.threshold_high?.toString().trim())
          : null,
        threshold_low: value.threshold_low?.toString().trim()
          ? Number(value.threshold_low?.toString().trim())
          : null,
        high_enabled: value.threshold_high?.toString().trim() ? true : false,
        low_enabled: value.threshold_low?.toString().trim() ? true : false,
        defer_unit: deferUnit,
        defer_seconds: dateTime ? Number(dateTime) : 0,
        type: 1,
        sub_type: value?.sub_type,
        group_id: value?.group_id ?? 0,
        details,
        status: value.status === true ? 1 : 2,
      };

      API2.editRule(obj)
        .then((res) => {
          if (res?.state === 0) {
            form.resetFields();
            message.success("保存成功");
            props.onConfirm();
          } else {
            message.error(res?.state_info);
          }
        })
        .finally(() => {
          setLoading(false);
        });
    }
  });

  useImperativeHandle(ref, () => {
    return {
      ok: onModalOk,
    };
  });

  useEffect(() => {
    onSearch("");
  }, []);

  useEffect(() => {
    async function run() {
      if (alarmId && alarmId !== -1) {
        const { state, data } = await API2.detailAlarm(Number(alarmId));
        setData(data);
        setDeferUnit(data?.defer_unit);
        setStatus(data.defer_seconds > 0 ? 1 : 2);
        setDateTime(data?.defer_seconds);
      }
    }
    run();
  }, [alarmId]);

  useEffect(() => {
    async function run() {
      if (editId && editId !== -1) {
        setAlarmId(editId);
      } else if (pointId && pointId !== -1) {
        const res = await API2.getRuleIdByPointId(pointId);
        setAlarmId(res?.data?.[0]?.id ?? -1);
      }
    }
    run();
  }, [editId, pointId]);

  useEffect(() => {
    const run = async () => {
      if (data) {
        setSubType(data.sub_type);
        setDeferUnit(data?.defer_unit);
        setStatus(data.defer_seconds > 0 ? 1 : 2);
        setDateTime(data.defer_seconds);
        setIsDisabled(false);
        setAllEnable(data?.Details.all_enable);
        setAlEnable(data?.Details.al_enable);
        setAhEnable(data?.Details.ah_enable);
        setAhhEnable(data?.Details.ahh_enable);
        form.setFieldsValue({
          status: data.status === 1,
          threshold_high: data.threshold_high,
          threshold_low: data.threshold_low,
          point_name: data.point_name,
          point_id: data.point_id,
          name: data.name,
          unit: data.unit,
          alarm_level: data.alarm_level,
          sub_type: data.sub_type,
          group_id: data.group_id,
          defer_unit: data.defer_unit ? data.defer_unit : undefined,
          defer_seconds: data.defer_seconds,
          ...(data.sub_type === 13
            ? {
                alarm_value: data?.Details.alarm_value,
              }
            : {
                ahh_value:
                  data?.Details.ahh_value !== -9999
                    ? data?.Details.ahh_value
                    : null,
                ahh_enable: data?.Details.ahh_enable,
                ah_value:
                  data?.Details.ah_value !== -9999
                    ? data?.Details.ah_value
                    : null,
                ah_enable: data?.Details.ah_enable,
                al_value:
                  data?.Details.al_value !== -9999
                    ? data?.Details.al_value
                    : null,
                al_enable: data?.Details.al_enable,
                all_value:
                  data?.Details.all_value !== -9999
                    ? data?.Details.all_value
                    : null,
                all_enable: data?.Details.all_enable,
              }),
        });
      } else {
        form.setFieldsValue({
          alarm_level: 1,
          sub_type: 14,
          point_id: props.pointId ?? "",
          status: true,
        });
        setAllEnable(true);
        setAlEnable(true);
        setAhEnable(true);
        setAhhEnable(true);
        form.setFieldsValue({
          ahh_enable: true,
          ah_enable: true,
          al_enable: true,
          all_enable: true,
        });
        setSubType(14);
        if (props.pointId) {
          const res = await API2.searchPoint({
            key_word: props.pointId ?? "",
            count: 50,
            type: 1,
            no_child: true,
          });
          form.setFieldsValue({
            point_name: res?.data?.[0]?.name,
            defer_unit: res?.data?.[0]?.defer_unit,
          });
          if (!form.getFieldValue("name")) {
            form.setFieldsValue({
              name: res?.data?.[0]?.name,
              unit: res?.data?.[0]?.unit,
            });
          }
          setDeferUnit(res?.data?.[0]?.defer_unit);
        }
      }
    };
    run();
  }, [data, props.pointId]);

  const onChange = (e) => {
    // console.log(`selected ${e}`);
    console.log(e);
    setIsDisabled(false);
    setDeferUnit(Number(e.value.split("<==>")[1]));
    form.setFieldsValue({
      name: e.value.split("<==>")[0],
      point_id: e.key,
      unit: e.value.split("<==>")[3],
    });
  };

  const [pointList, setPointList] = useState([]);
  const onSearch = async (value) => {
    const res = await API2.searchPoint({
      key_word: value ?? "",
      count: 50,
      type: 1,
      no_child: true,
    });
    if (res.state === 0) {
      setPointList(res.data || []);
      return;
    }
    setPointList([]);
  };

  const onModalCancel = () => {
    props.onConfirm();
    form.resetFields();
  };

  const onValuesChange = (changedValues, allValues) => {
    console.log(changedValues, allValues, "changedValues, allValues");
    if (changedValues.hasOwnProperty("sub_type")) {
      setSubType(changedValues?.sub_type);

      if (
        changedValues?.sub_type === 14 &&
        allValues.hasOwnProperty("ahh_enable") === false &&
        allValues.hasOwnProperty("ah_enable") === false &&
        allValues.hasOwnProperty("al_enable") === false &&
        allValues.hasOwnProperty("all_enable") === false
      ) {
        setAllEnable(true);
        setAlEnable(true);
        setAhEnable(true);
        setAhhEnable(true);
        form.setFieldsValue({
          ahh_enable: true,
          ah_enable: true,
          al_enable: true,
          all_enable: true,
        });
      }
    }
    if (changedValues.hasOwnProperty("all_enable")) {
      setAllEnable(changedValues?.all_enable);
    }
    if (changedValues.hasOwnProperty("al_enable")) {
      setAlEnable(changedValues?.al_enable);
    }
    if (changedValues.hasOwnProperty("ah_enable")) {
      setAhEnable(changedValues?.ah_enable);
    }
    if (changedValues.hasOwnProperty("ahh_enable")) {
      setAhhEnable(changedValues?.ahh_enable);
    }
  };

  return (
    <Form
      className={styles.wrapper}
      name="basic"
      autoComplete="off"
      form={form}
      // requiredMark={false}
      labelAlign="left"
      colon={false}
      labelCol={{
        span: 6,
      }}
      onValuesChange={onValuesChange}
      wrapperCol={{
        span: 18,
      }}
    >
      <Form.Item label={TranslateText(["告警类型", "Mode"])} name={"sub_type"}>
        <Radio.Group disabled={alarmId !== -1}>
          <Radio value={14}>限值报警</Radio>
          <Radio value={13}>离散报警</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        label={TranslateText(["点位名称", "Point name"])}
        name="point_name"
        rules={[
          {
            required: true,
            message: TranslateText(["请输入点位名称", "Please input"]),
          },
        ]}
        getValueFromEvent={(e) => e.value}
      >
        <Select
          showSearch
          disabled={alarmId !== -1 || props.readonly}
          filterOption={false}
          dropdownMatchSelectWidth={400}
          labelInValue={true}
          onChange={(e) => {
            onChange(e);
          }}
          onSearch={onSearch}
          placeholder={TranslateText(["请输入点位名称", "Please input"])}
          style={{ width: "320px" }}
        >
          {pointList.map((item, index) => {
            return (
              <Select.Option
                value={
                  item.name +
                    "<==>" +
                    item.defer_unit +
                    "<==>" +
                    item.point_id +
                    "<==>" +
                    item.unit || ""
                }
                key={item.point_id}
              >
                {item.name}({item.point_id})(
                {item.defer_unit === 1 ? "秒级" : "分钟级"})
              </Select.Option>
            );
          })}
        </Select>
      </Form.Item>

      <Form.Item
        label={TranslateText(["点位编号", "Point id"])}
        name="point_id"
        style={{ display: alarmId === -1 && !props.readonly ? "none" : "" }}
      >
        <Input
          placeholder={TranslateText(["请输入point_id", "Please input"])}
          disabled={alarmId !== -1 || props.readonly}
          style={{ width: "320px" }}
        />
      </Form.Item>
      <Form.Item
        label={TranslateText(["告警名称", "Alarm name"])}
        name="name"
        rules={[
          {
            required: true,
            message: TranslateText(["请输入告警名称", "Please input"]),
          },
        ]}
      >
        <Input
          placeholder={TranslateText(["请输入告警名称", "Please input"])}
          style={{ width: "320px" }}
        />
      </Form.Item>

      {subType === 13 && (
        <Form.Item
          label={TranslateText(["告警值", "Alarm value"])}
          name="alarm_value"
          required={true}
          rules={[
            {
              required: true,
              message: TranslateText(["请输入告警值", "Please input"]),
            },
            () => ({
              validator(rule, value) {
                let regPos =
                  /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
                let regNeg =
                  /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
                if (regPos.test(value) || regNeg.test(value)) {
                  //if中是正则表达是,判断是否是6位数字
                  return Promise.resolve();
                } else {
                  if (!Boolean(value)) return Promise.resolve();
                  return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
                }
              },
            }),
          ]}
        >
          <Input
            placeholder={TranslateText(["请输入告警值", "Please input"])}
            style={{ width: "200px" }}
          />
        </Form.Item>
      )}

      {subType === 14 && (
        <>
          <Form.Item label="阈值">
            <div>
              <Space size={8}>
                <div className={styles.itemContainer}>
                  {ah && <div className={styles.label}>上限</div>}
                  <Form.Item
                    name="ah_value"
                    key={ahEnable}
                    noStyle
                    rules={[
                      {
                        required: ahEnable,
                        message: TranslateText(["请输入上限", "Please input"]),
                      },
                      () => ({
                        validator(rule, value) {
                          let regPos =
                            /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
                          let regNeg =
                            /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
                          if (regPos.test(value) || regNeg.test(value)) {
                            //if中是正则表达是,判断是否是6位数字
                            return Promise.resolve();
                          } else {
                            if (!Boolean(value)) return Promise.resolve();
                            return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
                          }
                        },
                      }),
                    ]}
                  >
                    <Input
                      placeholder={TranslateText(["上限", "Please input"])}
                      style={{ width: "128px" }}
                    />
                  </Form.Item>
                </div>
                <Form.Item name="ah_enable" valuePropName="checked" noStyle>
                  <Checkbox size={"small"} />
                </Form.Item>
                <div className={styles.itemContainer}>
                  {ahh && <div className={styles.label}>上上限</div>}
                  <Form.Item
                    name="ahh_value"
                    key={ahhEnable}
                    noStyle
                    rules={[
                      {
                        required: ahhEnable,
                        message: TranslateText([
                          "请输入上上限",
                          "Please input",
                        ]),
                      },
                      () => ({
                        validator(rule, value) {
                          let regPos =
                            /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
                          let regNeg =
                            /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
                          if (regPos.test(value) || regNeg.test(value)) {
                            //if中是正则表达是,判断是否是6位数字
                            return Promise.resolve();
                          } else {
                            if (!Boolean(value)) return Promise.resolve();
                            return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
                          }
                        },
                      }),
                    ]}
                  >
                    <Input
                      placeholder={TranslateText(["上上限", "Please input"])}
                      style={{ width: "128px", marginLeft: 8 }}
                    />
                  </Form.Item>
                </div>

                <Form.Item
                  label={""}
                  name="ahh_enable"
                  valuePropName="checked"
                  noStyle
                >
                  <Checkbox size={"small"} />
                </Form.Item>
              </Space>
            </div>
            <div style={{ marginTop: 10 }}>
              <Space size={8}>
                <div className={styles.itemContainer}>
                  {al && <div className={styles.label}>下限</div>}
                  <Form.Item
                    name="al_value"
                    key={alEnable}
                    noStyle
                    rules={[
                      {
                        required: alEnable,
                        message: TranslateText(["请输入下限", "Please input"]),
                      },
                      () => ({
                        validator(rule, value) {
                          let regPos =
                            /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
                          let regNeg =
                            /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
                          if (regPos.test(value) || regNeg.test(value)) {
                            //if中是正则表达是,判断是否是6位数字
                            return Promise.resolve();
                          } else {
                            if (!Boolean(value)) return Promise.resolve();
                            return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
                          }
                        },
                      }),
                    ]}
                  >
                    <Input
                      placeholder={TranslateText(["下限", "Please input"])}
                      style={{ width: "128px" }}
                    />
                  </Form.Item>
                </div>

                <Form.Item name="al_enable" valuePropName="checked" noStyle>
                  <Checkbox size={"small"} />
                </Form.Item>
                <div className={styles.itemContainer}>
                  {all && <div className={styles.label}>下下限</div>}
                  <Form.Item
                    name="all_value"
                    key={allEnable}
                    noStyle
                    rules={[
                      {
                        required: allEnable,
                        message: TranslateText([
                          "请输入下下限",
                          "Please input",
                        ]),
                      },
                      () => ({
                        validator(rule, value) {
                          let regPos =
                            /^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9])$)|^(([1-9]+)$)/;
                          let regNeg =
                            /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
                          if (regPos.test(value) || regNeg.test(value)) {
                            //if中是正则表达是,判断是否是6位数字
                            return Promise.resolve();
                          } else {
                            if (!Boolean(value)) return Promise.resolve();
                            return Promise.reject("只能输入整数、小数或负数"); //如果违反规则，就会给出提示
                          }
                        },
                      }),
                    ]}
                  >
                    <Input
                      placeholder={TranslateText(["下下限", "Please input"])}
                      style={{ width: "128px", marginLeft: 8 }}
                    />
                  </Form.Item>
                </div>

                <Form.Item name="all_enable" valuePropName="checked" noStyle>
                  <Checkbox size={"small"} />
                </Form.Item>
              </Space>
            </div>
          </Form.Item>
        </>
      )}
      <Form.Item
        label={TranslateText(["告警级别", "Level"])}
        required={false}
        name="alarm_level"
        rules={[
          {
            required: true,
            message: TranslateText(["请输入告警级别", "Please input"]),
          },
        ]}
      >
        <Select
          placeholder={TranslateText(["请选择", "Please choose"])}
          style={{ width: "200px" }}
        >
          <Select.Option value={1}>
            {TranslateText(["低", "Low"])}
          </Select.Option>
          <Select.Option value={2}>
            {TranslateText(["中", "Medium"])}
          </Select.Option>
          <Select.Option value={3}>
            {TranslateText(["高", "High"])}
          </Select.Option>
        </Select>
      </Form.Item>
      <Form.Item label="告警开关" name="status">
        <Switch size={"small"} />
      </Form.Item>

      {!showMore && (
        <Form.Item
          label={
            <Button
              type="link"
              onClick={() => {
                setShowMore(true);
              }}
            >
              更多
              <DownOutlined></DownOutlined>
            </Button>
          }
        ></Form.Item>
      )}

      {showMore && (
        <>
          <Form.Item
            label={TranslateText(["单位", "Unit"])}
            name="unit"
            rules={[
              {
                required: false,
                message: TranslateText(["请输入单位", "Please input"]),
              },
            ]}
          >
            <Input
              placeholder={TranslateText(["请输入", "Please input"])}
              style={{ width: "200px" }}
            />
          </Form.Item>

          <Form.Item
            label={TranslateText(["告警组", "Group"])}
            name={"group_id"}
          >
            <Select
              style={{ width: 200 }}
              options={[
                ...[
                  {
                    label: "未分组",
                    value: 0,
                  },
                ],
                ...(groupList?.map((item) => {
                  return {
                    label: item?.name,
                    value: item?.id,
                  };
                }) ?? []),
              ]}
              placeholder={TranslateText(["请选择", "Please choose"])}
            />
          </Form.Item>

          <Form.Item
            name={isDisabled ? "" : "defer_seconds"}
            disabled={isDisabled}
            required={true}
            label={TranslateText(["延时告警", "Delayed alarm"])}
          >
            <div>
              <div
                style={{
                  display: "flex",
                  gap: 8,
                  alignItems: "center",
                }}
              >
                <Checkbox
                  checked={status === 1}
                  disabled={isDisabled}
                  onChange={(e) => {
                    setStatus(e.target.checked ? 1 : 2);
                    if (e.target.checked) {
                      setDateTime(null);
                    } else {
                      setDateTime(0);
                    }
                  }}
                ></Checkbox>
                <span
                  style={{
                    color: "var(--dt-text-color1)",
                    fontWeight: 400,
                    fontSize: 14,
                  }}
                >
                  {TranslateText(["持续", "Alarm after"])}
                </span>
                <Input
                  disabled={status !== 1 || isDisabled}
                  value={dateTime}
                  onChange={(e) => {
                    console.log(e.target.value);
                    setDateTime(e.target.value?.replace(/\D/g, ""));
                  }}
                  placeholder={TranslateText(["请输入", "Please input"])}
                  style={{ width: 100 }}
                />
                <span
                  style={{
                    color: "var(--dt-text-color1)",
                    fontWeight: 400,
                    fontSize: 14,
                  }}
                >
                  {deferUnit === 1
                    ? TranslateText(["秒", "seconds"])
                    : TranslateText(["分钟", "minutes"])}{" "}
                  {TranslateText(["后报警", "of duration"])}
                </span>
              </div>
              {dateTime !== null &&
                ["", undefined, null].indexOf(dateTime) !== -1 &&
                status === 1 &&
                !isDisabled && (
                  <div style={{ color: "var(--dt-error-color1)" }}>
                    请输入数字
                  </div>
                )}
            </div>
          </Form.Item>
        </>
      )}

      {showMore && (
        <Form.Item
          label={
            <Button
              type="link"
              onClick={() => {
                setShowMore(false);
              }}
            >
              收起<UpOutlined></UpOutlined>
            </Button>
          }
        ></Form.Item>
      )}
    </Form>
  );
};

export default forwardRef(Easy);