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

import { Wallet } from "@/api/user";
import { percentage } from "@/utils/methods";
import { ProgressBar } from "antd-mobile";
import { useTranslations } from "next-intl";

const Progress = (props: { percent: number }) => {
    const { percent } = props;
    return (
        <div className="flex">
            <ProgressBar
                percent={percent}
                className={"mr-[0.0694rem] flex-1"}
                style={{
                    "--fill-color": "var(--primary-color)",
                    "--track-width": "0.0694rem",
                }}
            />
            <span className={"text-primary-color"}>{percent.toFixed(2)}%</span>
        </div>
    );
};
export const WalletContent = (props: {
    percentage: number;
    type: string;
    difference: number;
    current: number;
}) => {
    const { percentage, type, difference, current } = props;
    const t = useTranslations("ProfilePage");
    return (
        <div>
            <div className={"mb-[0.12rem] text-[0.12rem]"}>
                <span className={"mr-[10px]"}>{type}</span>
                <i className={"mr-[10px] indent-[10px] text-[0.1528rem] font-bold"}>R$</i>
                <span>{current}</span>
            </div>

            <Progress percent={percentage} />

            <div>
                <span>{t("modalBottomTips")}</span>
                <span>{difference.toFixed(2)}</span>
            </div>
        </div>
    );
};
// 现金
export const BalanceContent = (props: { wallet: Wallet }) => {
    const { wallet } = props;
    const t = useTranslations("ProfilePage");
    return (
        <>
            <WalletContent
                difference={wallet.target_score_rollover - wallet.current_score_rollover}
                type={t("balance")}
                current={wallet.score || 0}
                percentage={percentage(wallet.current_score_rollover, wallet.target_score_rollover)}
            />
        </>
    );
};

export const BonusContent = (props: { wallet: Wallet }) => {
    const { wallet } = props;
    const t = useTranslations("ProfilePage");
    return (
        <div>
            <WalletContent
                difference={wallet.target_point_rollover - wallet.current_point_rollover}
                type={t("bonus")}
                current={wallet.point || 0}
                percentage={percentage(wallet.current_point_rollover, wallet.target_point_rollover)}
            />
            <p className={"text-center"}>{t("bonusArticle")}</p>
            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
                <li>{t("bonusDesc1")}</li>
                <li>{t("bonusDesc2")}</li>
                <li>{t("bonusDesc3")}</li>
            </ul>
        </div>
    );
};

export const FreeContent = (props: { wallet: Wallet }) => {
    const { wallet } = props;
    const t = useTranslations("ProfilePage");
    return (
        <div>
            <WalletContent
                difference={wallet.target_free_score_rollover - wallet.current_free_score_rollover}
                type={t("free")}
                current={wallet.free_score || 0}
                percentage={percentage(
                    wallet.current_free_score_rollover,
                    wallet.target_free_score_rollover
                )}
            />
            <p className={"text-center"}>{t("freeArticle")}</p>
            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
                <li>{t("freeDesc1")}</li>
                <li>{t("freeDesc2")}</li>
            </ul>
        </div>
    );
};
export const ReplayContent = (props: { wallet: Wallet }) => {
    const { wallet } = props;
    const t = useTranslations("ProfilePage");
    return (
        <div>
            <WalletContent
                difference={wallet.target_lose_score_rollover - wallet.current_lose_score_rollover}
                type={t("replay")}
                current={wallet.lose_score || 0}
                percentage={percentage(
                    wallet.current_lose_score_rollover,
                    wallet.target_lose_score_rollover
                )}
            />
            <p className={"text-center"}>{t("replayArticle")}</p>
            <ul className={"ml-[0.1389rem] list-decimal text-[0.12rem] text-[#666]"}>
                <li>{t("replayDesc1")}</li>
                <li>{t("replayDesc2")}</li>
            </ul>
        </div>
    );
};

// const WalletDescribeModal = () => {
//     const [tipsStatus, setTipsStatus] = useState<keyof typeof WalletEnum>("Bonus");
//     const tipsRef = useRef<ModalProps>(null);
//     const wallet: any = {};
//     const t = useTranslations("ProfilePage");
//
//     return (
//         <TipsModal
//             ref={tipsRef}
//             title={
//                 <div className={"flex items-center"}>
//                     <i className={"iconfont icon-liwuhuodong mr-[0.0694rem] text-[0.2778rem]"}></i>
//                     {t("modalTitle")}
//                 </div>
//             }
//         >
//             {/*现金*/}
//             {tipsStatus === WalletEnum.Balance ? <BalanceContent wallet={wallet} /> : null}
//             {/*  彩金*/}
//             {tipsStatus === WalletEnum.Bonus ? <BonusContent wallet={wallet} /> : null}
//             {/* 免费币 */}
//             {tipsStatus === WalletEnum.Free ? <FreeContent wallet={wallet} /> : null}
//             {/*  重玩币 */}
//             {tipsStatus === WalletEnum.Replay ? <ReplayContent wallet={wallet} /> : null}
//         </TipsModal>
//     );
// };
// export default WalletDescribeModal;