taro/src/_health/components/fast_sleep_detail_card.tsx

import { View, Text } from '@tarojs/components'
import './fast_sleep_detail_card.scss'
import { MainColorType } from '@/context/themes/color'
import { TimeFormatter } from '@/utils/time_format'
import { rpxToPx } from '@/utils/tools'

export default function FastSleepDetailCard(props: { data: any }) {

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

    function process() {
        const { fast, status } = props.data
        if (status == 'OG2_NO1' || status == 'WFS') {
            return '-'
        }
        return TimeFormatter.countdown(fast.real.start_timestamp)
    }

    function step1() {
        const { fast, sleep, status } = props.data
        if (status == 'WFS') {
            return ('-')
        }
        else if (status == 'OG1') {
            return TimeFormatter.countdown(fast.real.start_timestamp)
        }
        else if (status == 'OG2_NO1') {
            return ('-')
        }
        return TimeFormatter.calculateTimeDifference(fast.real.start_timestamp, sleep.real.start_timestamp)
    }

    function step2() {
        const { fast, sleep, status } = props.data
        if (status == 'WFS' || status == 'OG1') {
            return '-'
        }

        if (status == 'OG2_NO1' || status == 'OG2') {
            return TimeFormatter.countdown(sleep.real.start_timestamp)
        }
        else if (status == 'OG3') {
            return TimeFormatter.calculateTimeDifference(sleep.real.start_timestamp, sleep.real.end_timestamp)
        }
        return TimeFormatter.calculateTimeDifference(sleep.target.start_timestamp, sleep.target.end_timestamp)
    }

    function step3() {
        const { fast, sleep, status } = props.data
        if (status == 'WFS' || status == 'OG1' || status == 'OG2_NO1' || status == 'OG2') {
            return '-'
        }
        if (status == 'OG3') {
            return TimeFormatter.countdown(sleep.real.end_timestamp)
        }
        return TimeFormatter.calculateTimeDifference(sleep.target.end_timestamp, fast.target.end_timestamp)
    }

    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)
    }

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

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

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

    return <View style={{ background: '#fff', marginBottom: 20 }}>
        <Text>详情</Text>


        <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <View className='h22' style={{ color: MainColorType.g02 }}>断食</View>
            <View>{process()}/{total()}</View>

            <View style={{ display: 'flex', marginTop: 10, width: rpxToPx(750), flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' }}>
                <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <View className='h22' style={{ color: MainColorType.g02 }}>睡前断食</View>
                    <View style={{ color: props.data.status == 'OG1' ? MainColorType.fast : '#000' }}>{step1()}/{total1()}</View>
                </View>
                <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <View className='h22' style={{ color: MainColorType.g02 }}>睡眠期间断食</View>
                    <View style={{ color: props.data.status == 'OG2'||props.data.status == 'OG2_NO1' ? MainColorType.sleep : '#000' }}>{step2()}/{total2()}</View>
                </View>
                <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <View className='h22' style={{ color: MainColorType.g02 }}>起床后断食</View>
                    <View style={{ color: props.data.status == 'OG3' ? MainColorType.fast : '#000' }}>{step3()}/{total3()}</View>
                </View>
            </View>
        </View>
    </View>
}