site_8g/src/components/ModalPopup/SignInModal/index.tsx

/* eslint-disable @next/next/no-img-element */
"use client";
import { useRouter } from "@/i18n/routing";
import { useSignStore } from "@/stores/useSignStore";
import { Mask } from "antd-mobile";
import { FC, forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
import styles from "./style.module.scss";

export interface SignInModalProps {
    onClose: () => void;
    onOpen: () => void;
}
interface BoxParams {
    startDays?: number;
    type?: "page" | "modal";
}
interface BoxList {
    handleOpening: (index: number) => void;
}
export const BoxListCom = forwardRef<BoxList, BoxParams>(function BoxListCom(
    { startDays = 1, type = "modal" }: BoxParams,
    ref
) {
    const signData = useSignStore((state) => state.signData);
    const handleOpening = (index: number) => {
        const box: any = document.getElementById(`box${index}`);
        box.src = "/sign/box/box-open.png";
        const img = document.getElementById(`opened${index}`);
        img ? (img.style.visibility = "visible") : null;
    };
    useImperativeHandle(ref, (): BoxList => {
        return {
            handleOpening,
        };
    });
    return (
        <>
            <div className={`w-[100%] ${type === "page" ? styles.page : styles.modal}`}>
                <div className="flex h-[100%] w-[100%] flex-wrap justify-start">
                    {signData?.list?.map((item, index) => {
                        return (
                            <div className="h-[100%] w-[20%]" key={index}>
                                <div className="h-[100%] w-[100%]">
                                    <div
                                        className={`relative text-center ${styles.text} text-[white]`}
                                    >
                                        <p>Day{item.id}</p>
                                    </div>
                                    <div className={`relative ${styles.box} w-[100%]`}>
                                        {/*onClick={(e) => handleOpening(startDays + index)}*/}
                                        <img
                                            id={"box" + (startDays + index)}
                                            src={
                                                item.is_suss
                                                    ? "/sign/box/box-open.png"
                                                    : item.extra_num
                                                      ? "/sign/box_pay/gift.png"
                                                      : "/sign/box/box.png"
                                            }
                                            className={"z-50 mx-[auto] h-[100%]"}
                                            alt=""
                                        />
                                        <div className="flex justify-center">
                                            {item.is_suss ? (
                                                <img
                                                    id={"opened" + (startDays + index)}
                                                    src={"/sign/opened.png"}
                                                    className={
                                                        "absolute bottom-[0.035rem] z-50 h-[0.34rem]"
                                                    }
                                                    alt=""
                                                />
                                            ) : null}
                                        </div>
                                        {item.extra_num ? (
                                            <div className="absolute bottom-0 left-0 right-0 mx-auto h-[30%] w-[90%] rounded border-[0.02rem] border-[green] bg-[black]">
                                                <p
                                                    className={`${styles.green} text-center font-bold text-[green]`}
                                                >
                                                    Extra +{item.extra_num}
                                                </p>
                                            </div>
                                        ) : null}
                                    </div>
                                    {item.extra_num ? (
                                        <div
                                            className={`${styles.lock} relative mt-[0.05rem] flex justify-center text-center font-bold text-[yellow]`}
                                        >
                                            <img
                                                id={"opened" + item.id}
                                                src="/sign/lock.png"
                                                className={"block h-[100%]"}
                                                alt=""
                                            />
                                            <span className="block">+{item.num}</span>
                                        </div>
                                    ) : null}
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </>
    );
});

interface PayProps {
    type?: "page" | "modal";
}
export const PayBoxList: FC<PayProps> = ({ type = "modal" }) => {
    return (
        <>
            <div className="flex justify-center">
                {Array.from({ length: 4 }).map((item, index) => {
                    return (
                        <>
                            <div
                                className={`relative h-[100%] ${type === "page" ? styles.payPage : styles.payModal}`}
                            >
                                <div className="relative flex h-[0.89rem] justify-center font-bold">
                                    <span className="absolute top-[0.005rem] z-50 leading-[] text-[white]">
                                        5R
                                    </span>
                                    <img
                                        src="/sign/box_pay/bg.png"
                                        className={"z-10 h-[100%]"}
                                        alt=""
                                    />
                                    <img
                                        src="/sign/box_pay/bg2.png"
                                        className={"absolute bottom-0 z-30 h-[0.355rem]"}
                                        alt=""
                                    />
                                    <img
                                        src="/sign/box_pay/gift.png"
                                        className={"absolute top-[0.18rem] z-20 h-[0.505rem]"}
                                        alt=""
                                    />
                                    <img
                                        id={"lock" + index}
                                        src="/sign/box_pay/lock.png"
                                        className={"absolute bottom-[0.17rem] z-40 h-[0.315rem]"}
                                        alt=""
                                    />
                                    <img
                                        id={"opened" + index}
                                        src="/sign/opened.png"
                                        className={"absolute bottom-[0.3rem] z-40 h-[0.34rem]"}
                                        alt=""
                                    />
                                    <span className="absolute bottom-[0.005rem] z-50 text-[white]">
                                        50R
                                    </span>
                                </div>
                                <div
                                    className={`${styles.text} text-center font-bold text-[white]`}
                                >
                                    <span>
                                        Day{index === 3 ? 10 + index * 5 + 5 : 10 + index * 5}
                                    </span>
                                </div>
                            </div>
                        </>
                    );
                })}
            </div>
        </>
    );
};

const SignInModal = forwardRef(function SignInModal(props, ref) {
    const [visible, setVisible] = useState(false);

    const signData = useSignStore((state) => state.signData);
    const activity_id = useSignStore((state) => state.activity_id);

    const totalData = signData.list;
    const isSignNum = totalData?.reduce((pre, cur) => (cur.is_suss ? pre + 1 : pre), 0);
    const router = useRouter();

    const boxRef = useRef(null);

    useImperativeHandle(ref, () => {
        return {
            onClose: () => setVisible(false),
            onOpen: () => setVisible(true),
        };
    });

    return (
        <>
            <Mask visible={visible} destroyOnClose={true} onMaskClick={() => setVisible(false)}>
                <div
                    className={"absolute right-[0.2083rem] top-[18%] z-50"}
                    onClick={() => setVisible(false)}
                >
                    <span className={"iconfont icon-guanbi"}></span>
                </div>
                <div className="absolute top-[5%] w-[100%]">
                    <div className={"relative h-[6.25rem] w-[100%]"}>
                        <div className={"h-[100%]"}>
                            <div className="absolute flex h-[100%] w-[100%] justify-center overflow-hidden">
                                <img
                                    src="/sign/light2.png"
                                    className={"absolute top-[-1.215rem] h-[7.5rem] max-w-[none]"}
                                    alt=""
                                />
                                <img
                                    src="/sign/light.png"
                                    className={"absolute h-[5.07rem] max-w-[none]"}
                                    alt=""
                                />
                            </div>
                            {/* 主题背景图 */}
                            <div className="relative flex h-[3rem] w-[100%] justify-center">
                                <img src="/sign/theme.png" className={"absolute h-[100%]"} alt="" />
                            </div>
                            <div className="absolute top-[30%] h-[3.95rem] w-[100%]">
                                <div className="flex h-[100%] justify-center">
                                    {/* 宽度自动填充适应活动背景图宽度 */}
                                    <div className="relative h-[100%]">
                                        <img
                                            src={
                                                signData.background_type === 1
                                                    ? "/sign/bg2.png"
                                                    : signData.Background
                                            }
                                            className={"h-[100%]"}
                                            alt=""
                                        />
                                        {/* 右上角倒计时 */}
                                        <div className="absolute right-[0.15rem] top-0 z-50 flex h-[0.3rem] w-[20%] items-center justify-center space-x-[2px] text-center text-[0.125rem] font-bold text-[white]">
                                            {/*<p
                                             className={"h-[0.15rem]"}>{totalData?.length}</p>*/}
                                            {/*<p className={"h-[0.15rem] text-[yellow]"}>Day 20</p>*/}
                                            <p className={"text-[yellow]"}>{isSignNum}</p>
                                            <span>/</span>
                                            <p>{totalData?.length}</p>
                                        </div>
                                        {/* 签到body */}
                                        <div className="absolute left-0 top-0 w-[100%]">
                                            <div className="relative mt-[0.51rem] w-[100%]">
                                                <BoxListCom ref={boxRef} />
                                                <div
                                                    className="mt-[0.25rem] flex h-[0.62rem] justify-center"
                                                    onClick={() => {
                                                        router.push(
                                                            `/signin?activity_id=${activity_id}`
                                                        );
                                                    }}
                                                >
                                                    <img
                                                        src={
                                                            signData?.is_op
                                                                ? "/sign/button.png"
                                                                : "/sign/button_signed.png"
                                                        }
                                                        className={"h-[100%]"}
                                                        alt=""
                                                    />
                                                    <span className="absolute text-[0.16rem] font-bold leading-[0.375rem]">
                                                        Sign-in
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Mask>
        </>
    );
});

export default memo(SignInModal);