taro/src/_health/pages/move_schedule.tsx

import { View, Text, Image, Switch } from "@tarojs/components";
import './move_schedule.scss'
import { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { createSchedule, getActiveMovesCurrent, getMoveSchedules } from "@/services/health";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import { rpxToPx } from "@/utils/tools";
import NewHeader, { NewHeaderType } from "../components/new_header";
import StatusIndicator, { StatusType } from "../base/status_indicator";
import { MainColorType } from "@/context/themes/color";
import { IconNotification, IconNotificationOff } from "@/components/basic/Icons";
import ConsoleCell from "../components/console_cell";
import Layout from "@/components/layout/layout";
import { NaviBarTitleShowType, TemplateType } from "@/utils/types";
import Card from "../components/card";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import showAlert from "@/components/basic/Alert";
import NewSwitch from "@/components/basic/NewSwitch";

let useRoute;
let useNavigation;
let scenario = '';
if (process.env.TARO_ENV == 'rn') {
    useRoute = require("@react-navigation/native").useRoute
    useNavigation = require("@react-navigation/native").useNavigation
}
/*
https://fast-dev.oss-cn-beijing.aliyuncs.com/users/b13170f6916a27713c118a5ce75ea74a/food-journal/2024/88620d96-c898-472f-8783-d425bb91333a_20240910114628_698.png
https://fast-dev.oss-cn-beijing.aliyuncs.com/users/b13170f6916a27713c118a5ce75ea74a/food-journal/2024/88620d96-c898-472f-8783-d425bb91333a_20240910114628_698.png?x-oss-process=image/resize,w_50,limit_0
*/

let timer;
export default function MoveSchedule() {
    let router
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    if (process.env.TARO_ENV == 'rn') {
        router = useRoute()
    }
    else {
        router = useRouter()
    }

    const [hours, setHours] = useState<any>([])
    const [loaded, setLoaded] = useState(false)
    const permission = useSelector((state: any) => state.permission);
    const [count, setCount] = useState(1)
    const { t } = useTranslation()


    useEffect(() => {
        getData()
        timer = setInterval(() => {
            setCount((count => count + 1))
            var now = new Date()
            if (now.getMinutes() == 10 && now.getSeconds() == 0) {
                getData()
            }
        }, 1000)
        // getMoveSchedules().then(res => {
        //     console.log(hours)
        //     setLoaded(true)
        // })

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

    global.upcomingSchedule = ()=>{
        getData()
    }

    function getData() {
        getActiveMovesCurrent().then(res => {
            setLoaded(true)
            setHours((res as any).hours)
        })
    }

    // console.log(JSON.parse(router.params.hours))
    if (!loaded) return <View />


    function formatTimeInterval(startTimestamp, endTimestamp) {
        // 计算时间间隔（以秒为单位）
        const intervalSeconds = Math.floor((endTimestamp - startTimestamp) / 1000);

        // 处理负值的情况
        if (intervalSeconds < 0) {
            throw new Error("End timestamp must be greater than start timestamp");
        }

        // 如果时间间隔大于1小时
        if (intervalSeconds >= 3600) {
            const hours = Math.floor(intervalSeconds / 3600);
            const minutes = Math.floor((intervalSeconds % 3600) / 60);
            const seconds = intervalSeconds % 60;

            return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        } else {
            // 如果时间间隔小于1小时
            const minutes = Math.floor(intervalSeconds / 60);
            const seconds = intervalSeconds % 60;

            return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        }
    }

    function firstTime(index) {
        return ''
        var firstIndex = -1;
        var selHour = -1;
        for (var i = 0; i < hours.length; i++) {
            if (hours[i].status == 'WFS') {
                firstIndex = i;
                selHour = hours[i].hour
                break;
            }
        }
        if (firstIndex == index) {
            var endDate = new Date()
            endDate.setHours(selHour)
            endDate.setMinutes(10);
            endDate.setSeconds(0);
            endDate.setMilliseconds(0);
            var endTimestamp = endDate.getTime() + 3600 * 1000;
            if (new Date().getTime() > endTimestamp) {
                endTimestamp += 24 * 3600 * 1000
            }

            if (endTimestamp - new Date().getTime() > 20 * 60 * 1000) {
                return <Text>countdown {formatTimeInterval(new Date().getTime(), endTimestamp)} </Text>
            }
            else if (endTimestamp - new Date().getTime() < 10 * 60 * 1000) {
                <Text style={{ color: getThemeColor('ACTIVE') }}>Closing soon in {formatTimeInterval(new Date().getTime(), endTimestamp)} </Text>
            }
            return <Text>available </Text>
        }
        return <Text></Text>
    }

    function detailContent() {


        return <View style={{ display: 'flex', flexDirection: 'column' }}>
            <NewHeader type={NewHeaderType.left} title={t('health.upcomings')} />
            {
                hours.length == 0 && <View style={{ display: 'flex', flex: 1, flexDirection: 'column', alignItems: 'center', marginTop: rpxToPx(110) }}>
                    <Image src={require('@assets/_health/sleep2.png')} style={{ width: rpxToPx(64), height: rpxToPx(64) }} />
                    <Text style={{ marginTop: rpxToPx(24), fontSize: rpxToPx(50), fontWeight: 'bold', color: '#B2B2B2' }}>{t('health.sleep_well')}</Text>
                </View>
            }
            <Card>
                <View style={{ display: 'flex', flexDirection: 'column', width: rpxToPx(700) }}>
                    {
                        hours.map((item, index) => {
                            var start = item.hour
                            var open: any = start
                            var end = start + 1
                            start = (start + '').padStart(2, '0')
                            end = (end + '').padStart(2, '0')

                            open = (open + '').padStart(2, '0')
                            if (item.status != 'WFS') return <View key={index} />
                            return <ConsoleCell key={index}
                                moveCell
                                status={<StatusIndicator type={StatusType.normal}
                                    color={MainColorType.active}
                                    text={t('health.waking_hour') + (index + 1)} />}
                                title={t('health.check_begin_at2', { time: open + ':50' })}
                                description={`${parseInt(start) < new Date().getHours() ? '' : ''}${start}:00-${end}:00`}
                                subDesc={<Text className="schedule_item_time">  {firstTime(index)}</Text>}
                                right={<View style={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    alignItems: 'center'
                                }}>
                                    {
                                        item.reminder && permission.wxPubFollow ? <IconNotification color={MainColorType.g03} width={rpxToPx(28)} /> : <IconNotificationOff color={MainColorType.g03} width={rpxToPx(28)} />
                                    }
                                    <View style={{ width: rpxToPx(12) }} />
                                    <NewSwitch
                                        disable={!permission.wxPubFollow}
                                        onClick={() => {
                                            if (!permission.wxPubFollow) {
                                                showAlert({
                                                    title: t('health.reminder_alert_title'),
                                                    content: '',
                                                    cancelText: t('health.reminder_cancel'),
                                                    confirmText: t('health.reminder_confirm'),
                                                    showCancel: true,
                                                    cancel: () => {
                                                    },
                                                    confirm: () => {
                                                        global.followWxPub()
                                                        // checkNotification()
                                                    }
                                                })
                                                return
                                            }
                                        }}
                                        checked={item.reminder && permission.wxPubFollow} color={getThemeColor('ACTIVE')} onChange={e => {
                                            console.log(item)
                                            if (!permission.wxPubFollow) {
                                                showAlert({
                                                    title: t('health.reminder_alert_title'),
                                                    content: '',
                                                    cancelText: t('health.reminder_cancel'),
                                                    confirmText: t('health.reminder_confirm'),
                                                    showCancel: true,
                                                    cancel: () => {
                                                    },
                                                    confirm: () => {
                                                        global.followWxPub()
                                                        // checkNotification()
                                                    }
                                                })
                                                return
                                            }
                                            createSchedule({
                                                schedules: [{
                                                    id: item.schedule_id,
                                                    reminder: e.detail.value
                                                }],
                                            }).then(res => {
                                                getData()
                                                if (global.refreshWindow) {
                                                    global.refreshWindow()
                                                }
                                                if (global.refreshSchedules) {
                                                    global.refreshSchedules()
                                                }
                                                if (global.updateMove) {
                                                    global.updateMove()
                                                }
                                            })
                                        }} />
                                    {/* <Switch checked={item.reminder && permission.wxPubFollow} color={getThemeColor('ACTIVE')} onChange={e => {
                                        console.log(item)
                                        if (!permission.wxPubFollow) {
                                            showAlert({
                                                title: t('health.reminder_alert_title'),
                                                content: '',
                                                cancelText: t('health.reminder_cancel'),
                                                confirmText: t('health.reminder_confirm'),
                                                showCancel: true,
                                                cancel: () => {
                                                },
                                                confirm: () => {
                                                    global.followWxPub()
                                                    // checkNotification()
                                                }
                                            })
                                            return
                                        }
                                        createSchedule({
                                            schedules: [{
                                                id: item.schedule_id,
                                                reminder: e.detail.value
                                            }],
                                        }).then(res => {
                                            getData()
                                            if (global.refreshWindow) {
                                                global.refreshWindow()
                                            }
                                            if (global.refreshSchedules) {
                                                global.refreshSchedules()
                                            }
                                            if (global.updateMove) {
                                                global.updateMove()
                                            }
                                        })
                                    }} /> */}
                                    <View style={{ marginRight: -rpxToPx(14) }} />
                                </View>}
                                disable={true}
                                onClick={() => { }}
                                showLine={true}
                                fullLine={false}

                            />

                        })
                    }
                </View>
            </Card>

            <Text className="no_more" style={{ color: '#5C7099' }} onClick={() => {
                jumpPage('./move_setting_reminder')
            }}>{t('health.see_full_check')}</Text>
        </View>
    }

    return <Layout children={detailContent()}
        // title={router.params.title}
        header={null}
        secondPage={true}
        titleColor={'#fff'}
        title={t('health.upcomings')}
        type={TemplateType.customHeader}
        titleShowStyle={NaviBarTitleShowType.scrollToShow} />
}