web2468/src/widgets/WMoneyRain/index.jsx

import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import styles from "./styles.module.scss"
import {ClickAwayListener} from "@mui/base/ClickAwayListener";
import Grow from "@mui/material/Grow";
import styled from 'styled-components/macro';
import rain_bg3 from "@assets/moneyrain/rain_bg3.png";
import close_bai from "@assets/moneyrain/Close_bai.png";
import close_icon from "@assets/moneyrain/Close.png";
import rain_card from "@assets/moneyrain/rain_card.png";
import red_box from "@assets/moneyrain/huodongrukou5_jianbian.png";
import time_icon from "@assets/moneyrain/shijian_bai.png";
import star_icon from "@assets/moneyrain/bofang_bai.png";
import rain_bg1 from "@assets/moneyrain/rain_bg1.png";
import rain_bg2 from "@assets/moneyrain/rain_bg2.png";
import {format2LongChips, formatCash, formatTime, stringFormat} from "@utils/helpers";
import WRainAni from "@widgets/WMoneyRain/WRainAni/WRainAni";
import {useDispatch, useSelector} from "react-redux";
import {
    getReciveStatus,
    getRedConfigStatus,
    getRedPackConfig,
    getRedPackInfo,
    updateAlRecivedStatus
} from "@features/redpackSlice";
import {useEffect, useState} from "react";
import {reqRedpackCheck, reqRedpackConfig, reqRedpackRecive} from "@features/api";
import {getConfig} from "@features/paySlice";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import CountUp from "react-countup";
const i18n=global.i18n;
const StyledRules=styled.div`
    background: url(${rain_bg3});
`
const StyledRewardCon=styled.div`
    background: url(${rain_card});
`
const StyledRedPack=styled.div`
    background: url(${rain_bg1});
`
const StyledRedOpen=styled.div`
    background: url(${rain_bg2});
`

