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

import { AnimatePresence, motion } from "motion/react";
import { useContext, useEffect, useState } from "react";
import bg7 from "~/assets/images/map_bi/bottom_utils/bg7.png";
import bg8 from "~/assets/images/map_bi/bottom_utils/bg8.png";
import titleImg from "~/assets/images/map_bi/bottom_utils/title.png";
import titleOnImg from "~/assets/images/map_bi/bottom_utils/title_on.png";
import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import {
  deletePeoplePositionPointMittKey,
  resetAllBottomUtilsCheckMittKey,
  resetBottomCurrentIndexMittKey,
} from "~/pages/Container/Map/js/mittKey";
import { portUtilsList } from "./portUtilsList";
import { useBottomUtilsAnimation } from "./useBottomUtilsAnimation";
import { useBranchOfficeUtilsAnimation } from "./useBranchOfficeUtilsAnimation";
import { usePortUtilsAnimation } from "./usePortUtilsAnimation";
import "./index.less";

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

  const [list, setList] = useState([]);

  const {
    controls: bottomUtilsControls,
    displayedMode: bottomUtilsDisplayedMode,
    isVisible: bottomUtilsIsVisible,
  } = useBottomUtilsAnimation(
    !pureMap && currentPort && !currentBranchOffice,
    !pureMap && currentPort && currentBranchOffice,
  );

  const {
    containerVariants: branchOfficeUtilsContainerVariants,
    itemVariants: branchOfficeUtilsChildItemVariants,
  } = useBranchOfficeUtilsAnimation();

  const {
    parentControls: portUtilsParentControls,
    childControls: portUtilsChildControls,
    optionRefs: portUtilsOptionRefs,
    isAnimating: portUtilsIsAnimating,
    hasInteracted: portUtilsHasInteracted,
    shouldHideInactive: portUtilsShouldHideInactive,
    animationConfig: portUtilsAnimationConfig,
  } = usePortUtilsAnimation(
    portUtilsList.length,
    bottomUtilsCurrentIndex,
    bottomUtilsDisplayedMode === "port",
  );

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

  useEffect(() => {
    if (bottomUtilsDisplayedMode === "port") {
      setList(portUtilsList);
    }
    else if (bottomUtilsDisplayedMode === "branchOffice") {
      setList(branchOfficeUtilsList);
    }
    else {
      setList([]);
    }
  }, [bottomUtilsDisplayedMode]);

  useEffect(() => {
    mitt.on(resetBottomCurrentIndexMittKey, () => {
      props.setBottomUtilsCurrentIndex(-1);
    });
    mitt.on(resetAllBottomUtilsCheckMittKey, () => {
      resetAllCheck();
    });
    mitt.on(deletePeoplePositionPointMittKey, () => {
    });

    return () => {
      mitt.off(resetBottomCurrentIndexMittKey);
      mitt.off(resetAllBottomUtilsCheckMittKey);
      mitt.off(deletePeoplePositionPointMittKey);
    };
  }, []);

  const optionsClick = (index) => {
    props.setBottomUtilsCurrentIndex(bottomUtilsCurrentIndex === index ? -1 : index);
  };

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

  const renderPortUtils = () => {
    if (bottomUtilsDisplayedMode === "port") {
      return list.map((item, index) => {
        const isCurrentActive = bottomUtilsCurrentIndex === index;
        const hasActiveChildren = bottomUtilsCurrentIndex !== -1;
        const isAllowClick = hasActiveChildren && !isCurrentActive && portUtilsShouldHideInactive;

        return (
          <motion.div
            key={index}
            ref={el => (portUtilsOptionRefs.current[index] = el)}
            className="option"
            animate={portUtilsHasInteracted ? portUtilsParentControls[index] : false}
            onClick={() => !portUtilsIsAnimating && !isAllowClick && optionsClick(index)}
            style={{
              cursor: isAllowClick ? "default" : "pointer",
            }}
          >
            <img src={isCurrentActive ? item.checkImg : item.img} alt="" className="img" />
            <div className="label" style={{ backgroundImage: `url(${isCurrentActive ? titleOnImg : titleImg})` }}>
              {item.label}
            </div>
            {isCurrentActive && (
              <motion.div
                className="child_items"
                animate={portUtilsChildControls}
                initial={{ opacity: 0 }}
              >
                {item.list?.map((item1, index1) => {
                  return (
                    <motion.div
                      key={index1}
                      className="child_item"
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      transition={{ delay: index1 * portUtilsAnimationConfig.staggerDelay }}
                      onClick={(e) => {
                        e.stopPropagation();
                        optionsItemsClick(index, index1, item, item1);
                      }}
                    >
                      <img src={item1.check ? item1.checkImg : item1.img} alt="" className="child_img" />
                      <div className="child_label">{item1.label}</div>
                    </motion.div>
                  );
                })}
              </motion.div>
            )}
          </motion.div>
        );
      });
    }
  };

  const renderBranchOfficeUtils = () => {
    if (bottomUtilsDisplayedMode === "branchOffice") {
      return (
        list.map((item, index) => {
          const isCurrentActive = bottomUtilsCurrentIndex === index;
          return (
            <div
              key={index}
              className="option"
              style={{ backgroundImage: `url(${isCurrentActive ? bg7 : bg8})` }}
              onClick={() => optionsClick(index)}
            >
              <div className="label">{item.label}</div>
              <AnimatePresence>
                {(isCurrentActive && item.list?.length > 0) && (
                  <motion.div className="items" initial="hidden" animate="visible" exit="hidden" variants={branchOfficeUtilsContainerVariants}>
                    {item.list?.map((item1, index1) => {
                      return (
                        <motion.div
                          key={index1}
                          className={`item ${item1.check ? "active" : ""}`}
                          onClick={(e) => {
                            e.stopPropagation();
                            optionsItemsClick(index, index1, item, item1);
                          }}
                          variants={branchOfficeUtilsChildItemVariants}
                        >
                          <div className="child_label">{item1.label}</div>
                        </motion.div>
                      );
                    })}
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          );
        })
      );
    }
  };

  return (
    <div className="map_content_bottom_utils_container">
      <motion.div className={bottomUtilsDisplayedMode === "port" ? "bottom_utils port" : "bottom_utils branch_office"} animate={bottomUtilsControls}>
        {bottomUtilsIsVisible && (
          <>
            {renderPortUtils()}
            {renderBranchOfficeUtils()}
          </>
        )}
      </motion.div>
    </div>
  );
}

export default BottomUtils;