taro/src/_health/components/fast_sleep_popup.tsx

import { View, Image, Text } from "@tarojs/components";
import './fast_sleep_popup.scss'
import Card from "./card";
import NewButton, { NewButtonType } from "../base/new_button";
import { rpxToPx } from "@/utils/tools";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { MainColorType } from "@/context/themes/color";
import { TimeFormatter } from "@/utils/time_format";
import StatusIndicator, { StatusType } from "../base/status_indicator";
import { IconCheck } from "@/components/basic/Icons";
import FastSleepPopupContent from "./fast_sleep_popup_content";

export default function FastSleepPopup(props: { close: any, data: any,top?:number }) {
    const health = useSelector((state: any) => state.health);
    const { t } = useTranslation()

    function total() {
        const { fast } = props.data
        return diffentTime(fast.period.start_time, fast.period.end_time)
    }

    function total1() {
        const { fast, sleep, status } = props.data
        if (status == 'WFS') return ''
        var str = ' / ' + diffentTime(fast.period.start_time, sleep.period.start_time)
        if (status == 'OG2_NO1') {
            return <View className="h24 bold pop_step_right" style={{ color: MainColorType.error }}>{str}</View>
        }
        return <View className="h24 bold pop_step_right" style={{ color: MainColorType.fast }}>{str}</View>
    }

    function total2() {
        const { sleep, status } = props.data
        if (status == 'WFS') return ''
        var str = ' / ' + diffentTime(sleep.period.start_time, sleep.period.end_time)
        if (status == 'OG2' || status == 'OG2_NO1' || status == 'OG3') {
            return <View className="h24 bold pop_step_right" style={{ color: MainColorType.sleep }}>{str}</View>
        }
        return <View className="h24 bold pop_step_right" style={{ color: MainColorType.g02 }}>{str}</View>
    }

    function total3() {
        const { fast, sleep, status } = props.data
        if (status == 'WFS') return ''
        var str = ' / ' + diffentTime(sleep.period.end_time, fast.period.end_time)
        if (status == 'OG3') {
            return <View className="h24 bold pop_step_right" style={{ color: MainColorType.fast }}>{str}</View>
        }
        return <View className="h24 bold pop_step_right" style={{ color: MainColorType.g02 }}>{str}</View>
    }

    function step1() {

        const { fast, sleep, status } = props.data
        if (status == 'OG2_NO1') {
            return <View className="time_count h30 bold" style={{ backgroundColor: MainColorType.error }}>00:00:00</View>
        }
        if (status == 'WFS') {
            return <View className="g02 h24 bold" style={{ color: MainColorType.fast }}>{TimeFormatter.calculateTimeDifference(fast.target.start_timestamp, sleep.target.start_timestamp,false,true)}</View>
        }
        else if (status == 'OG1') {
            return <View className="time_count h30 bold" style={{ backgroundColor: MainColorType.fast }}>{TimeFormatter.countdown(fast.real.start_timestamp)}</View>
        }
        else if (status == 'OG2_NO1') {
            return ('')
        }
        return <View className="line_height_48 h30 bold" style={{ color: MainColorType.fast }}>{TimeFormatter.calculateTimeDifference(fast.real.start_timestamp, sleep.real.start_timestamp,false,true)}</View>
    }

    function step2() {
        const { fast, sleep, status } = props.data
        if (status == 'WFS' ) {
            return <View className="g02 h24 bold" style={{ color: MainColorType.sleep }}>{TimeFormatter.calculateTimeDifference(sleep.target.start_timestamp, sleep.target.end_timestamp,false,true)}</View>
        }
        if (status == 'OG1') {
            return <View className="time_count h30 bold" style={{ backgroundColor: MainColorType.g03 }}>00:00:00</View>
        }

        if (status == 'OG2_NO1' || status == 'OG2') {
            return <View className="time_count h30 bold" style={{ backgroundColor: MainColorType.sleep }}>{TimeFormatter.countdown(sleep.real.start_timestamp)}</View>
        }
        else if (status == 'OG3') {
            return <View className="h30 bold" style={{ color: MainColorType.sleep }}>{TimeFormatter.calculateTimeDifference(sleep.real.start_timestamp, sleep.real.end_timestamp,false,true)}</View>
        }
        return <View className="h30 bold" style={{ color: MainColorType.sleep }}>{TimeFormatter.calculateTimeDifference(sleep.target.start_timestamp, sleep.target.end_timestamp,false,true)}</View>
    }

    function step3() {
        const { fast, sleep, status } = props.data
        if (status == 'WFS') {
            return <View className="g02 h24 bold" style={{ color: MainColorType.fast }}>{TimeFormatter.calculateTimeDifference(sleep.target.end_timestamp, fast.target.end_timestamp,false,true)}</View>
        }
        if (status == 'OG1' || status == 'OG2_NO1' || status == 'OG2') {
            return <View className="time_count h30 bold" style={{ backgroundColor: MainColorType.g03 }}>00:00:00</View>
        }
        if (status == 'OG3') {
            return <View className="time_count h30 bold" style={{ backgroundColor: MainColorType.fast }}>{TimeFormatter.countdown(sleep.real.end_timestamp)}</View>
        }
        return TimeFormatter.calculateTimeDifference(sleep.target.end_timestamp, fast.target.end_timestamp,false,true)
    }

    function diffentTime(time2, time1) {
        var duration = 0

        var t1 = parseInt(time1.split(':')[0]) * 60 + parseInt(time1.split(':')[1])
        var t2 = parseInt(time2.split(':')[0]) * 60 + parseInt(time2.split(':')[1])
        duration = t1 - t2 >= 0 ? (t1 - t2) * 60 * 1000 : (t1 - t2) * 60 * 1000 + 24 * 3600 * 1000

        var now = new Date().getTime()
        return TimeFormatter.calculateTimeDifference(now, now + duration,false,true)
    }

    function beforeStatus() {
        const { status } = props.data
        var type = StatusType.normal
        if (status == 'WFS' || status == 'OG1' || status == 'OG2_NO1') {
            type = StatusType.normal
        }
        else {
            type = StatusType.img
        }
        return type
    }


    function ingStatus() {
        const { status } = props.data
        var type = StatusType.normal
        if (status == 'WFS' || status == 'OG1' || status == 'OG2_NO1') {
            type = StatusType.normal
        }
        else if (status == 'OG2') {
            type = StatusType.normal
        }
        else {
            type = StatusType.img
        }
        return type;
    }

    function afterStatus() {
        const { status } = props.data
        var type = StatusType.normal
        if (status == 'WFS' || status == 'OG1' || status == 'OG2' || status == 'OG2_NO1') {
            type = StatusType.normal
        }
        else if (status == 'OG3') {
            type = StatusType.normal
        }
        else {
            type = StatusType.img
        }
        return type;
    }

    return <FastSleepPopupContent
        top={props.top??0}
        close={props.close}
        status={props.data.status}
        beforeStatus={beforeStatus()}
        sleepStatus={ingStatus()}
        afterStatus={afterStatus()}
        showStep={props.data.status == 'WFS' ? false : true}
        total={total()}
        total1={total1()}
        total2={total2()}
        total3={total3()}
        step1={step1()}
        step2={step2()}
        step3={step3()}
        title={props.data.status == 'WFS' ? t('health.three_stages') : t('health.current_progress')}
    />
}