site_8g/src/components/Card/Card.tsx

"use client";
import { GameListRep, getGameDetailApi } from "@/api/home";
import Box from "@/components/Box";
import { useRouter } from "@/i18n";
import { useGlobalStore } from "@/stores";
import { brandList } from "@/utils/constant";
import { Button, Popup, Toast } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC, PropsWithChildren, ReactNode, useEffect, useRef, useState } from "react";
import styles from "./style.module.scss";
export interface CardProps {
    item?: GameListRep;
    render?: (value: GameListRep) => ReactNode;
}
const Card: FC<PropsWithChildren<CardProps>> = (props) => {
    const { render, item } = props;
    const appRef = useRef<HTMLElement>();

    const t = useTranslations("Game");
    const urlRef = useRef<string>("");
    const brandRef = useRef<string>("");

    const [visible, setVisible] = useState(false);

    const state = useGlobalStore();
    const router = useRouter();
    const { token } = state;
    useEffect(() => {
        appRef.current! = document.querySelector("#app")!;
    }, []);
    const handler = (game: GameListRep) => {
        setVisible(true);
        brandRef.current = brandList.find((item) => item.gid === game.game_id)?.brand ?? "";
        if (!token) return;
        const params = {
            id: game.id,
        };
        getGameDetailApi(params).then((res) => {
            urlRef.current = res.data?.game_url;
        });
    };
    const playGameHandler = () => {
        if (!token) {
            router.push("/login?redirect=/withdraw");
            return;
        }
        if (urlRef.current) {
            window.open(`${urlRef.current}&brand=${brandRef.current}`);
        } else {
            Toast.show("数据错误");
        }
    };
    return (
        <>
            {render ? (
                render(item!)
            ) : (
                <div className={styles.cardWrap} onClick={() => handler(item!)}>
                    <img src={item?.game_icon} alt={item?.game_name_cn} className={"h-1/1"} />
                </div>
            )}

            <Popup
                visible={visible}
                onMaskClick={() => {
                    setVisible(false);
                }}
                onClose={() => {
                    setVisible(false);
                }}
                showCloseButton={true}
                getContainer={() => document.getElementById("app")!}
                bodyStyle={{ background: "#1c1c1c" }}
            >
                <Box className={"w-1/1 flex w-[4.02rem] flex-1"}>
                    <div className={styles.cardWrap} style={{ width: "1.1rem" }}>
                        <img src={item?.game_icon} alt={item?.game_name_cn} />
                    </div>
                    <div className={styles.cardWrapGmeInfo}>
                        <p className={"h-[0.6rem]"}>{item?.game_name_cn}</p>

                        <div className={"flex w-[2.2rem] justify-around"}>
                            {/*<Button*/}
                            {/*    onClick={playGameHandler}*/}
                            {/*    className={*/}
                            {/*        "h-[0.39rem] w-[0.89rem] rounded-[0.05rem] text-[0.15rem]" +*/}
                            {/*        " bg-[#3a3a3a]" +*/}
                            {/*        " font-bold"*/}
                            {/*    }*/}
                            {/*>*/}
                            {/*    {t("demo")}*/}
                            {/*</Button>*/}
                            <Button
                                onClick={playGameHandler}
                                style={{
                                    "--background-color": "#009d80",
                                    "--border-color": "#009d80",
                                }}
                                className={`h-[0.39rem] w-[0.89rem] rounded-[0.05rem] bg-[#] text-[0.15rem] font-bold`}
                            >
                                {t("join")}
                            </Button>
                        </div>
                    </div>
                </Box>
            </Popup>
        </>
    );
};

export default Card;