alarm-component/src/pages/Alarm/components/components/AlarmConfig/index.jsx

import { Modal } from "antd";
import React, { useState, useRef, useEffect } from "react";
import Alarm from "../../../../../entry";
import { Radio } from "antd";
import { useMemoizedFn } from "ahooks";

export function AlarmConfig(props) {
  const [type, setType] = useState(0);
  const [groupList, setGroupList] = useState([]);
  const compRef = useRef(null);
  const easyRef = useRef(null);

  const onModalOk = useMemoizedFn(async () => {
    if (type === 1) {
      await compRef.current.ok();
    } else {
      await easyRef.current.ok();
    }
  });

  const onEasyConfirm = () => {
    props.onConfirm();
  };

  const onComplexConfirm = (id) => {
    props.onConfirm({ ruleId: id ?? 0 });
  };

  useEffect(() => {
    if (props.visible) {
      setType(0);
    }
  }, [props.visible, props.ruleId]);

  return (
    <>
      <Modal
        getContainer={document.getElementById("diagram-container")}
        open={props.visible}
        width={type === 0 ? 500 : 1200}
        onCancel={() => {
          props.onClose();
        }}
        onOk={onModalOk}
        title={
          <div
            style={{
              fontSize: 16,
            }}
          >
            告警配置
          </div>
        }
        forceRender
        zIndex="1002"
        maskClosable={false}
      >
        {props.visible && (
          <>
            {props.isDiagram ? (
              <>
                <Radio.Group
                  style={{ marginLeft: 40 }}
                  value={type}
                  onChange={(e) => setType(e.target.value)}
                >
                  <Radio.Button value={0}>简单告警</Radio.Button>
                  <Radio.Button value={1}>复杂告警</Radio.Button>
                </Radio.Group>
                <div style={{ display: type === 0 ? "block" : "none" }}>
                  <Alarm.EasyConfig
                    ref={easyRef}
                    pointId={props.pointId}
                    groupList={groupList}
                    onConfirm={onEasyConfirm}
                    readonly
                  ></Alarm.EasyConfig>
                </div>
                <div style={{ display: type === 1 ? "block" : "none" }}>
                  <Alarm.ComplexConfig
                    ref={compRef}
                    editId={props.ruleId}
                    groupList={groupList}
                    onConfirm={onComplexConfirm}
                    showList={true}
                  ></Alarm.ComplexConfig>
                </div>
              </>
            ) : (
              <></>
            )}
          </>
        )}
      </Modal>
    </>
  );
}