taro/src/features/trackTimeDuration/components/Clock.tsx

import trackTimeService, { machine } from "@/store/trackTimeMachine";
import { View, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import { TimeFormatter } from "@/utils/time_format";
import Rings, { BgRing, CurrentDot, RealRing, RingCommon } from './Rings';
import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
import './Clock.scss'
import { ColorType } from "@/context/themes/color";
export default function Component() {
    const [checkData, setCheckData] = useState(null)


    useEffect(() => {
        if (machine.context.checkData) {
            setCheckData(machine.context.checkData as any);
        }
    }, [machine.context.checkData]);

    useEffect(() => {
        trackTimeService.onTransition(_ => {
            if (machine.context.checkData) {
                setCheckData(machine.context.checkData as any);
            }
        });
    }, []);


    //外环
    function bigRing() {
        var common = getCommon(null, true)
        common.radius = 126;
        common.lineWidth = 28;
        var bgRing = getBgRing()
        if (!checkData) {
            var currentDot1 = getDot(null, true)
            return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} canvasId='clock0' />
        }
        var current_record = (checkData as any).current_record
        var currentDot1 = getDot((checkData as any).current_record, true)
        var targetBigRing1 = getTarget((checkData as any).current_record, true)
        targetBigRing1.color = ColorType.fast+'33'//'rgba(170,255,0,0.4)'
        if (current_record.status == 'ONGOING') {
            var realRing1 = getReal((checkData as any).current_record, true, false)

            return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} realRing={realRing1} targetRing={targetBigRing1} canvasId='clock1' />
        }
        if (current_record.status == 'WAIT_FOR_START') {
            return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} canvasId='clock2' />
        }

        var realRing1 = getReal((checkData as any).current_record, true, false)
        return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId='clock3' />
    }


    //内环
    function smallRing() {
        var current_record = (checkData as any).current_record
        if (current_record.scenario == 'FAST_SLEEP') {
            var common = getCommon(null, false)
            common.radius = 90;
            common.lineWidth = 28;
            var bgRing = getBgRing()
            var realRing = getReal((checkData as any).current_record, false, false)
            var currentDot = getDot((checkData as any).current_record, false)
            var targetRing = getTarget((checkData as any).current_record, false)
            targetRing.color = ColorType.sleep+'33'//'rgba(0, 255, 255, 0.4)'
            if (current_record.status == 'ONGOING2') {
                return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId='clock7' />
            }

            //ongoing3时，睡眠点整理亮度降低
            if (current_record.status == 'ONGOING3') {
                currentDot.color = ColorType.sleep+'66'
            }
            return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId='clock8' />
        }
        return null;
    }

    if (!checkData)
        return <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', marginTop: 20 }}>
            {
                bigRing()
            }
        </View>
    return (
        <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>
            <View style={{ position: 'relative', zIndex: 1 }}>
                {
                    bigRing()
                }
                <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                    {
                        smallRing()
                    }
                </View>
                <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                    {
                        (checkData as any).current_record.status == 'WAIT_FOR_START' && <Text className="clock_text" style={{ color: ColorType.fast }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                    }
                    {
                        (checkData as any).current_record.status == 'ONGOING' && <Text className="clock_text" style={{ color: (checkData as any).current_record.scenario == 'FAST' ? ColorType.fast : ColorType.sleep }}>
                            {TimeFormatter.formateTimeNow((checkData as any).current_record.fast ?
                                (checkData as any).current_record.fast.real_start_time :
                                (checkData as any).current_record.sleep.real_start_time)}
                        </Text>
                    }
                    {
                        (checkData as any).current_record.status == 'ONGOING1' && <Text className="clock_text" style={{ color: ColorType.fast }}>
                            {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                        </Text>
                    }
                    {
                        (checkData as any).current_record.status == 'ONGOING2' && <View  style={{ flexDirection: 'column', display: 'flex' }}>
                            <Text className="clock_text"style={{ color: ColorType.fast }}>
                                {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                            </Text>
                            <Text className="clock_text" style={{ color: ColorType.sleep }}>
                                {TimeFormatter.formateTimeNow((checkData as any).current_record.sleep.real_start_time)}
                            </Text>
                        </View>
                    }
                    {
                        (checkData as any).current_record.status == 'ONGOING3' && <Text>
                            <Text className="clock_text" style={{ color: ColorType.fast }}>
                                {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                            </Text>
                        </Text>
                    }
                </View>
            </View>

        </View>
    )
}