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

import { View, Text } from "@tarojs/components";
import './TitleBar.scss'
import { useEffect, useState } from "react";
import trackTimeService, { machine } from "@/store/trackTimeMachine";
import { TimeFormatter } from "@/utils/time_format";
import Taro from "@tarojs/taro";
import { recordCheck } from "@/services/trackTimeDuration";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";

export default function Component() {
    const { t } = useTranslation()
    const [checkData, setCheckData] = useState(null)
    const user = useSelector((state: any) => state.user);
    useEffect(() => {
        if (machine.context.checkData) {
            setCheckData(machine.context.checkData as any);
        }
    }, [machine.context.checkData]);

    useEffect(() => {
        trackTimeService.onTransition(_ => {
            if (machine.context.checkData) {
                setCheckData(machine.context.checkData as any);
            }
        });
    }, []);

    function more() {
        if (user.isLogin == false) {
            Taro.navigateTo({
                url: '/pages/ChooseAuth'
            })
            return
        }
        var state = trackTimeService.getSnapshot().value
        if ((state as any).FAST_SLEEP === 'WAIT_FOR_START' ||
            (state as any).FAST === 'WAIT_FOR_START' ||
            (state as any).SLEEP === 'WAIT_FOR_START') {
            waitActionSheet()
        }
        else if ((state as any).FAST_SLEEP === 'ONGOING1' ||
            (state as any).FAST_SLEEP === 'ONGOING2') {
            endFastActionSheet()
        }
        else if ((state as any).FAST_SLEEP === 'ONGOING3') {
            Taro.showToast({
                title: '暂无更多操作',
                icon: 'none',
                duration: 2000
            })
        }
    }

    function waitActionSheet() {
        Taro.showActionSheet({
            itemList: [t('feature.track_time_duration.action_sheet.change_schedule'), t('feature.track_time_duration.action_sheet.switch_scenario')]
        })
            .then(res => {
                console.log(res.tapIndex)
                switch (res.tapIndex) {
                    case 0:
                        Taro.navigateTo({
                            url: '/pages/SetSchedule'
                        })
                        break;
                    case 1:
                        Taro.navigateTo({
                            url: '/pages/ChooseScenario'
                        })
                        break;
                }
            })
            .catch(err => {
                console.log(err.errMsg)
            })
    }

    function endFastActionSheet() {
        Taro.showActionSheet({
            itemList: [t('feature.track_time_duration.action_sheet.end_fast')]
        })
            .then(res => {
                console.log(res.tapIndex)
                switch (res.tapIndex) {
                    case 0:
                        {

                            const start_time = new Date().getTime();
                            // const duration = 8 * 3600 * 1000;
                            const extra = {
                                set_time: start_time - 20 * 1000,
                                confirm_time: start_time + 50 * 1000,
                            }
                            recordCheck({
                                action: 'FAST_END',
                                real_check_time: start_time,
                                extra: extra
                            }).then(res => {
                                trackTimeService.send({ type: 'END_FAST' });
                                console.log(res);
                                trackTimeService.send({ type: 'RESET' });

                                trackTimeService.send({ type: global.scenario });
                            });
                        }
                        break;
                }
            })
            .catch(err => {
                console.log(err.errMsg)
            })
    }

    if (!user.isLogin) {
        return <View className="detail" onClick={more}>
            <View className="detail_item">
                <View className="title_bg">
                    <Text className="title">断食</Text>
                </View>
                <Text className="time">16:00</Text>
            </View>
        </View>
    }

    if (!checkData) {
        return <View />
    }
    return <View className="detail" onClick={more}>
        {
            ((checkData as any).current_record.scenario == 'FAST' || (checkData as any).current_record.scenario == 'FAST_SLEEP') &&
            <View className="detail_item">
                <View className="title_bg">
                    <Text className="title">断食</Text>
                    {
                        ((checkData as any).current_record.status == 'ONGOING' ||
                            (checkData as any).current_record.status == 'ONGOING1' ||
                            (checkData as any).current_record.status == 'ONGOING2' ||
                            (checkData as any).current_record.status == 'ONGOING3') ? <View className="badge" /> : <View />
                    }
                </View>
                <Text className="time">{TimeFormatter.calculateTimeDifference((checkData as any).current_record.fast.target_start_time,
                    (checkData as any).current_record.fast.target_end_time, true)}</Text>
            </View>
        }
        {
            ((checkData as any).current_record.scenario == 'SLEEP' || (checkData as any).current_record.scenario == 'FAST_SLEEP') &&
            <View className="detail_item">
                <View className="title_bg">
                    <Text className="title">睡眠</Text>
                    {
                        ((checkData as any).current_record.status == 'ONGOING' ||
                            (checkData as any).current_record.status == 'ONGOING2') ? <View className="badge" style={{ backgroundColor: '#00FFFF' }} /> : <View />
                    }
                </View>
                {
                    (checkData as any).current_record.status == 'ONGOING3' ? <Text className="time">已完成</Text> : <Text className="time">{TimeFormatter.calculateTimeDifference((checkData as any).current_record.sleep.target_start_time,
                        (checkData as any).current_record.sleep.target_end_time, true)}</Text>
                }

            </View>
        }
    </View>
}