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

import { View, Text } from "@tarojs/components";
import './MainCard.scss'
import { useState } from "react";
import { rpxToPx } from "@/utils/tools";
import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import dayjs from "dayjs";
import moment from 'moment-timezone'
import { MainColorType } from "@/context/themes/color";

export default function MainSleepActiveCard() {
    const [isSleep, setIsSleep] = useState(true)
    const [isSleepMode, setIsSleepMode] = useState(true)

    const startScheduleTime = '19:00'
    const endScheduleTime = '06:00'

    function formatTime(format: string, timestamp?: number) {

        return dayjs().format(format)
    }

    function switchMode() {
        setIsSleepMode(!isSleepMode)
    }

    const common: RingCommon = {
        useCase: 'ChooseScenario',
        radius: 115,
        lineWidth: 26,
        isFast: true,
        status: 'WAIT_FOR_START'
    }

    const bgRing: BgRing = {
        color: '#EAE9E9'
    }

    function targetRing() {

        var starts: any = startScheduleTime.split(':')
        var ends: any = endScheduleTime.split(':')
        const startSeconds: any = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')
        const endSeconds: any = parseInt(ends[0] + '') * 60 + parseInt(ends[1] + '')
        const color = isSleepMode ? '#D0C0FB' : '#FF498366'
        const startArc = isSleepMode ? startSeconds / 1440 * 2 * Math.PI - Math.PI / 2 : endSeconds / 1440 * 2 * Math.PI - Math.PI / 2

        const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
        const eatCount = 1440 - fastCount

        const durationArc = isSleepMode ? fastCount / 1440 * 2 * Math.PI : eatCount / 1440 * 2 * Math.PI

        return {
            color,
            startArc,
            durationArc
        }
    }

    function realRing() {

        if (isSleepMode) {
            if (isCurrentTimeInRange( startScheduleTime,endScheduleTime)) {
                var starts: any = startScheduleTime.split(':')
                const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')

                const color = MainColorType.sleep
                const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
                var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()

                const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
                const durationArc = fastCount / 1440 * 2 * Math.PI

                return {
                    color,
                    startArc,
                    durationArc
                }
            }
        }
        else {
            if (isCurrentTimeInRange(endScheduleTime, startScheduleTime)) {
                var starts: any = endScheduleTime.split(':')
                const startSeconds = parseInt(starts[0] + '') * 60 + parseInt(starts[1] + '')

                const color = MainColorType.active
                const startArc = startSeconds / 1440 * 2 * Math.PI - Math.PI / 2
                var endSeconds = new Date().getHours() * 60 + new Date().getMinutes()

                const fastCount = endSeconds - startSeconds > 0 ? endSeconds - startSeconds : endSeconds - startSeconds + 1440
                const durationArc = fastCount / 1440 * 2 * Math.PI

                return {
                    color,
                    startArc,
                    durationArc
                }
            }
        }
    }

    function ring() {
        var offset = 0

        var hour = new Date().getHours()
        var minute = new Date().getMinutes()

        if (hour != new Date().getHours() || minute != new Date().getMinutes()) {
            offset = hour * 60 + minute - new Date().getHours() * 60 - new Date().getMinutes()
        }

        const currentDot: CurrentDot = {
            color: isSleepMode ? MainColorType.sleep : MainColorType.active,
            lineWidth: 10,
            borderColor: '#fff',
            offset: offset,
            whiteIcon: true
        }

        return <Rings common={common} bgRing={bgRing} targetRing={targetRing()} realRing={realRing()} currentDot={currentDot} canvasId={'smal11lee'} />
    }

    function isCurrentTimeInRange(start, end) {
        // 获取当前时间
        const now = new Date();
        const currentTime = now.getHours() * 60 + now.getMinutes(); // 当前时间转换为分钟

        // 将时间点转换为分钟
        const [startHour, startMinute] = start.split(':').map(Number);
        const [endHour, endMinute] = end.split(':').map(Number);
        const startTime = startHour * 60 + startMinute; // 开始时间转换为分钟
        const endTime = endHour * 60 + endMinute; // 结束时间转换为分钟

        // 处理跨日的情况
        if (endTime < startTime) {
            return currentTime >= startTime || currentTime <= endTime;
        }

        // 判断当前时间是否在范围内
        return currentTime >= startTime && currentTime <= endTime;
    }

    return <View style={{ width: rpxToPx(750), display: 'flex', flexShrink: 0, flexDirection: 'column', alignItems: 'center' }}>
        <View>Sleep Active</View>
        <View style={{ position: 'relative', }}>
            {
                ring()
            }
            <View className="ring_center">
                <Text className="time1">{formatTime('HH:mm:ss')}</Text>
                <Text className="date1">{global.language == 'en' ? formatTime('dddd, MMM D') : formatTime('MMMD日 dddd')}</Text>
            </View>
        </View>

        <Text onClick={switchMode}>Switch</Text>
    </View>
}