taro/src/_health/pages/move_setting_reminder.tsx

import { View, Text, Switch } from "@tarojs/components";
import './move_setting_reminder.scss'
import './move_schedule.scss'
import Cell from "../base/cell";
import { useEffect, useState } from "react";
import { createSchedule, getMoveSchedules } from "@/services/health";
import { getThemeColor } from "@/features/health/hooks/health_hooks";
import NewHeader, { NewHeaderType } from "../components/new_header";
import { IconNotification, IconNotificationOff } from "@/components/basic/Icons";
import { MainColorType } from "@/context/themes/color";
import { rpxToPx } from "@/utils/tools";
import StatusIndicator, { StatusType } from "../base/status_indicator";

export default function MoveSettingReminder() {
    const [selIndex, setSelIndex] = useState(-1)
    const [hours, setHours] = useState('')
    const [total, setTotal] = useState('')
    const [detail, setDetail] = useState<any>(null)

    useEffect(() => {
        getData()
    }, [])

    function getData() {
        getMoveSchedules().then(res => {
            setDetail(res)
            setHours((res as any).goal.hour)
            setTotal((res as any).goal.day)
        })
    }

    if (!detail) return <View />

    return <View>
        <NewHeader type={NewHeaderType.left} title="Full Check In Schedule" />
        {
            detail.schedules.map((item, index) => {
                return <View key={index}>
                    <View key={index} className="schedule_item">
                        {/* <View style={{ display: 'flex', flexDirection: 'column' }}>
                            <Text>{item.reminder_time}</Text>
                            <View>
                                <Text style={{ flex: 1 }}>check in for {item.time}-{item.end_time}</Text>

                            </View>
                        </View> */}
                        <View className="schedule_item_left">
                            <StatusIndicator type={StatusType.normal}
                                color={MainColorType.active}
                                text={'WAKING HOUR ' + (index + 1)} />
                            <View className="h34" style={{ marginLeft: rpxToPx(30) }}>Check in at {item.reminder_time}</View>
                            <Text className="h22" style={{ color: MainColorType.g02, marginTop: rpxToPx(12), marginLeft: rpxToPx(30) }}>
                                {item.title}
                            </Text>
                            {/* <Text className="schedule_item_target">{item.real_steps}/{item.target_steps} steps</Text> */}
                        </View>
                        <View style={{ flex: 1 }} />
                        {
                            item.reminder ? <IconNotification color={MainColorType.g03} width={rpxToPx(28)} /> : <IconNotificationOff color={MainColorType.g03} width={rpxToPx(28)} />
                        }
                        <View style={{ width: rpxToPx(12) }} />
                        <Switch checked={item.reminder} color={getThemeColor('ACTIVE')} onChange={e => {
                            console.log(item)
                            createSchedule({
                                schedules: [{
                                    id: item.id,
                                    reminder: e.detail.value
                                }],
                            }).then(res => {
                                getData()
                                if (global.refreshWindow) {
                                    global.refreshWindow()
                                }
                                if (global.refreshSchedules) {
                                    global.refreshSchedules()
                                }
                                if (global.updateMove) {
                                    global.updateMove()
                                }
                            })
                        }} />
                        {
                        index < detail.schedules.length - 1 && <View className="border_footer_line" style={{ left: rpxToPx(72) }} />
                    }
                    </View>
                </View>
            })
        }

    </View>
}