zcloud-gbs-bi-react/src/pages/Container/Map/components/RightUtils/index.js

import { message } from "antd";
import { produce } from "immer";
import { motion } from "motion/react";
import { useContext, useEffect, useState } from "react";
import tooltipImg2 from "~/assets/images/map_bi/right_utils/branch_office/bg11.png";
import buttonBg from "~/assets/images/map_bi/right_utils/branch_office/button.png";
import tooltipImg1 from "~/assets/images/map_bi/right_utils/port/tooltip.png";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import {
  changePeopleTrajectorySelectVisibleMittKey,
  clickBackMittKey,
  clickMarkPointMittKey,
  deletePeoplePositionPointMittKey,
  resetAllBottomUtilsCheckMittKey,
} from "~/pages/Container/Map/js/mittKey";
import { useChildMenuAnimation } from "./useChildMenuAnimation";
import { useRightUtilsAnimation } from "./useRightUtilsAnimation";
import { utilsList } from "./utilsList";
import "./index.less";

function RightUtils(props) {
  const { currentPort, mapMethods, pureMap, currentBranchOffice, bottomUtilsCurrentIndex } = useContext(Context);

  const [list, setList] = useState(utilsList);
  const [isShowChildLevel, setIsShowChildLevel] = useState(true);

  const {
    controls: rightUtilsControls,
    displayedMode: rightUtilsDisplayedMode,
    isVisible: rightUtilsIsVisible,
  } = useRightUtilsAnimation(
    currentPort && !currentBranchOffice,
    currentBranchOffice && bottomUtilsCurrentIndex !== -1,
  );

  const { controls: childMenuControls } = useChildMenuAnimation(
    currentBranchOffice && bottomUtilsCurrentIndex !== -1 && isShowChildLevel,
  );

  useEffect(() => {
    if (bottomUtilsCurrentIndex === -1)
      setIsShowChildLevel(true);
  }, [bottomUtilsCurrentIndex]);

  useEffect(() => {
    mitt.on(clickBackMittKey, () => {
      setList(produce((draft) => {
        draft.forEach((item) => {
          if (item.type === "fourColor" || item.type === "wall")
            item.check = false;
        });
      }));
    });

    return () => {
      mitt.off(clickBackMittKey);
    };
  }, []);

  useEffect(() => {
    setList(produce((draft) => {
      draft.forEach((item) => {
        if (item.type === "full")
          item.check = props.isFullscreen;
      });
    }));
  }, [props.isFullscreen]);

  const clickRightTools = (index, type) => {
    let check;
    if (list[index].check !== undefined) {
      check = !list[index].check;
      setList(produce((draft) => {
        draft[index].check = !draft[index].check;
      }));
    }

    switch (type) {
      case "back":
        window.close();
        setTimeout(() => {
          if (!window.closed && !window.opener) {
            window.location.href = "https://gbs-gateway.qhdsafety.com/";
          }
        }, 500);
        break;
      case "full":
        props.toggleFullscreen();
        break;
      case "return":
        mapMethods.current.returnCurrentCenterPoint();
        break;
      case "scene":
        mapMethods.current.changeSceneMode(check ? "2d" : "3d");
        break;
      case "del":
        mapMethods.current.removeMarkPoint();
        mitt.emit(resetAllBottomUtilsCheckMittKey);
        mitt.emit(deletePeoplePositionPointMittKey);
        mitt.emit(changePeopleTrajectorySelectVisibleMittKey, false);
        break;
      case "pureMap":
        props.setPureMap(!pureMap);
        break;
      case "weather":
        mitt.emit(clickMarkPointMittKey, {
          mapType: "_右侧_METEOROLOGICAL",
        });
        break;
      case "fourColor":
        if (!currentPort) {
          message.warning("请选择要查看的港口");
          setList(produce((draft) => {
            draft[index].check = false;
          }));
          return;
        }
        if (check) {
          mapMethods.current.addFourColorDiagram(
            currentPort,
            currentBranchOffice,
          );
        }
        else {
          mapMethods.current.removeFourColorDiagram();
        }
        break;
      case "wall":
        if (!currentPort) {
          message.warning("请选择要查看的港口");
          setList(produce((draft) => {
            draft[index].check = false;
          }));
          return;
        }
        if (check)
          mapMethods.current.addWall(currentPort, currentBranchOffice);
        else mapMethods.current.removeWall();
        break;
    }
  };

  const renderPortUtils = () => {
    if (rightUtilsDisplayedMode === "port") {
      return (
        <>
          {list.map((item, index) => (
            <div
              key={index}
              className="option"
              onClick={() => clickRightTools(index, item.type)}
            >
              <div style={{ backgroundImage: `url(${tooltipImg1})` }} className="tooltip">{item.label}</div>
              <img src={item.check ? item.checkImgPort : item.imgPort} alt="" />
            </div>
          ))}
        </>
      );
    }
    return null;
  };

  const renderBranchOfficeUtils = () => {
    if (rightUtilsDisplayedMode === "branchOffice") {
      return (
        <>
          <motion.div className="options" animate={childMenuControls}>
            {list.map((item, index) => (
              <div
                key={index}
                className={`option ${item.check ? "active" : ""}`}
                onClick={() => clickRightTools(index, item.type)}
              >
                <div style={{ backgroundImage: `url(${tooltipImg2})` }} className="tooltip">{item.label}</div>
                <img src={item.imgBranchOffice} alt="" />
              </div>
            ))}
          </motion.div>
          <div
            className={`bg ${isShowChildLevel ? "active" : ""}`}
            onClick={() => setIsShowChildLevel(!isShowChildLevel)}
          >
            <img src={buttonBg} alt="" />
          </div>
        </>
      );
    }
    return null;
  };

  return (
    <div className="map_content_right_utils_container">
      <motion.div
        className={rightUtilsDisplayedMode === "port" ? "right_utils port" : "right_utils branch_office"}
        animate={rightUtilsControls}
      >
        {rightUtilsIsVisible && (
          <>
            {renderPortUtils()}
            {renderBranchOfficeUtils()}
          </>
        )}
      </motion.div>
    </div>
  );
}

export default RightUtils;