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

import { View, Text, Image, Switch } from "@tarojs/components";
import { bigRingRadius, dotIsOuterRange, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget, ringWidth, smallRingRadius, thirdRingRadius } from "@/features/trackTimeDuration/hooks/RingData";
import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import { ColorType } from "@/context/themes/color";
import { useDispatch, useSelector } from "react-redux";
import Rings from "@/features/trackTimeDuration/components/Rings";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { rpxToPx } from "@/utils/tools";
import { useEffect, useState } from "react";
import Taro, { useDidHide, useDidShow } from "@tarojs/taro";
import './Discovery.scss'
import { useTranslation } from "react-i18next";
import { TimeFormatter } from "@/utils/time_format";
import { getPerm, uploadPerm } from "@/services/user";
import Box from "@/components/layout/Box";
import { getPlans, setPlan } from "@/services/trackTimeDuration";
import DayNightCard from "@/features/trackTimeDuration/components/DayNightCard";
import { clearDayStore } from "@/store/day";
import { AtActivityIndicator } from "taro-ui";
import NoData from "@/components/view/NoData";
// import AtActivityIndicator from "taro-ui/types/activity-indicator";


let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
}

let pauseTimer = false

const defaultValue = `{"scenarios":[{"name":"FAST","count":0,"schedule":{"fast":{"start_time":"15:00","end_time":"08:00"}}},{"name":"SLEEP","count":0,"schedule":{"sleep":{"start_time":"22:00","end_time":"07:00"}}},{"name":"FAST_SLEEP","count":0,"schedule":{"fast":{"start_time":"15:00","end_time":"08:00"},"sleep":{"start_time":"22:00","end_time":"07:00"}}}],"select_count":0,"theme_color":{"fast":"#00FFFF","sleep":"#8183FF"}}`

