site_8g/src/components/Box/index.tsx

"use client";
import { ActionType } from "@/api/home";
import { lredPacketApi, redPacketApi } from "@/api/promo";
import RedPacketModal, { RedPacketModalProps } from "@/components/Box/RedPacketModal";
import { useRouter } from "@/i18n/routing";
import { isHttpUrl } from "@/utils";
import { getToken } from "@/utils/Cookies";
import { Toast } from "antd-mobile";
import clsx from "clsx";
import { CSSProperties, FC, PropsWithChildren, useMemo, useRef } from "react";
import { twMerge } from "tailwind-merge";
import DesktopModal, { DesktopRefProps } from "./Desktop";
import { ModalEnum } from "./types";
interface Props {
    pt?: boolean;
    pb?: boolean;
    pl?: boolean;
    pr?: boolean;
    none?: boolean;
    className?: string;
    style?: CSSProperties;
    Tag?: "section" | "div";

    // 点击功能, 1:无功能,2:跳转外部链接,3:跳转页面,4:跳转弹窗,5:跳转打开游戏,6:跳转Live Chat客服,7:跳转内部文档
    action?: ActionType;
    actionData?: unknown;
}

/**
 * @description
 * 1`:接受padding属性， 有默认值， 有自定义值, 默认显示， 可自定并且合并
 * todo 2: 可通过 clo / row 定义flex 布局
 * todo 3: 可设置背景
 */

/**
 * @description 跳转外部链接
 */
const openWindow = (url: string) => {
    if (isHttpUrl(url)) {
        window.open(url);
    } else {
        Toast.show("非法地址");
    }
};

/**
 * @description 红包雨验证
 */
const isStartPacketsHandler = async () => {
    if (getToken()) {
        let redPacketInfo = await lredPacketApi();
        return redPacketInfo.data?.red_packets || [];
    } else {
        let redPacketInfo = await redPacketApi();
        return redPacketInfo.data || [];
    }
};

const Box: FC<PropsWithChildren<Props>> = (props) => {
    const router = useRouter();

    const packetModalRef = useRef<RedPacketModalProps>(null);
    const pwaModalRef = useRef<DesktopRefProps>(null);

    const pwaModal = useMemo(() => <DesktopModal ref={pwaModalRef} source={"components"} />, []);

    /**
     * @description 弹窗类型
     */
    const popupHandler = (actionData: keyof typeof ModalEnum) => {
        switch (actionData) {
            case ModalEnum.red_packet:
                isStartPacketsHandler().then((data) => {
                    if (data.length) {
                        packetModalRef.current?.onOpen(data);
                    } else {
                        Toast.show("The event is not open");
                    }
                });
                break;
            case ModalEnum.pwa_install:
                pwaModalRef.current?.onOpen();
                break;
            default:
                Toast.show("Unknown parameters");
        }
    };

    const {
        className,
        children,
        pt = true,
        pb = true,
        pl = true,
        pr = true,
        none = false,
        style,
        Tag = "div",
        action = undefined,
        actionData = undefined,
    } = props;

    const cls = clsx(
        !none && {
            ["pt-[0.08rem]"]: pt,
            ["pb-[0.08rem]"]: pb,
            ["px-[0.12rem]"]: pl || pr,
        },
        className
    );

    const handler = () => {
        if (!action) return;
        switch (action) {
            case 1:
                return;
            case 2:
                openWindow(actionData as string);
                break;
            case 3:
                router.push(actionData as string);
                break;
            case 4:
                popupHandler(actionData as keyof typeof ModalEnum);
                break;
            case 5:
                break;
            case 6:
                console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 65`);
                break;
            case 7:
                console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 68`);
                break;
            default:
                console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 71`);
                break;
        }
    };
    return (
        <>
            <Tag className={twMerge(cls)} style={style} onClick={handler}>
                {children}
            </Tag>

            <RedPacketModal ref={packetModalRef} />
            {pwaModal}
        </>
    );
};

export default Box;