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

import React, {
  useEffect,
  useState,
  forwardRef,
  useImperativeHandle,
} from "react";
import { Form, Input, Select, message, Switch, Space, Col } 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 [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="right"
      colon={false}
      labelCol={{
        span: 7,
      }}
      onValuesChange={onValuesChange}
      wrapperCol={{
        span: 17,
      }}
    >
      <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: "240px" }}
        >
          {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: "240px" }}
        />
      </Form.Item>
      <Form.Item
        label={TranslateText(["告警名称", "Alarm name"])}
        name="name"
        rules={[
          {
            required: true,
            message: TranslateText(["请输入告警名称", "Please input"]),
          },
        ]}
      >
        <Input
          placeholder={TranslateText(["请输入告警名称", "Please input"])}
          style={{ width: "240px" }}
        />
      </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: "240px" }}
          />
        </Form.Item>
      )}

      {subType === 14 && (
        <>
          <Form.Item label={TranslateText(["上上限", "Ultra upper limit"])}>
            <Space size={20}>
              <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: "240px" }}
                />
              </Form.Item>
              <Form.Item
                label={""}
                name="ahh_enable"
                valuePropName="checked"
                noStyle
              >
                <Switch size={"small"} />
              </Form.Item>
            </Space>
          </Form.Item>
          <Form.Item label={TranslateText(["上限", "Upper limit"])}>
            <Space size={20}>
              <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: "240px" }}
                />
              </Form.Item>
              <Form.Item name="ah_enable" valuePropName="checked" noStyle>
                <Switch size={"small"} />
              </Form.Item>
            </Space>
          </Form.Item>
          <Form.Item label={TranslateText(["下限", "Lower limit"])}>
            <Space size={20}>
              <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: "240px" }}
                />
              </Form.Item>
              <Form.Item name="al_enable" valuePropName="checked" noStyle>
                <Switch size={"small"} />
              </Form.Item>
            </Space>
          </Form.Item>
          <Form.Item label={TranslateText(["下下限", "Ultra lower limit"])}>
            <Space size={20}>
              <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: "240px" }}
                />
              </Form.Item>
              <Form.Item name="all_enable" valuePropName="checked" noStyle>
                <Switch size={"small"} />
              </Form.Item>
            </Space>
          </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: "240px" }}
        >
          <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: "240px" }}
            />
          </Form.Item>

          <Form.Item
            label={TranslateText(["告警组", "Group"])}
            name={"group_id"}
          >
            <Select
              style={{ width: 240 }}
              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 style={{ marginTop: 6 }}>
              <Radio.Group
                value={status}
                disabled={isDisabled}
                onChange={(e) => {
                  setStatus(e.target.value);
                  if (e.target.value === 1) {
                    setDateTime(null);
                  } else {
                    setDateTime(0);
                  }
                }}
              >
                <Radio value={1}>{TranslateText(["开启", "on"])}</Radio>
                <Radio value={2}>{TranslateText(["关闭", "off"])}</Radio>
              </Radio.Group>
              <div
                style={{
                  display: "flex",
                  marginTop: 10,
                  gap: 8,
                  alignItems: "center",
                }}
              >
                <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);