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

import { useMount } from "ahooks";
import { useContext, useState } from "react";
import { CSSTransition } from "react-transition-group";
import titleImg from "~/assets/images/map_bi/bottom_utils/title.png";
import titleOnImg from "~/assets/images/map_bi/bottom_utils/title_on.png";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import {
  changeBottomUtilsAnimationMittKey,
  changeContentAnimationKeyMittKey,
  deletePeoplePositionPointMittKey,
  initBottomUtilsMittKey,
  resetAllBottomUtilsCheckMittKey,
  resetBottomCurrentIndexMittKey,
} from "~/pages/Container/Map/js/mittKey";
import { portUtilsList } from "./portUtilsList";
import "./index.less";

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

  const [list, setList] = useState([]);
  const [animationKey, setAnimationKey] = useState(0);

  const initList = () => {
    setList(portUtilsList);
  };

  const resetAllCheck = () => {
    setList((prevList) => {
      return prevList.map(item => ({
        ...item,
        list: item.list.map(item1 => ({ ...item1, check: false })),
      }));
    });
  };

  useMount(() => {
    setAnimationKey(Math.random());

    mitt.on(changeBottomUtilsAnimationMittKey, () => {
      setAnimationKey(Math.random());
    });
    mitt.on(resetBottomCurrentIndexMittKey, () => {
      props.setBottomUtilsCurrentIndex(-1);
    });
    mitt.on(resetAllBottomUtilsCheckMittKey, () => {
      resetAllCheck();
    });
    mitt.on(deletePeoplePositionPointMittKey, () => {
      // closePeoplePosition();
    });
    mitt.on(initBottomUtilsMittKey, () => {
      initList();
    });
  });

  const optionsClick = (index) => {
    props.setBottomUtilsCurrentIndex(bottomUtilsCurrentIndex === index ? -1 : index);
    setAnimationKey(Math.random());
    mitt.emit(changeContentAnimationKeyMittKey);
  };

  const optionsItemsClick = (index, index1, item, item1) => {
    // 子选项点击处理
    setList((prevList) => {
      const updatedList = [...prevList];
      updatedList[index].list[index1].check = !updatedList[index].list[index1].check;
      return updatedList;
    });
  };

  return (
    <div className="bottom_utils_container">
      <CSSTransition
        in={currentPort && !pureMap}
        timeout={1000}
        classNames={{
          enter: "animate__animated",
          enterActive: "animate__animated animate__fadeInUp",
          exit: "animate__animated",
          exitActive: "animate__animated animate__fadeOutDown",
        }}
        unmountOnExit
      >
        <div className="bottom_utils">
          {list.map((item, index) => {
            const isCurrentActive = bottomUtilsCurrentIndex === index;
            const hasActiveChildren = bottomUtilsCurrentIndex !== -1;
            if (hasActiveChildren && !isCurrentActive) {
              return null;
            }

            return (
              <div
                key={index}
                className={`option ${isCurrentActive ? "active" : ""}`}
                onClick={() => optionsClick(index)}
              >
                <img
                  src={isCurrentActive ? item.checkImg : item.img}
                  alt=""
                  className="img"
                />
                <div
                  className="label"
                  style={{ backgroundImage: `url(${isCurrentActive ? titleOnImg : titleImg})` }}
                >
                  {item.label}
                </div>

                <CSSTransition
                  in={isCurrentActive && item.list?.length > 0}
                  timeout={500}
                  classNames={{
                    enter: "animate__animated animate__faster",
                    enterActive: "animate__animated animate__faster animate__fadeInLeft",
                    exit: "animate__animated animate__faster",
                    exitActive: "animate__animated animate__faster animate__fadeOutLeft",
                  }}
                  unmountOnExit
                >
                  <div className="item">
                    {item.list?.map((item1, index1) => (
                      <div
                        key={index1}
                        className="items"
                        onClick={(e) => {
                          e.stopPropagation();
                          optionsItemsClick(index, index1, item, item1);
                        }}
                      >
                        <img
                          src={item1.check ? item1.checkImg : item1.img}
                          alt=""
                          className="suspension_img"
                        />
                        <div className="suspension_label">
                          {item1.label}
                        </div>
                      </div>
                    ))}
                  </div>
                </CSSTransition>
              </div>
            );
          })}
        </div>
      </CSSTransition>
    </div>
  );
}

export default BottomUtils;