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";
import { useSelector } from "react-redux";
export default function Component() {
    const [checkData, setCheckData] = useState(null)
    const time = useSelector((state: any) => state.time);
    const user = useSelector((state: any) => state.user);

    useEffect(()=>{
        if (!user.isLogin){
            setCheckData(null)
        }
    },[user.isLogin])

    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 = global.fastColor ? global.fastColor+'66' : ColorType.fast + '66'//'rgba(170,255,0,0.4)'
        if ((checkData as any).current_record.scenario == 'SLEEP'){
            targetBigRing1.color = global.sleepColor ? global.sleepColor+'66' : ColorType.sleep + '66'//'rgba(170,255,0,0.4)'
        }

        // console.log(targetBigRing1.color)
        
        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 = global.sleepColor ? global.sleepColor + '66' : ColorType.sleep + '66'//'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 = global.sleepColor ? global.sleepColor + '66' : 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,position:'relative' }}>
            {
                bigRing()
            }
            <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                {
                    <Text className="clock_text fast_sleep_text" style={{ fontSize: 24 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                }
            </View>
        </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' && time.scenario == 'FAST_SLEEP' &&
                        <Text className="clock_text fast_sleep_text" style={{ fontSize: 24 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                    }
                    {
                        (checkData as any).current_record.status == 'WAIT_FOR_START' && time.scenario != 'FAST_SLEEP' &&
                        <Text className="clock_text" style={{ color: time.scenario == 'FAST' ? ColorType.fast : ColorType.sleep, fontSize: 24 }}>{TimeFormatter.getCurrentHourAndMinute()}</Text>
                    }
                    {
                        (checkData as any).current_record.status == 'ONGOING' && <Text className="clock_text" style={{ color: (checkData as any).current_record.scenario == 'FAST' ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep, fontSize: 32 }}>
                            {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: global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>
                            {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: global.fastColor ? global.fastColor : global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>
                                {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                            </Text>
                            <Text className="clock_text" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep, fontSize: 32 }}>
                                {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: global.fastColor ? global.fastColor : ColorType.fast, fontSize: 32 }}>
                                {TimeFormatter.formateTimeNow((checkData as any).current_record.fast.real_start_time)}
                            </Text>
                        </Text>
                    }
                </View>
            </View>

        </View>
    )
}