site_8g/src/components/Card/SwiperGroup.tsx

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

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

import { GroupType } from "@/api/home";
import { CardProps } from "@/components/Card/Card";
import GroupCard, { GroupProps } from "@/components/Card/GroupCard";
import styles from "./style.module.scss";

interface SwiperGroupProps extends GroupProps, CardProps {
    group: GroupType;
    page?: number;
    // todos
    visibleTodos?: boolean;
    // icon
    offsetX?: number;
    offsetY?: number;
}

const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
    const { group, page = 6, visibleTodos = true, ...other } = props;

    const swiperRef = useRef<SwiperClass | null>(null);
    const swiperData = Array(Math.ceil(group.to_tal! / page))
        .fill(0)
        .map((_, index) => {
            return {
                key: index,
                data: group.game_list!.slice(index * page, index * page + page),
            };
        });
    const prev = () => {
        swiperRef.current!.slidePrev();
    };
    const next = () => {
        swiperRef.current!.slideNext();
    };
    return (
        <>
            <Box none>
                <div className={styles.mainTitle}>
                    <div className={styles.mainLeft}>
                        <div className={styles.mainLeftIcon}></div>
                        <div className={styles.marginLeftTitle}>{group.category_name}</div>
                        <div className={styles.marginLeftTag}>{group.tag}</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>
                                Todos
                                <span className={styles.marginRightCount}>{group.to_tal}</span>
                            </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={"mb-[0.11rem] bg-[#1a1a1a]"}>
                <Box>
                    <Swiper
                        spaceBetween={10}
                        slidesPerView={1}
                        onSwiper={(swiper) => {
                            swiperRef.current = swiper;
                        }}
                        loop
                    >
                        {swiperData?.map((data, index) => (
                            <SwiperSlide key={data.key}>
                                <GroupCard data={data.data} {...other}></GroupCard>
                            </SwiperSlide>
                        ))}
                    </Swiper>
                </Box>
            </Box>
        </>
    );
};

export default HomeSwiper;