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 (
    <div style={props.style}>
      <Form
        className={styles.wrapper}
        name="basic"
        autoComplete="off"
        form={form}
        // requiredMark={false}
        labelAlign="left"
        colon={false}
        labelCol={{
          flex: "84px",
        }}
        onValuesChange={onValuesChange}
      >
        <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: !props.readonly ? "none" : "" }}
        >
          <Input
            placeholder={TranslateText(["请输入point_id", "Please input"])}
            disabled
            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
                        disabled={!ahEnable}
                        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}
                    style={{ marginLeft: 8 }}
                  >
                    {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
                        disabled={!ahhEnable}
                        placeholder={TranslateText(["上上限", "Please input"])}
                        style={{ width: "128px" }}
                      />
                    </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
                        disabled={!alEnable}
                        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}
                    style={{ marginLeft: 8 }}
                  >
                    {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
                        disabled={!allEnable}
                        placeholder={TranslateText(["下下限", "Please input"])}
                        style={{ width: "128px" }}
                      />
                    </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}
              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>
    </div>
  );
};

export default forwardRef(Easy);