export default function Discovery() {
    const user = useSelector((state: any) => state.user);
    const day = useSelector((state: any) => state.day);
    const ring = useSelector((state: any) => state.ring);
    const [schedule, setSchedule] = useState(null)
    const [count, setCount] = useState(0)
    const [loaded, setLoaded] = useState(false)
    const [showErrorPage, setErrorPage] = useState(false)
    const dispatch = useDispatch();
    const { t } = useTranslation()

    let navigation;
    let timeStamp = new Date().getTime()
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {

        setInterval(() => {
            if (global.pauseIndexTimer || pauseTimer) {
                return
            }
            setCount((prevCounter) => prevCounter + 1)

        }, 1000)
    }, [])

    useDidShow(() => {
        setCount(pre => pre + 1)
        //resume timer
        pauseTimer = false
    })

    useDidHide(() => {
        //pause timer
        pauseTimer = true
    })

    useEffect(() => {
        if (!user.isLogin) {
            dispatch(clearDayStore());
        }
    }, [user.isLogin])

    // useEffect(() => {
    //     setSchedule(global.homeData.scenarios)
    // }, [global.homeData])

    useEffect(() => {
        getPlanData()
        setCount(pre => pre + 1)
    }, [user.isLogin])

    function getPlanData() {
        getPlans().then(res => {
            setSchedule((res as any).scenarios)
            setLoaded(true)
            setErrorPage(false)
        }).catch(e => {
            setSchedule(JSON.parse(defaultValue))
            setLoaded(true)
            setErrorPage(true)
        })
    }

    function getFoodTime() {
        if (ring.schedule) {
            return [ring.schedule.fast.end_time, ring.schedule.fast.start_time]
        }
        var obj;
        (schedule as any).map(item => {
            if (item.name == 'FAST') {
                obj = item
            }
        })
        if (!obj) {
            console.log('报错', schedule)
            return ['16:00', '08:00'];
        }
        return [obj.schedule.fast.end_time, obj.schedule.fast.start_time]
    }

    function getActivityTime() {
        if (ring.schedule) {
            return [ring.schedule.sleep.end_time, ring.schedule.sleep.start_time]
        }
        var obj;
        (schedule as any).map(item => {
            if (item.name == 'SLEEP') {
                obj = item
            }
        })
        return [obj.schedule.sleep.end_time, obj.schedule.sleep.start_time]
    }

    function bigRing() {
        var common = getCommon(null, true)
        common.radius = bigRingRadius;
        common.lineWidth = ringWidth;
        var bgRing = getBgRing()
        const targetRing: RealRing = {
            color: (ring.current_record && ring.current_record.scenario == 'SLEEP') ? ColorType.activity + '66' : ColorType.food + '66',
            startArc: 0,
            durationArc: 2
        }
        var list = getFoodTime()
        var start;
        var end;

        if (ring.current_record && ring.current_record.scenario == 'SLEEP') {
            var list2 = getActivityTime()
            start = parseInt(list2[0].split(':')[0]) * 60 + parseInt(list2[0].split(':')[1])
            end = parseInt(list2[1].split(':')[0]) * 60 + parseInt(list2[1].split(':')[1])
            if (ring.current_record.status != 'WAIT_FOR_START') {
                var startDate = new Date(ring.current_record.sleep.target_start_time)
                var endDate = new Date(ring.current_record.sleep.target_end_time)
                end = startDate.getHours() * 60 + startDate.getMinutes()
                start = endDate.getHours() * 60 + endDate.getMinutes()
            }
        }
        else {
            start = parseInt(list[0].split(':')[0]) * 60 + parseInt(list[0].split(':')[1])
            end = parseInt(list[1].split(':')[0]) * 60 + parseInt(list[1].split(':')[1])
            if (ring.current_record && ring.current_record.status != 'WAIT_FOR_START') {
                var startDate = new Date(ring.current_record.fast.target_start_time)
                var endDate = new Date(ring.current_record.fast.target_end_time)
                end = startDate.getHours() * 60 + startDate.getMinutes()
                start = endDate.getHours() * 60 + endDate.getMinutes()
            }
        }

        if (end < start) {
            end += 24 * 60
        }
        var duration = end - start
        targetRing.startArc = (start * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        targetRing.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;

        var currentDot = getDot(null, false)
        var date = new Date()
        var minutes = date.getHours() * 60 + date.getMinutes()
        if (minutes < start) {
            minutes += 1440
        }

        currentDot.color = ColorType.food


        var now = new Date()
        var t = now.getHours() * 60 + now.getMinutes()
        var duration2 = t - start
        if (duration2 < 0) {
            duration2 += 24 * 60
        }

        let realRing: RealRing = {
            color: ColorType.food,
            startArc: (start * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
        }

        if (ring.current_record && ring.current_record.scenario == 'SLEEP') {
            realRing.color = ColorType.activity
            currentDot.color = ColorType.activity
        }

        if (!user.isLogin) {
            currentDot = null
            realRing = null
        }

        if (ring.current_record.status == 'ONGOING1') {
            realRing = null
        }

        return <Rings common={common} bgRing={bgRing} targetRing={targetRing} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={'day_big'} />
    }
    function smallRing() {
        var common = getCommon(null, false)
        common.radius = smallRingRadius;
        common.lineWidth = ringWidth;
        var bgRing = getBgRing()
        const realRingBig: RealRing = {
            color: ColorType.activity + '66',
            startArc: 0,
            durationArc: 2
        }
        var list = getActivityTime()
        var start = parseInt(list[0].split(':')[0]) * 60 + parseInt(list[0].split(':')[1])
        var end = parseInt(list[1].split(':')[0]) * 60 + parseInt(list[1].split(':')[1])
        if (ring.current_record) {
            if (ring.current_record.scenario == 'SLEEP') {
                if (ring.current_record.status == 'ONGOING') {
                    var startDate = new Date(ring.current_record.sleep.target_start_time)
                    var endDate = new Date(ring.current_record.sleep.target_end_time)
                    end = startDate.getHours() * 60 + startDate.getMinutes()
                    start = endDate.getHours() * 60 + endDate.getMinutes()
                }
            }
            else {
                if (ring.current_record.status == 'ONGOING2') {
                    var startDate = new Date(ring.current_record.sleep.target_start_time)
                    var endDate = new Date(ring.current_record.sleep.target_end_time)
                    end = startDate.getHours() * 60 + startDate.getMinutes()
                    start = endDate.getHours() * 60 + endDate.getMinutes()
                }
                else if (ring.current_record.status == 'ONGOING3') {
                    //睡眠已完成时，睡眠小于24小时，使用真实的real_end_time-real_start_time
                    //大于24小时，使用real_end_time+sleep_duration
                    if (ring.current_record.sleep.real_end_time - ring.current_record.sleep.real_start_time < 24 * 3600 * 1000) {
                        var startDate = new Date(ring.current_record.sleep.real_start_time)
                        var endDate = new Date(ring.current_record.sleep.real_end_time)
                        end = startDate.getHours() * 60 + startDate.getMinutes()
                        start = endDate.getHours() * 60 + endDate.getMinutes()
                    }
                    else {
                        var startDate = new Date(ring.current_record.sleep.real_end_time)
                        var durationTemp = end - start//ring.current_record.sleep.target_end_time-ring.current_record.sleep.target_start_time
                        if (durationTemp < 0) {
                            durationTemp += 24 * 60
                        }
                        var endDate = new Date(startDate.getTime() + durationTemp * 60 * 1000)
                        start = startDate.getHours() * 60 + startDate.getMinutes()
                        end = endDate.getHours() * 60 + endDate.getMinutes()
                    }
                }
            }

        }
        if (end < start) {
            end += 24 * 60
        }
        var duration = end - start
        realRingBig.startArc = (start * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;

        var currentDot = getDot(null, false)
        var date = new Date()
        var minutes = date.getHours() * 60 + date.getMinutes()
        if (minutes < start) {
            minutes += 1440
        }

        currentDot.color = ColorType.activity


        var now = new Date()
        var t = now.getHours() * 60 + now.getMinutes()
        var duration2 = t - start
        if (duration2 < 0) {
            duration2 += 24 * 60
        }
        let realRing: RealRing = {
            color: ColorType.activity,
            startArc: (start * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
        }

        if (!user.isLogin) {
            currentDot = null
            realRing = null
        }

        if (ring.current_record.status == 'ONGOING2') {
            realRing = null
        }

        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={'day_small'} />
    }
    function dayRing() {
        var common = getCommon(null, true)
        common.radius = thirdRingRadius;
        common.lineWidth = ringWidth;
        var bgRing = getBgRing()

        const realRingBig: RealRing = {
            color: ColorType.day + '66',
            startArc: 0,
            durationArc: 2
        }
        var sunRise = 6 * 60
        var sunSet = 18 * 60



        var sunRiseObj = day.dayRingSunrise
        var sunSetObj = day.dayRingSunset
        sunRise = parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
        sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])


        var duration = sunSet - sunRise

        realRingBig.startArc = (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;

        var currentDot = getDot(null, false)
        var date = new Date()
        var minutes = date.getHours() * 60 + date.getMinutes()
        if (minutes < sunRise) {
            minutes += 1440
        }

        currentDot.color = ColorType.day


        var now = new Date()
        var t = now.getHours() * 60 + now.getMinutes()
        var duration2 = t - sunRise
        if (duration2 < 0) {
            duration2 += 24 * 60
        }
        var realRing: RealRing = {
            color: ColorType.day,
            startArc: (sunRise * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0,
            durationArc: (duration2 * 60) / (24 * 3600) * 2 * Math.PI
        }
        if (day.dayRingDate) {
            if (new Date(day.dayRingDate).getDate() != new Date().getDate()) {
                realRing = null;
            }
        }

        if (!user.isLogin) {
            currentDot = null
            realRing = null
        }

        return <Rings common={common} bgRing={bgRing} targetRing={realRingBig} realRing={duration2 <= duration ? realRing : null} currentDot={currentDot} canvasId={'day_day'} />
    }

    function goAcitivity() {
        if (user.isLogin) {
            jumpPage('/pages/workout/Workout', 'Workout', navigation)
            return
        }
        jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
    }

    function goFood() {
        if (user.isLogin) {
            jumpPage('/pages/food/Food', 'Food', navigation)
            return
        }
        jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
    }

    function dayDuration() {
        var sunRiseObj = day.dayRingSunrise
        var sunSetObj = day.dayRingSunset
        var sunRise = parseInt(sunRiseObj.split(':')[0]) * 60 + parseInt(sunRiseObj.split(':')[1])
        var sunSet = parseInt(sunSetObj.split(':')[0]) * 60 + parseInt(sunSetObj.split(':')[1])
        if (sunSetObj.indexOf('PM') != -1) {
            sunSet += 12 * 60
        }

        var duration = (sunSet - sunRise) * 60 * 1000

        return TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
    }

    function eatDuration() {
        var list = getFoodTime()
        var start = parseInt(list[0].split(':')[0]) * 60 + parseInt(list[0].split(':')[1])
        var end = parseInt(list[1].split(':')[0]) * 60 + parseInt(list[1].split(':')[1])
        if (ring.current_record && ring.current_record.status != 'WAIT_FOR_START' && ring.current_record.scenario != 'SLEEP') {
            var startDate = new Date(ring.current_record.fast.target_start_time)
            var endDate = new Date(ring.current_record.fast.target_end_time)
            end = startDate.getHours() * 60 + startDate.getMinutes()
            start = endDate.getHours() * 60 + endDate.getMinutes()
        }
        if (end < start) {
            end += 24 * 60
        }
        var duration = (end - start) * 60 * 1000
        return TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
    }

    function activityDuration() {
        var list = getActivityTime()
        var start = parseInt(list[0].split(':')[0]) * 3600 + parseInt(list[0].split(':')[1]) * 60
        var end = parseInt(list[1].split(':')[0]) * 3600 + parseInt(list[1].split(':')[1]) * 60
        if (ring.current_record) {
            if (ring.current_record.scenario == 'SLEEP') {
                if (ring.current_record.status == 'ONGOING') {
                    var startDate = new Date(ring.current_record.sleep.target_start_time)
                    var endDate = new Date(ring.current_record.sleep.target_end_time)
                    end = startDate.getHours() * 3600 + startDate.getMinutes() * 60 + startDate.getSeconds()
                    start = endDate.getHours() * 3600 + endDate.getMinutes() * 60 + endDate.getSeconds()
                }
            }
            else {
                if (ring.current_record.status == 'ONGOING2') {
                    var startDate = new Date(ring.current_record.sleep.target_start_time)
                    var endDate = new Date(ring.current_record.sleep.target_end_time)
                    end = startDate.getHours() * 3600 + startDate.getMinutes() * 60 + startDate.getSeconds()
                    start = endDate.getHours() * 3600 + endDate.getMinutes() * 60 + endDate.getSeconds()
                }
                else if (ring.current_record.status == 'ONGOING3') {
                    //睡眠已完成时，睡眠小于24小时，使用真实的real_end_time-real_start_time
                    //大于24小时，使用real_end_time+sleep_duration
                    if (ring.current_record.sleep.real_end_time - ring.current_record.sleep.real_start_time < 24 * 3600 * 1000) {
                        var startDate = new Date(ring.current_record.sleep.real_start_time)
                        var endDate = new Date(ring.current_record.sleep.real_end_time)
                        end = startDate.getHours() * 3600 + startDate.getMinutes() * 60 + startDate.getSeconds()
                        start = endDate.getHours() * 3600 + endDate.getMinutes() * 60 + endDate.getSeconds()
                    }
                    else {
                        var startDate = new Date(ring.current_record.sleep.real_end_time)
                        var durationTemp = start - end//ring.current_record.sleep.target_end_time-ring.current_record.sleep.target_start_time

                        if (durationTemp < 0) {
                            durationTemp += 24 * 3600
                        }
                        var endDate = new Date(startDate.getTime() + durationTemp * 1000)
                        end = startDate.getHours() * 3600 + startDate.getMinutes() * 60 + startDate.getSeconds()
                        start = endDate.getHours() * 3600 + endDate.getMinutes() * 60 + endDate.getSeconds()
                        debugger
                        console.log('active', end, start, durationTemp)
                    }
                }
            }

        }
        if (end < start) {
            end += 24 * 3600
        }
        var duration = (end - start) * 1000
        return TimeFormatter.calculateTimeDifference(new Date().getTime(), new Date().getTime() + duration);
    }

    function rings() {
        return <View style={{
            position: 'relative', zIndex: 1,
            marginLeft: day.showDayRing && false ? -6 : 0,
        }}>
            {
                bigRing()
            }
            {
                ring.current_record && ring.current_record.scenario == 'FAST_SLEEP' && <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                    {
                        smallRing()
                    }
                </View>
            }
            {
                day.showDayRing && false && <View style={{ display: 'flex', position: 'absolute', left: -14, top: -14, right: -14, bottom: -14 }}>
                    {
                        dayRing()
                    }
                </View>
            }

        </View>
    }

    if (!loaded) {
        return <View style={{ width: rpxToPx(750), height: rpxToPx(900), display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <AtActivityIndicator size={40} color="#fff" />
        </View>
    }

    return <View style={{ display: 'flex', flexDirection: 'column' }}>
        <Box>
            <View>
                <View style={{
                    marginLeft: rpxToPx(-40),
                    marginRight: rpxToPx(-40),
                    marginTop: rpxToPx(-40),
                    padding: rpxToPx(48)
                }}>

                    <View style={{
                        display: 'flex',
                        flexDirection: 'row',
                        marginTop: day.showDayRing && false ? -6 : 0,
                        marginBottom: day.showDayRing && false ? -6 : 0,
                        padding: day.showDayRing && false ? 14 : 0,
                        alignItems: 'center'
                    }}>
                        {
                            schedule && rings()
                        }
                        {schedule && <View className="duration_bg3"
                            style={{ marginLeft: day.showDayRing && false ? rpxToPx(68) : rpxToPx(52), height: bigRingRadius * 2, overflow: 'visible' }}>
                            {
                                day.showDayRing && false && <Text className="duration_title2">{t('feature.common.day')}</Text>
                            }
                            {
                                day.showDayRing && false &&
                                <Text className="duration_value2" style={{ color: ColorType.day }}>{dayDuration()}</Text>
                            }
                            {
                                ring.current_record && ring.current_record.scenario != 'SLEEP' && <Text className="duration_title2">进食</Text>
                            }
                            {
                                ring.current_record && ring.current_record.scenario != 'SLEEP' && <Text className="duration_value2" style={{ color: ColorType.food }}>{eatDuration()}</Text>
                            }
                            {
                                ring.current_record && ring.current_record.scenario != 'FAST' && <Text className="duration_title2">活动</Text>
                            }
                            {
                                ring.current_record && ring.current_record.scenario != 'FAST' && <Text className="duration_value2" style={{ color: ColorType.activity, marginBottom: 0 }}>{activityDuration()}</Text>
                            }
                        </View>
                        }
                    </View>
                </View>
                <View className="food_btn1" style={{ backgroundColor: ColorType.food }} onClick={goFood}>
                    <Text style={{ fontWeight: 'bold' }}>{t('page.food.title')}</Text>
                </View>
                <View className="food_btn1" style={{ backgroundColor: ColorType.activity, marginBottom: 0 }} onClick={goAcitivity}>
                    <Text style={{ fontWeight: 'bold' }}>{t('page.workout.title')}</Text>
                </View>

            </View>
        </Box>

        <DayNightCard isNight={false} count={count} />
        {
            showErrorPage && <NoData refresh={() => { getPlanData() }} />
        }

    </View>
}