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

import { message } from "antd";
import { useContext, useEffect, useState } from "react";
import { CSSTransition } from "react-transition-group";
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,
  initRightUtilsMittKey,
  resetAllBottomUtilsCheckMittKey,
} from "~/pages/Container/Map/js/mittKey";
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(false);

  useEffect(() => {
    mitt.on(initRightUtilsMittKey, () => {
      mapMethods.current?.removeFourColorDiagram();
      mapMethods.current?.removeWall();
    });

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

  useEffect(() => {
    mitt.on(clickBackMittKey, () => {
      setList(prev => prev.map(item => item.type === "fourColor" || item.type === "wall" ? { ...item, check: false } : item));
    });

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

  useEffect(() => {
    setList(list.map(item => item.type === "full" ? { ...item, check: props.isFullscreen } : item));
  }, [props.isFullscreen]);

  const clickRightTools = (index, type) => {
    let check;
    if (list[index].check !== undefined) {
      check = !list[index].check;
      setList(list.map((item, i) => index === i ? { ...item, check: !item.check } : item));
    }

    switch (type) {
      case "back":
        // router.push("/");
        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(list.map((item, i) => index === i ? { ...item, check: false } : item));
          return;
        }
        if (check) {
          mapMethods.current.addFourColorDiagram(
            currentPort,
            currentBranchOffice,
          );
        }
        else {
          mapMethods.current.removeFourColorDiagram();
        }
        break;
      case "wall":
        if (!currentPort) {
          message.warning("请选择要查看的港口");
          setList(list.map((item, i) => index === i ? { ...item, check: false } : item));
          return;
        }
        if (check)
          mapMethods.current.addWall(currentPort, currentBranchOffice);
        else mapMethods.current.removeWall();
        break;
    }
  };

  const renderPortUtils = () => {
    return (
      <div className="right_utils port">
        {
          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>
          ))
        }
      </div>
    );
  };

  const renderBranchOfficeUtils = () => {
    return (
      <div className="right_utils branch_office">
        <CSSTransition
          timeout={1000}
          classNames={{
            enter: "animate__animated animate__faster",
            enterActive: "animate__animated animate__faster animate__bounceInUp",
            exit: "animate__animated animate__faster",
            exitActive: "animate__animated animate__faster animate__bounceOutDown",
          }}
          unmountOnExit
          in={(isShowChildLevel && bottomUtilsCurrentIndex !== -1)}
        >
          <div className="options">
            {
              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>
              ))
            }
          </div>
        </CSSTransition>
        {(bottomUtilsCurrentIndex !== -1) && (
          <div
            className={`bg ${isShowChildLevel ? "active" : ""}`}
            onClick={() => setIsShowChildLevel(!isShowChildLevel)}
          >
            <img src={buttonBg} alt="" />
          </div>
        )}
      </div>
    );
  };

  return (
    <div className="map_content_right_utils_container">
      {!currentBranchOffice ? renderPortUtils() : renderBranchOfficeUtils()}
    </div>
  );
}

export default RightUtils;