taro/src/features/workout/WorkoutTimer.tsx

import { View, Text } from "@tarojs/components";
import './WorkoutStopWatch.scss'
import { useEffect, useState } from "react";
import Box from "@/components/layout/Box";
import { ChooseScenarioBtn } from "../common/SpecBtns";
import { ColorType } from "@/context/themes/color";

var timer
export default function Component() {
    const schedules = [{
        type: 'group',
        time: 5,
        index: 1,
    }, {
        type: 'rest',
        time: 5,
    }, {
        type: 'group',
        time: 3,
        index: 2
    }, {
        type: 'rest',
        time: 2,
    }, {
        type: 'group',
        time: 5,
        index: 3
    }, {
        type: 'group',
        time: 2,
        index: 4
    }, {
        type: 'group',
        time: 3,
        index: 5
    }]
    const [current, setCurrent] = useState(0)
    const [isDoing, setIsDoing] = useState(false)
    const [records, setRecords] = useState<any>([])
    const [countdown, setCountdown] = useState('')

    const [count, setCount] = useState(0)

    useEffect(() => {
        if (records.length == 0) {
            return
        }
        var record = records[records.length - 1]
        record.count += 1
        if (record.count == schedules[current].time) {
            if (current == schedules.length - 1) {
                clearInterval(timer)
                setCountdown('00:00:00')
                return
            }
            setCurrent(current + 1)
            records.push({
                start: new Date().getTime(),
                count: 0
            })
            setRecords(records)
        }
        countdownText()
        // console.log(count)
        // console.log(record)
    }, [count])


    function start() {
        setIsDoing(true)
        setRecords([{
            start: new Date().getTime(),
            count: 0
        }])
        timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)
    }

    function pause() {

    }

    function resmue() {

    }

    function terminal() {

    }

    function countdownText() {
        var count = 0
        var index = current
        if (records.length > 0) {
            count = records[records.length - 1].count
            if (count == 0 && records.length > 1) {
                count = records[records.length - 2].count
                // index -= 1
            }
        }
        var left = schedules[index].time - count


        const hours = Math.floor(left / (60 * 60));
        const minutes = Math.floor((left % (60 * 60)) / 60);
        const seconds = Math.floor(left % 60);

        var str = hours > 10 ? hours : '0' + hours
        str += ':'
        str += (minutes > 10 ? minutes : '0' + minutes) + ''
        str += ':'
        str += (seconds > 10 ? seconds : '0' + seconds) + ''
        setCountdown(str+'')
        // console.log(left,str)
        // return str
    }

    return <View style={{ display: 'flex', flexDirection: 'column', color: '#fff' }}>
        <Box>
            <View style={{ display: 'flex', flexDirection: 'column' }}>
                <Text>第{current + 1}组</Text>
                <Text className="working_duration">{countdown}</Text>
                {!isDoing && <ChooseScenarioBtn onClick={start} title="开始" background={ColorType.workout} />}
            </View>
        </Box>
        <Text className="working_end" onClick={terminal}>结束训练</Text>
    </View>
}