taro/src/_health/pages/move.tsx

import { View, Text, Image } from "@tarojs/components";
import './move.scss'
import { useDispatch, useSelector } from "react-redux";
import { getScenario, getThemeColor } from "@/features/health/hooks/health_hooks";
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { checkStart, setResult } from "@/store/action_results";
import RequestType, { thirdPartRequest } from "@/services/thirdPartRequest";
import { setAuth } from "@/features/trackSomething/hooks/werun";
import { useTranslation } from "react-i18next";
import { getActiveMoves, getActiveMovesCurrent, uploadActiveMoves } from "@/services/health";
import dayjs from "dayjs";
import { TimeFormatter } from "@/utils/time_format";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";

let timer
export default function Move() {
    const health = useSelector((state: any) => state.health);
    const [allowRun, setAllowRun] = useState(false)
    const [loaded, setLoaded] = useState(false)
    const [count, setCount] = useState(0)
    const [data, setData] = useState<any>(null)
    const [list, setList] = useState<any>([])
    const [total, setTotal] = useState(0)
    const [index, setIndex] = useState(1)
    const [hideCurrentRecent, setHideCurrentRecent] = useState(false)
    const [moreActive, setMoreActive] = useState(false)
    const [hours, setHours] = useState<any>([])
    const [startDate, setStarteDate] = useState('')
    const { t } = useTranslation()
    const dispatch = useDispatch()

    useEffect(() => {
        getMovesCurrent()
        getMovesHistory()
        Taro.getSetting({
            success: res => {
                //第一步，检测是否有授权 - 没有授权
                if (!res.authSetting['scope.werun']) {
                    setAllowRun(false)
                    Taro.setStorage({ key: 'auth', data: false })
                }
                else {
                    setAllowRun(true)
                    Taro.setStorage({ key: 'auth', data: true })
                }
            }
        })
        timer = setInterval(() => {
            setCount((index) => index + 1)
            const date = new Date()
            if (date.getMinutes() == 10 && date.getSeconds() == 0) {
                getMovesCurrent()
                getMovesHistory()
            }
        }, 1000)

        return () => {
            clearInterval(timer)
        }
    }, [])

    global.updateMove = ()=>{
        getMovesCurrent()
        getMovesHistory()
    }

    function getMovesCurrent() {
        getActiveMovesCurrent().then(res => {
            setLoaded(true)
            setData(res)
            setStarteDate((res as any).start_date)
            var array = (res as any).hours
            var temps: any = []
            for (var i = array.length - 1; i >= 0; i--) {
                var obj = array[i]
                if (obj.status != 'WFS') {
                    temps.push(obj)
                }
            }
            setHours(temps)

            // setHours((res as any).hours.reverse())
        })
    }

    function getMovesHistory() {
        getActiveMoves().then(res => {
            if (index == 1) {
                setList((res as any).data)
                setTotal((res as any).total)
            }
            else {
                setList([...list, ...(res as any).data])
            }
        })
    }


    function tapLog() {
        // if (getStatus() != 'open') {
        //     return
        // }
        if (allowRun) {
            checkout()
        }
        else {
            setAuth(successAuth, refuseAuth, t)
        }
    }

    function successAuth() {
        Taro.setStorage({ key: 'auth', data: true })
        setAllowRun(true)
    }

    function refuseAuth() {
        // setTitle('开启');
        Taro.setStorage({ key: 'auth', data: false })
        setAllowRun(false)
    }

    function checkout() {
        dispatch(checkStart());
        getWeRunData(false)
    }

    function getWeRunData(autoCheck = false) {
        if (autoCheck) {
            return
        }
        else {
            dispatch(checkStart());
        }

        // setTitle('打卡');
        setAllowRun(true)

        let schedule_id = null
        const hour = currentHourPeriod()
        data.hours.map(item => {
            if (item.hour == hour) {
                schedule_id = item.schedule_id
            }
        })

        thirdPartRequest(RequestType.RequestTypeWXRunData).then(res => {
            // var params = {
            //     is_manual: autoCheck ? 0 : 1,
            //     timestamp: time,
            //     encryptedData: (res as any).encryptedData,
            //     iv: (res as any).iv,
            //     date: strDate,
            //     cloudID: (res as any).cloudID,
            // }

            uploadActiveMoves({
                wechat_run: {
                    encryptedData: (res as any).encryptedData,
                    iv: (res as any).iv,
                },
                start_date: startDate,
                date: dayjs().format('YYYYMMDD'),
                hour: hour,
                timestamp: new Date().getTime(),
                schedule_id: schedule_id
            }).then(res => {
                Taro.showToast({
                    title: '上报成功',
                    icon: 'none'
                })
                getMovesCurrent()
                getMovesHistory()
            })
        }).catch(_ => {
            dispatch(setResult({ isSuccess: false }) as any)
        })
    }

    function currentCheckHour() {
        let currentHour = new Date().getHours()
        const minute = new Date().getMinutes()
        if (minute < 10) {
            currentHour -= 1;
            if (currentHour < 0) {
                currentHour = 23
            }
        }
        return currentHour
    }

    function currentHourChecked() {
        const currentHour = currentCheckHour()
        var isChecked = false
        data.hours.map((item) => {
            if (item.hour == currentHour && item.status != 'NOT_CHECK') {
                isChecked = true
            }
        })
        return isChecked;
    }

    function getStatus() {
        const minute = new Date().getMinutes()
        if (minute >= 50 || minute < 10) {
            var isChecked = currentHourChecked()
            if (isChecked) {
                return 'upcoming'
            }

            return 'open'
        }
        return 'upcoming'
    }

    function currentFootDesc() {
        var isChecked = currentHourChecked()
        const minute = new Date().getMinutes()

        if (isChecked && (minute < 10 || minute >= 50)) {
            let time = new Date()
            time.setMinutes(50)
            time.setSeconds(0)
            time.setMilliseconds(0)

            // 获取总秒数
            const totalSeconds = Math.floor((time.getTime() + 3600 * 1000 - new Date().getTime()) / 1000);

            // 计算小时、分钟和秒
            // const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
            const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
            const seconds = String(totalSeconds % 60).padStart(2, '0');

            // return `${hours}:${minutes}:${seconds}`;
            return `Opening soon ${minutes}:${seconds}`
        }


        const pre = new Date().getTime()
        const next = new Date().getTime() + 3600 * 1000
        if (minute >= 50) {
            return `Now open ${dayjs(pre).format('HH:50')}-${dayjs(next).format('HH:10')}`
        }
        else if (minute < 10) {
            let time = new Date()
            time.setMinutes(10)
            time.setSeconds(0)
            time.setMilliseconds(0)

            // 获取总秒数
            const totalSeconds = Math.floor((time.getTime() - new Date().getTime()) / 1000);

            // 计算小时、分钟和秒
            // const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
            const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
            const seconds = String(totalSeconds % 60).padStart(2, '0');

            // return `${hours}:${minutes}:${seconds}`;
            return `Closing in ${minutes}:${seconds}`
        }

        let time = new Date()
        time.setMinutes(50)
        time.setSeconds(0)
        time.setMilliseconds(0)

        // 获取总秒数
        const totalSeconds = Math.floor((time.getTime() - new Date().getTime()) / 1000);

        // 计算小时、分钟和秒
        // const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
        const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
        const seconds = String(totalSeconds % 60).padStart(2, '0');

        // return `${hours}:${minutes}:${seconds}`;
        return `Opening soon ${minutes}:${seconds}`
    }

    function getDuration() {
        let now = new Date()
        let pre = new Date().getTime()
        if (now.getMinutes() < 10) {
            pre -= 3600 * 1000
        }
        let next = pre + 3600 * 1000
        if (currentHourChecked()) {
            pre = next
            next = pre + 3600 * 1000
        }
        return dayjs(pre).format('HH:00') + '-' + dayjs(next).format('HH:00')
    }

    function getCurrentTarget() {
        let now = new Date()
        let pre = new Date().getTime()
        if (now.getMinutes() < 10) {
            pre -= 3600 * 1000
        }

        if (currentHourChecked()) {
            pre += 3600 * 1000
        }
        const hour = new Date(pre).getHours()
        for (var i = 0; i < data.hours.length; i++) {
            if (data.hours[i].hour == hour) {
                return `${data.hours[i].real_steps}/${data.hours[i].target_steps}`
            }
        }
    }

    function process() {
        return `${data.stat.active_hours} / ${data.stat.waking_hours}`
    }

    function currentHourPeriod() {
        const time = new Date()
        let hour = time.getHours()
        //假如00:09,则为23小时
        if (time.getMinutes() < 10) {
            hour--;
        }
        if (hour < 0) {
            hour = 23
        }
        return hour
    }

    function isExtra() {
        const hour = currentHourPeriod()
        var isFind = false
        data.hours.map((item) => {
            if (item.hour == hour) {
                isFind = true
            }
        })
        return !isFind
    }

    function currentContent() {
        const hour = currentHourPeriod()
        let info: any = null
        data.hours.map(item => {
            if (item.hour == hour) {
                info = item
            }
        })

        return <View className="move-header">
            <View className="header-current">
                <View className="current_intro">
                    <View style={{ color: (new Date().getMinutes() < 10 && getStatus() == 'open') ? getThemeColor(health.mode) : '#b2b2b2' }}>{getDuration()}</View>
                    {
                        isExtra() ? <Text style={{ color: getThemeColor('SLEEP') }}>is extra</Text> : <Text>{getCurrentTarget()} steps</Text>
                    }


                </View>
                <View className="log_btn" style={{
                    backgroundColor: getStatus() == 'open' ? getThemeColor(health.mode) : '#6666661A',
                    color: getStatus() == 'open' ? '#fff' : '#666666'
                }} onClick={tapLog}>Log</View>
                <View className="border_footer_line" />
            </View>
            <View className="current_footer">
                <Text>{currentFootDesc()}</Text>
                <Text onClick={() => {
                    jumpPage(`/_health/pages/move_schedule?hours=${JSON.stringify(data.hours)}`)
                }}>Show More</Text>
            </View>

        </View>
    }

    function currentHistory(item) {
        var start = item.hour
        var isYesterday = start > new Date().getHours()
        var end = start + 1
        start = (start + '').padStart(2, '0')
        end = (end + '').padStart(2, '0')
        return <View className="current_history_item">
            <View style={{ display: 'flex', flexDirection: 'column' }}>
                <Text className="current_item_period">{isYesterday ? '昨天' : ''}{start}:00-{end}:00</Text>
                {
                    item.is_extra && <Text style={{ color: getThemeColor('SLEEP') }}>is Extra</Text>
                }
                <Text>{item.real_steps}/{item.target_steps}</Text>
            </View>

            {
                item.status == 'MISSED' && <Text className="missed">Missed</Text>
            }
            {
                item.status == 'SEDENTARY'  && <Image className="history_item_detail_icon" src={require('@assets/_health/sit.png')} />
            }
            {
                item.status == 'ACTIVE' && <Image className="history_item_detail_icon" src={require('@assets/_health/walk.png')} />
            }
            <View className="border_footer_line" />
        </View>
    }


    function activeHour() {


        return <View className="summary">
            <View className="summary_header">
                <Text>Active Hours</Text>
                <Image className="arrow_hide"
                    onClick={() => {
                        setHideCurrentRecent(!hideCurrentRecent)
                    }}
                    src={hideCurrentRecent ? require('@assets/_health/arrow_down.png') : require('@assets/_health/arrow_up.png')} />
                <View style={{ flex: 1 }} />
                <Text style={{ color: getThemeColor(health.mode) }}>{process()}</Text>
                <View className="border_footer_line" />
            </View>
            {
                !hideCurrentRecent && <View className="summary_content">
                    {
                        hours.map((item, index) => {
                            // if (item.status == 'NOT_CHECK') return <View key={index} />
                            if (index >= 3 && !moreActive) return <View key={index} />
                            return <View key={index}>
                                {
                                    currentHistory(item)
                                }
                            </View>
                        })
                    }
                    {
                        hours.length > 3 && <View className="recent_btn_bg">
                            {
                                moreActive ? <View className="recent_btn" onClick={() => setMoreActive(false)}>收起</View> : <View className="recent_btn" onClick={() => setMoreActive(true)}>展开剩余{hours.length - 3}条</View>
                            }
                            <View className="border_footer_line" />
                        </View>
                    }
                </View>
            }
            {
                hours.length == 0 && <View className="no_current">
                    <Text>No Active Hours Yet.</Text>
                    <View className="border_footer_line"/>
                </View>
            }

            <View className="summary_footer">
                <View className="summary_footer_item">
                    <Text className="light_desc">Steps</Text>
                    <Text>{data.stat.real_steps}/{data.stat.target_steps}</Text>
                </View>
                <View className="summary_footer_item">
                    <Text className="light_desc">Calories</Text>
                    <Text>{data.stat.real_calories}/{data.stat.target_calories}</Text>
                </View>
                <View className="summary_footer_item">
                    <Text className="light_desc">Distance</Text>
                    <Text>{data.stat.real_distance}/{data.stat.target_distance}</Text>
                </View>
            </View>
        </View>
    }

    if (!loaded) return <View />

    return <View style={{ display: 'flex', flexDirection: 'column' }}>
        <Text className="move-title">Move Every Hour</Text>
        <Text onClick={() => {
            jumpPage('./move_setting_time')
        }}>Setting</Text>
        {
            currentContent()
        }
        {
            activeHour()
        }
        {
            list.length > 0 && <View className="history">
                <View className="history_header">
                    <Text className="history_header_title">Recent</Text>
                    <View className="border_footer_line" />
                </View>
                {
                    list.map((item, index) => {
                        return <View key={index} className="history_item">
                            <Text className="history_item_date">{(item.date + '').substring(6, 8)}</Text>
                            <View className="history_item_detail_bg">
                                <Image className="history_item_detail_icon" src={require('@assets/_health/walk.png')} />
                                <Text>每小时活动 {item.real_hours}/{item.target_hours} · Steps {item.stat.real_steps}/{item.stat.target_steps}</Text>
                            </View>
                            <View className="border_footer_line" />
                        </View>
                    })
                }
            </View>
        }
        {
            (list.length > 0) && (total == list.length) && <Text className="no_more">没有更多了</Text>
        }


    </View>
}