const WMoneyRain = ({close}) => {
    const redpack=useSelector(getRedPackInfo);
    const config=useSelector(getRedPackConfig);
    const reciveStatus=useSelector(getReciveStatus);
    const [open,setOpen]=useState(true);
    const dispatch=useDispatch();
    const configStatus=useSelector(getRedConfigStatus);
    useEffect(()=>{
        if (config==null||config.length===0){
            dispatch(reqRedpackConfig());
        }
        dispatch(reqRedpackCheck());
        return ()=>{

        }
    },[]);
    useEffect(()=>{
        if (!open){
            if (redpack&&redpack.status===2){
                dispatch(updateAlRecivedStatus())
            }
        }
    },[open])
    const getDropMax=()=>{
        if (redpack==null)return 0;
        let max=Number(redpack.max);
        max=max*global.CASH_BASE;
        return max;
    }
    const getRuleTxt=(totalStr)=>{
        let txt=[];
        for (let i = 0; i < 4; i++) {
            let str=i18n.t("moneyRain.des.tips_"+i);
            if (i===0)str=stringFormat(str,[global.DOLLAR+" "+totalStr]);
            txt.push(str);
        }
        return txt;
    }
    const getTimeConfig=()=>{
        let timeData=[];
        if (config){
            for (let i = 0; i < config.length; i++) {
                let item=config[i];
                if (item){
                    let str=item.StartTime+"-"+item.EndTime;
                    timeData.push(str);
                }
            }
        }
        return timeData;
    }
    const onClickCollect=()=>{
        if (redpack==null)return;
        if (redpack.status!==1)return;
        if (reciveStatus===REQ_STATUS.LOADING)return;
        dispatch(reqRedpackRecive());
    }
    const onClose=()=>{
        setOpen(false);
        if(close)close();
    }
    const renderRules=()=>{
        let toatlNum=10000000;
        let maxNum=getDropMax();
        let totalStr=format2LongChips(toatlNum);
        let maxStr=format2LongChips(maxNum);
        // let timeData=[
        //     "12:00-12:59",
        //     "14:00-14:59",
        //     "18:00-18:59",
        //     "20:00-20:59"
        // ];
        let timeData=getTimeConfig();
        let timeLen=timeData.length;
        let rules=getRuleTxt(totalStr);
        return (
            <Grow in={open} timeout={500}>
                <StyledRules className={styles.rule_container}>
                    <button className={styles.close} onClick={onClose}>
                        <img src={close_bai}/>
                    </button>
                    <div className={styles.title}>
                        {i18n.t("moneyRain.rule.title")}
                    </div>
                    <StyledRewardCon className={styles.reward_con}>
                        <div className={styles.reward_item}>
                            <img src={red_box}/>
                            <div className={styles.text_con}>
                                <div>{global.DOLLAR}</div>
                                <div className={styles.reward}>{totalStr}</div>
                                <div>{i18n.t("moneyRain.rule.reward_tip_1")}</div>
                            </div>
                        </div>
                        <div className={styles.reward_item}>
                            <img src={red_box}/>
                            <div className={styles.text_con}>
                                <div>{i18n.t("moneyRain.rule.reward_tip_2")}</div>
                                <div>{global.DOLLAR}</div>
                                <div className={styles.reward}>{maxStr}</div>
                            </div>
                        </div>
                    </StyledRewardCon>
                    <div className={styles.time_con}>
                        <div className={styles.time_title}>
                            {stringFormat(i18n.t("moneyRain.time.title"),[timeLen])}
                        </div>
                        <div className={styles.time_content}>
                            {
                                timeData.map((item,index)=>{
                                    return (
                                        <div key={index} className={styles.time_item}>
                                            <img src={time_icon}/>
                                            {item}
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className={styles.rule_content}>
                        {
                            rules.map((item,index)=>{
                                return (
                                    <div key={index} className={styles.rule_item}>
                                        <img src={star_icon}/>
                                        <div>{item}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </StyledRules>
            </Grow>
        )
    }
    const renderRedPack=()=>{
        let toatlNum=10000000;
        let maxNum=getDropMax();
        let totalStr=format2LongChips(toatlNum);
        let maxStr=format2LongChips(maxNum);
        return (
            <Grow in={open} timeout={500}>
                <StyledRedPack className={styles.red_pack_con}>
                    <button className={styles.close} onClick={onClose}>
                        <img src={close_bai}/>
                    </button>
                    <div className={styles.title}>
                        {i18n.t("moneyRain.redPack.title")}
                    </div>
                    <div className={styles.red_content}>
                        <div className={styles.red_item}>
                            <img src={star_icon}/>
                            <div>{i18n.t("moneyRain.redPack.tips_0")}</div>
                        </div>
                        <div className={styles.red_item}>
                            <img src={star_icon}/>
                            <div>{stringFormat(i18n.t("moneyRain.redPack.tips_1"),[global.DOLLAR+maxStr])}</div>
                        </div>
                    </div>
                    <div className={styles.red_btn_con}>
                        <button className={styles.red_btn} onClick={onClickCollect}>
                            {reciveStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}></SmallLoading>):(i18n.t("moneyRain.redPack.btn"))}
                            {/*{i18n.t("moneyRain.redPack.btn")}*/}
                        </button>
                    </div>
                </StyledRedPack>
            </Grow>
        )
    }
    const renderRedOpen=()=>{
        let reciveNum=redpack.amount;
        // reciveNum=34;
        let maxNum=getDropMax();
        let maxStr=global.DOLLAR+" "+format2LongChips(maxNum);
        let reciveStr=global.DOLLAR+" "+format2LongChips(reciveNum);
        let next_in_seconds=redpack.next_in_seconds;
        let timeStr=formatTime(next_in_seconds);
        return (
            <Fade in={open} timeout={500}>
                <Grow in={open} timeout={500}>
                    <StyledRedOpen className={styles.red_open_con}>
                        <button className={styles.close} onClick={onClose} style={{right: "0.5rem"}}>
                            <img src={close_icon}/>
                        </button>
                        <div className={styles.red_amount_uint}>{i18n.t("moneyRain.redOpen.max_drop")+maxStr}</div>
                        {/*<div className={styles.red_amount_recive}>{reciveStr}</div>*/}
                        <CountUp
                            start={0}
                            end={Number(formatCash(reciveNum))}
                            duration={1}
                            separator=" "
                            decimals={2}
                            prefix={global.DOLLAR+" "}
                            startOnMount
                        >
                            {({ countUpRef, start }) => {
                                return (
                                    <div ref={(ref)=>{
                                        countUpRef.current=ref;
                                        start();
                                    }} className={styles.red_amount_recive}/>
                                )
                            }}
                        </CountUp>
                        {/*<div className={styles.red_open_tips}>*/}
                        {/*    <div>{i18n.t("moneyRain.redOpen.time_tips")}</div>*/}
                        {/*    <div className={styles.time}>{timeStr}</div>*/}
                        {/*</div>*/}
                    </StyledRedOpen>
                </Grow>
            </Fade>
        )
    }
    const renderAlRecived=()=>{
        let maxNum=getDropMax();
        let maxStr=global.DOLLAR+" "+format2LongChips(maxNum);
        return (
            <Grow in={open} timeout={500}>
                <StyledRedOpen className={styles.red_open_con}>
                    <button className={styles.close} onClick={onClose} style={{right: "0.5rem"}}>
                        <img src={close_icon}/>
                    </button>
                    {/*<div className={styles.red_amount_uint}>{i18n.t("moneyRain.redOpen.max_drop")+maxStr}</div>*/}
                    <div className={styles.red_already_recived}>{i18n.t("moneyRain.redOpen.already_collect")}</div>
                </StyledRedOpen>
            </Grow>
        )
    }
    const checkStatusRender=()=>{
        // return renderAlRecived();
        // return renderRedOpen();
        if (redpack===null)return (<></>);
        let status=redpack.status;
        //时间未到
        if (status===0){
            return renderRules();
        }
        //领取
        else if (status===1){
            return renderRedPack();
        }
        //领取奖励
        else if (status===2){
            return renderRedOpen();
        }
        else if (status===-1){
            // return renderAlRecived();
            return renderRules();
        }
    }
    const renderMain = () => {
        return (
            <>
                {/*{renderRules()}*/}
                {/*{renderRedPack()}*/}
                {/*{renderRedOpen()}*/}
                {checkStatusRender()}
            </>
        )
    }
    return (
        <Modal open={open} onClose={onClose} closeAfterTransition>
            <Fade in={open} timeout={500}>
                <div className={styles.container}>
                    {
                        configStatus===REQ_STATUS.LOADING?(<SmallLoading></SmallLoading>):(
                            <>
                                <WRainAni></WRainAni>
                                <div className={styles.content}>
                                    {renderMain()}
                                </div>
                            </>
                        )
                    }
                </div>
            </Fade>
        </Modal>
    )
}
export default WMoneyRain;