site_8g/src/components/Card/SwiperGroup.tsx

"use client";
import Box from "@/components/Box";
import { FC, PropsWithChildren, ReactNode, useRef } from "react";

import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";

import { Category, GameListRep } from "@/api/home";
import { CardProps } from "@/components/Card/Card";
import GroupCard, { GroupProps } from "@/components/Card/GroupCard";
import clsx from "clsx";
import { useTranslations } from "next-intl";
import styles from "./style.module.scss";

type TodoHandler = (item: Category) => void;

interface SwiperGroupProps extends GroupProps, CardProps {
    group: Category;
    page?: number;
    // style
    bg?: boolean;
    visibleTitle?: boolean;
    // todos
    visibleTodos?: boolean;
    todoHandler?: TodoHandler;
    // icon
    offsetX?: number;
    offsetY?: number;

    // SwiperSlide
    slideRender?: (data: GameListRep[]) => ReactNode;
}

const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
    const {
        group,
        page = 3,
        todoHandler,
        bg = true,
        visibleTitle = true,
        visibleTodos = true,
        slideRender,
        ...other
    } = props;

    const t = useTranslations("HomePage");
    const swiperRef = useRef<SwiperClass | null>(null);

    const bodyClass = clsx(
        styles.gameContainer,
        // "mb-[0.11rem]",
        "pt-[0.08rem]"
        // "pb-[0.11rem]",
    );
    if (!group.game_list) return;
    const lineNum = page * group.line_num;

    const gameList = group.game_list.slice(0, group.line_config_amount);
    const swiperData = Array(gameList.length ? Math.ceil(gameList.length / lineNum) : 0)
        .fill(0)
        .map((_, index) => {
            const showData = gameList
                .slice(index * lineNum, index * lineNum + lineNum)
                .map((subItem) => ({ ...subItem, category_name: group.category_name }));

            return {
                key: index,
                data: showData,
            };
        });
    console.log(swiperData);
    const prev = () => {
        swiperRef.current!.slidePrev();
    };
    const next = () => {
        swiperRef.current!.slideNext();
    };
    const iconClass = clsx(styles.mainLeftIcon, "pro-iconfont", `pro-${group.icon}`);

    return (
        <div>
            {visibleTitle && (
                <Box none>
                    <div className={styles.mainTitle}>
                        {!group.image && (
                            <div className={styles.mainLeft}>
                                <div className={iconClass}></div>
                                <div className={styles.marginLeftTitle}>{group.category_name}</div>
                                {/* <div className={styles.marginLeftTag}> {t("gameTag")}</div> */}
                            </div>
                        )}
                        {group.image && (
                            <div className={clsx(styles.mainLeft, "flex items-center")}>
                                <img className="h-[.3rem] w-[.3rem]" src={group.image} alt="" />
                                <div className={styles.marginLeftTitle}>{group.category_name}</div>
                                {/* <div className={styles.marginLeftTag}> {t("gameTag")}</div> */}
                            </div>
                        )}

                        {/* <img
                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATcAAAA5CAYAAABTX2z2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF6GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDg4LCAyMDIwLzA3LzEwLTIyOjA2OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0wMy0wOVQxNTozNDowMSswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMDMtMDlUMTU6MzQ6MjcrMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMDMtMDlUMTU6MzQ6MjcrMDg6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YmIzNWRiOGYtMjE1Yi04NDRiLTg0NDAtNjFiYjI1YWU0ZjIyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQ0MzZBMDQ2QkU0QzExRUQ4MURCRDI3MkM0QzA2QzVGIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NDQzNkEwNDZCRTRDMTFFRDgxREJEMjcyQzRDMDZDNUYiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NDM2QTA0M0JFNEMxMUVEODFEQkQyNzJDNEMwNkM1RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NDM2QTA0NEJFNEMxMUVEODFEQkQyNzJDNEMwNkM1RiIvPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiYjM1ZGI4Zi0yMTViLTg0NGItODQ0MC02MWJiMjVhZTRmMjIiIHN0RXZ0OndoZW49IjIwMjMtMDMtMDlUMTU6MzQ6MjcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMi4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5BhExDAAADo0lEQVR4nO3du4tcVQDH8c9KiCJpfBBhxkLUyge2Qv4Ewc42ghZifMT4RGPnAzXRRGMaMWBrI4iVCCqKCBpERXw/kDhgLMQ1nSGuxZlBI7t377z2ztz7+8AwU5wz91Rfzn3s7Eqv1/sdZ7CKP3By+DqBH/AtvsSf5mwwGMz7EBHREdtwwfDzxRXj1vAdjuM9vKNELyJiIa30er21Cef+iNfxGj5QAji17N4iYhbOmWLu5diH95Vd3X7snMWiIiKmNU3c/usKPI6f8TKunPSL+v3+jJYUEV02q7iNnIdb8RWO4dJJviSBi4hpzTpuI9twixK5/Th3TseJiFjXvOI2skM5Xf0E148zMbu3iJjGvOM2cpVyR/UJZVdXSwIXEZPaqriNjvUI3jXhtbiIiLq2Mm4ju5SHgXfVGZzdW0RMoom4wSV4G7sbOn5EtFxTcYPteAUPbzYwu7eIGFeTcYMVPIkDw88bSuAiYhxNx23kfhyxSeAiIupalLjBHTiqInDZvUVEXYsUN7hdAhcRM7BocaME7kUJXERMYRHjBnskcBExhUWNGyVwlTcZEriI2Mgix41ykyGBi4ixLXrcKIF7QQIXEWNYhrjBnXheAhcRNS1L3OAuCVxE1LRMcaME7rAELiI2sWxxg7txSAIXERWWMW6wVwIXERWWNW6UwD0ngYuIdSxz3OAeJXAbSuAiumnZ40YJ3KGqAQlcRPe0IW5kBxcR/9OWuME+CVxEDLUpbiRwETHUtrhRAvds1YAELqL92hg3uBcHqwYkcBHt1ta4wX0SuIjOanPcKIE7UDUggYtop7bHjfJvA5+pGpDARbRPF+IGD0jgIjqlK3GjBO7pqgEJXER7dClu8CCeqhqQwEW0Q9fiBg9J4CJar4txowTuoPxcUkRrrfR6vbWmF9GgY7gNZ6oGDQaDrVlNRMxM1+MGr2I3/tpsYCIXsTwSt+JN3IRTdQYnchGLL3H71xe4ET/VnZDIRSyurt5QWM81+Bg31J3Q7/dz4yFiQSVuZ7sIbyh/zbC97qRELmLx5LR0Y5/h5uH7WHK6GtG87Nw2dh2OK78qsmOcidnJRTQvO7d6fsNjeEmNR0Ymkd1exGxl51bPThzBN9iD85tdTkRsJnEbz2U4ihM4jKubXExEbCxxm8yF2Ks8G/cpHsW1TS4oIs6Wa26z9Svewof4CJ/jdJ2JueYWMVuJ23ydxvf4evg+wC84idXh6xT+HgwGq00tMqKN/gHg555imkrLwAAAAABJRU5ErkJggg=="
                            alt=""
                        /> */}
                        <div className={styles.mainRight}>
                            {visibleTodos && (
                                <div onClick={() => todoHandler && todoHandler(group)}>
                                    {/* Todos */}
                                    <div className="text-[#d76bff]">Todo</div>
                                    <div className={styles.marginRightCount}>
                                        <span>{group.to_tal}</span>
                                    </div>
                                </div>
                            )}

                            {/* <div onClick={prev}>
                                <span className="iconfont icon-xiangzuo1"></span>
                            </div>
                            <div onClick={next}>
                                <span className="iconfont icon-xiangyou1"></span>
                            </div> */}
                        </div>
                    </div>
                </Box>
            )}

            <Box none className={bodyClass}>
                <Box>
                    <Swiper
                        spaceBetween={10}
                        slidesPerView={1}
                        onSwiper={(swiper) => {
                            swiperRef.current = swiper;
                        }}
                        loop
                    >
                        {swiperData?.map((data, index) => {
                            return (
                                <SwiperSlide key={data.key}>
                                    {slideRender ? (
                                        slideRender(data.data)
                                    ) : (
                                        <GroupCard
                                            data={data.data}
                                            {...other}
                                            groupType={1}
                                        ></GroupCard>
                                    )}
                                </SwiperSlide>
                            );
                        })}
                    </Swiper>
                </Box>
            </Box>
        </div>
    );
};

export default HomeSwiper;