taro/src/pages/clock/Clock.tsx

import { View, Text, Image, ScrollView, PageContainer, Swiper, SwiperItem, Switch } from "@tarojs/components";
import Tabbar from "@/components/navigation/TabBar";
import IndexItem from '@/features/trackTimeDuration/components/IndexItem';
import Rings from "@/features/trackTimeDuration/components/Rings";
import './Clock.scss'
import { useDispatch, useSelector } from "react-redux";
import { useDidHide, useDidShow, usePageScroll, useReady, useShareAppMessage } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import { getInfoSuccess } from "@/store/user";
import { clockHome, clockSummaryRecords, clockSummaryStats, getClockRecords, getClocks, getPlans } from "@/services/trackTimeDuration";
import { updateScenario } from "@/store/time";
import { setConfigs } from "@/store/common";
import { setScenario, setStep } from "@/store/scenario";
import { useEffect, useState } from "react";
import { IconPlus, IconRadioCheck, IconRadioCross } from "@/components/basic/Icons";
import { ColorType } from "@/context/themes/color";
import { bigRingRadius, getBgRing, getCommon, getDot, getSchedule, ringWidth, smallRingRadius } from "@/features/trackTimeDuration/hooks/RingData";
import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import IndexConsole from "@/features/trackTimeDuration/components/IndexConsole";
import Modal from '@/components/layout/Modal'
import { rpxToPx } from "@/utils/tools";
import RecordFastSleep from "@/features/trackTimeDuration/components/RecordFastSleep";
import DayLight from "@/features/trackTimeDuration/components/DayLight";
import { getInfo, latestLocation } from "@/services/user";
import { TimeFormatter } from "@/utils/time_format";
import WeekCalendar from "@/features/trackTimeDuration/components/WeekCalendar";
import { useTranslation } from "react-i18next";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import Layout from "@/components/layout/layout";
import { ModalType, NaviBarTitleShowType, TemplateType } from "@/utils/types";
import TitleView from "@/features/trackTimeDuration/components/TitleView";
import ClockHeader from "@/features/trackTimeDuration/components/ClockHeader";
import DurationPicker from "@/features/trackTimeDuration/components/DurationPicker";
import SegmentPop from "@/features/trackTimeDuration/components/SegmentPop";
import Box from "@/components/layout/Box";
import DayNightCard from "@/features/trackTimeDuration/components/DayNightCard";
import StageSelector from "@/features/trackTimeDuration/components/StageSelector";
import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
import { clearNightStore, showNight } from "@/store/night";
import { showDay } from "@/store/day";
import { clientInfo, staticResources } from "@/services/common";
import { changeFastDuration, changeSleepDuration, setCurrentRecord, setSchedule } from "@/store/ring";
import { checkAuthorized } from "@/utils/check_authorized";
import NoData from "@/components/view/NoData";
import { AtActivityIndicator } from "taro-ui";
import Tooltip from "@/components/view/Tooltip";

let GradientText
let useNavigation;
let timer
let pauseTimer = false;
let AppState;
let needScroll = false;

if (process.env.TARO_ENV == 'rn') {
    AppState = require("react-native").AppState
    GradientText = require('@/components/basic/GradientText').default
    useNavigation = require("@react-navigation/native").useNavigation
}

const defaultValue = `[{"scenario":{"name":"FAST_SLEEP","count":0,"schedule":{"fast":{"start_time":"15:00","end_time":"08:00"},"sleep":{"start_time":"22:00","end_time":"07:00"}}},"current_record":{"scenario":"FAST_SLEEP","status":"WAIT_FOR_START","fast":{"status":"WAIT_FOR_START","target_start_time":1710514800000,"target_end_time":1710576000000},"sleep":{"status":"WAIT_FOR_START","target_start_time":1710540000000,"target_end_time":1710572400000}},"wx_pub_followed":false,"time_input_schema":{"min":60,"max":1380,"step":5},"theme_color":{"fast":"#00FFFF","sleep":"#8183FF"}},{"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 Page() {
    const dispatch = useDispatch();
    global.dispatch = dispatch;
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    const { t } = useTranslation()
    const user = useSelector((state: any) => state.user);
    const time = useSelector((state: any) => state.time);
    const [count, setCount] = useState(0)
    const [homeData, setHomeData] = useState(null)
    const [loaded, setLoaded] = useState(false)
    const [showErrorPage, setErrorPage] = useState(false)

    const [showModal, setShowModal] = useState(false)
    const [modalDetail, setModalDetail] = useState<any>(null)

    const [showModal2, setShowModal2] = useState(false)
    const [modalDetail2, setModalDetail2] = useState<any>(null)

    const [debugInfo, setDebugInfo] = useState(null)
    const [needShowAddTip, setNeedShowAddTip] = useState(false)
    const [showTip, setShowTip] = useState(false)
    const [records, setRecords] = useState([])

    const permission = useSelector((state: any) => state.permission);
    const common = useSelector((state: any) => state.common);

    const nightStore = useSelector((state: any) => state.night);
    if (process.env.TARO_ENV == 'weapp') {
        useShareAppMessage((e) => {
            return {
                title: t('feature.track_time_duration.common.share_title'),
                path: 'pages/clock/Clock'
            }
        })
    }

    useEffect(() => {
        dispatch(staticResources() as any);
        timer = setInterval(() => {
            if (global.pauseIndexTimer || pauseTimer) {
                return
            }
            setCount((prevCounter) => prevCounter + 1)

        }, 1000)
    }, [])

    useEffect(() => {
        if (process.env.TARO_ENV == 'weapp') {
            loadWXCache()
        }
        else {
            loadRNCache()
        }

        if (process.env.TARO_ENV == 'rn') {
            AppState.addEventListener('change', handleAppStateChange);
        }

    }, [])

    useEffect(() => {
        getCheckData()
        global.pauseIndexTimer = !user.isLogin

        if (user.isLogin) {
            uploadUserClient();
            checkAuthorized();
            //检查用户是否添加过小程序
            checkAddToMini();
        }
        else {
            dispatch(clearNightStore());
        }

    }, [user.isLogin, time.status])

    useReady(async () => {
        const userData = await getStorage('userData');
        if (userData) {
            dispatch(getInfoSuccess(JSON.parse(userData as string)) as any);
            getHistory()


        }

        // if (process.env.TARO_ENV == 'weapp') {
        //     useShareAppMessage((e) => {
        //         return {
        //             title: t('feature.track_time_duration.common.share_title'),
        //             path: 'pages/clock/Clock'
        //         }
        //     })
        // }

    })

    async function checkVersionUpdate() {
        if (!user.isLogin) {
            return
        }
        const showAlert = await getStorage('117alert') || false;
        if (!showAlert) {
            Taro.showModal({
                title: '版本更新提示',
                content: '【昼夜环】追踪每天日出日落时间;\n【周统计】查看每周断食和睡眠平均时长;\n【记录筛选】根据场景, 浏览历史记录',
                showCancel: false,
                confirmText: '我知道了'
            })
        }
        Taro.setStorage({ key: '117alert', data: true })

    }

    function checkAddToMini() {
        process.env.TARO_ENV == 'weapp' &&
            wx.checkIsAddedToMyMiniProgram({
                success: (res) => {
                    if (!res.added) {
                        setNeedShowAddTip(true)
                    }
                },
                fail: (e) => {
                }
            });
    }

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

        if (user.isLogin) {
            getInfo().then(res => {
                dispatch(getInfoSuccess(res))
            }).catch(e => {
                Taro.stopPullDownRefresh()
            })
            if (global.refreshRecent) {
                global.refreshRecent()
            }
        }
        setTimeout(() => {
            checkVersionUpdate();
        }, 1000)

    })

    usePageScroll((e) => {
        if (e.scrollTop > 70) {
          setShowTip(true)
        }
        else {
          setShowTip(false)
        }
    
      })

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

    global.refreshIndex = () => {

        setCount((prevCounter) => prevCounter + 1)
    }

    const handleAppStateChange = (nextAppState) => {
        checkTimeZone()
    };

    function checkTimeZone() {
        var split = new Date().toString().split(' ');
        var timeZoneFormatted = split[split.length - 2];


        Taro.getStorage({
            key: 'last_tz',
            success: function (res) {
                if (res.data && res.data != timeZoneFormatted) {

                    if (global.currentStatus != 'WAIT_FOR_START') {
                        Taro.showModal({
                            title: t('feature.track_time_duration.change_tz_alert.title'),
                            content: t('feature.track_time_duration.change_tz_alert.content', { tz: timeZoneFormatted }),
                            showCancel: false,
                            confirmText: t('feature.track_time_duration.change_tz_alert.confirm'),
                        })
                    }
                }
            },
            complete: function () {
                Taro.setStorage({ key: 'last_tz', data: timeZoneFormatted })
            }
        })
    }

    function uploadUserClient() {
        var systemInfo = Taro.getSystemInfoSync();
        console.log(systemInfo)
        var split = new Date().toString().split(' ');
        var timeZoneFormatted = split[split.length - 2];
        clientInfo({
            client: {
                client_type: process.env.TARO_ENV == 'weapp' ? 'MP' : 'APP',
                client_version: process.env.TARO_ENV == 'weapp' ? Taro.getAccountInfoSync().miniProgram.version : '1.0',//'1.0'
                wx_version: process.env.TARO_ENV == 'weapp' ? systemInfo.version : '_'
            },
            meta: {
                language: systemInfo.language,
                time_zone: {
                    id: Intl.DateTimeFormat().resolvedOptions().timeZone,
                    name: timeZoneFormatted
                },
            },
            device: {
                brand: systemInfo.brand,
                model: systemInfo.model,
                platform: systemInfo.platform,
                system: systemInfo.system
            },
            perm: {
                wifi_enabled: systemInfo.wifiEnabled,
                location_authorized: systemInfo.locationAuthorized,
                location_enabled: systemInfo.locationEnabled
            }
        })
    }

    function loadWXCache() {
        var showDayRing = Taro.getStorageSync('showDayRing') || false;
        var showNightRing = Taro.getStorageSync('showNightRing') || false;
        dispatch(showDay(showDayRing))
        dispatch(showNight(showNightRing))
        var gps = Taro.getStorageSync('gps')
        if (gps) {
            global.locationDetail = JSON.parse(gps)
        }
        var userData = Taro.getStorageSync('userData')
        if (userData) {
            dispatch(getInfoSuccess(JSON.parse(userData)));
        }
        // getCheckData()
    }

    async function loadRNCache() {
        var showDayRing = await getStorage('showDayRing') || false;
        var showNightRing = await getStorage('showNightRing') || false;
        dispatch(showDay(showDayRing))
        dispatch(showNight(showNightRing))
        var gps = await getStorage('gps')
        if (gps) {
            global.locationDetail = JSON.parse(gps)
        }
        var userData = await getStorage('userData')
        if (userData) {
            dispatch(getInfoSuccess(JSON.parse(userData)));
        }
        // getCheckData()
    }


    function getCheckData() {
        Promise.all([getClocks(), getPlans()]).then((list) => {
            setErrorPage(false)
            setCheckData(list)

            if (needScroll) {
                needScroll = false
                setTimeout(() => {
                    Taro.createSelectorQuery().select('#latest').boundingClientRect((rect) => {
                        Taro.pageScrollTo({
                            scrollTop: (rect as any).top,
                            duration: 150
                        })
                    }).exec()
                }, 100)
            }
        }).catch((e) => {
            setErrorPage(true)
            var list = JSON.parse(defaultValue)
            setCheckData(list)
            needScroll = false
        })

        getHistory()
    }

    function setCheckData(list: any) {
        setHomeData(list[0])
        global.homeData = list[0]
        global.currentStatus = list[0].current_record.status;
        var array = list[1].scenarios
        var schedule = null
        array.map(item => {
            if (item.name == 'FAST_SLEEP') {
                schedule = item.schedule;
            }
        })
        if (user.isLogin) {
            dispatch(updateScenario(list[0].current_record))
            dispatch(setConfigs(list[0].time_input_schema));
            dispatch(setScenario(list[0].scenario));



            global.scenario = list[0].scenario.name;
        }
        dispatch(setCurrentRecord(list[0].current_record))
        dispatch(setSchedule(schedule))
        setLoaded(true)
    }



    function getHistory() {
        if (user.isLogin)
            getClockRecords({
                page: 1,
                limit: 1,
                part_completed: true
                // completed: true
            }).then(res => {
                setRecords((res as any).data)
            })
    }

    global.indexPageRefresh = () => {
        getCheckData()
    }

    global.showIndexModal = (isShow: boolean, detail: any, debugNode?: any) => {
        global.showModal = isShow
        setDebugInfo(debugNode)
        setShowModal(isShow)
        setModalDetail(detail)
    }

    global.showIndexModal2 = (isShow: boolean, detail: any) => {
        setDebugInfo(null)
        global.showModal = isShow
        setShowModal2(isShow)
        setModalDetail2(detail)
    }

    global.changeTargetDuration = (duration: number, isFast: boolean) => {
        var obj = JSON.parse(JSON.stringify(homeData))
        var record = obj.current_record
        if (isFast) {
            record.fast.target_end_time = record.fast.target_start_time + duration * 60 * 1000
        }
        else {
            record.sleep.target_end_time = record.sleep.target_start_time + duration * 60 * 1000
        }
        setHomeData(obj)
    }

    global.updateFastSleepData = (data: any) => {
        if (data.id == (homeData as any).current_record.id) {
            var obj = JSON.parse(JSON.stringify(homeData))
            obj.current_record = data
            setHomeData(obj)
        }

        switch (data.scenario) {
            case 'FAST':
                if (data.status == 'WAIT_FOR_START') {
                    dispatch(changeFastDuration(data.fast.target_end_time - data.fast.target_start_time))
                }
                break;
            case 'SLEEP':
                if (data.status == 'WAIT_FOR_START') {
                    dispatch(changeSleepDuration(data.sleep.target_end_time - data.sleep.target_start_time))
                }
                break;
            case 'FAST_SLEEP':
                if (data.status == 'WAIT_FOR_START') {
                    dispatch(changeFastDuration(data.fast.target_end_time - data.fast.target_start_time))
                }
                else if (data.status == 'ONGOING1') {
                    debugger
                    dispatch(changeSleepDuration(data.sleep.target_end_time - data.sleep.target_start_time))
                }
                break;
        }

    }

    global.popScheduleAlert = (scenario, startTime) => {
        if (permission.wxPubFollow) {
            debugger
            Taro.showModal({
                title: t('feature.track_time_duration.reminders.schedule_title'),
                content: scenario.name == 'FAST' ?
                    t('feature.track_time_duration.reminders.enable_schedule_fast_content', { time: startTime }) :
                    t('feature.track_time_duration.reminders.enable_schedule_sleep_content', { time: startTime }),
                showCancel: false,
                confirmText: t('feature.track_time_duration.reminders.ok')
            })
        }
        else {
            debugger
            Taro.showModal({
                title: t('feature.track_time_duration.reminders.schedule_title'),
                content: scenario.name == 'FAST' ?
                    t('feature.track_time_duration.reminders.schedule_fast_content', { time: startTime }) :
                    t('feature.track_time_duration.reminders.schedule_sleep_content', { time: startTime }),
                cancelText: t('feature.track_time_duration.reminders.later'),
                confirmText: t('feature.track_time_duration.reminders.open'),
                success: function (res) {
                    if (res.confirm) {
                        followWxPub()
                    } else if (res.cancel) {
                    }
                }
            })
        }
    }

    global.popMixScheduleAlert = (time1, time2) => {
        if (permission.wxPubFollow) {
            Taro.showModal({
                title: t('feature.track_time_duration.reminders.schedule_title'),
                content: t('feature.track_time_duration.reminders.enable_schedule_mix_content', { time1: time1, time2: time2 }),
                showCancel: false,
                confirmText: t('feature.track_time_duration.reminders.ok')
            })
        }
        else {
            Taro.showModal({
                title: t('feature.track_time_duration.reminders.schedule_title'),
                content:
                    t('feature.track_time_duration.reminders.schedule_mix_content'),
                cancelText: t('feature.track_time_duration.reminders.later'),
                confirmText: t('feature.track_time_duration.reminders.open'),
                success: function (res) {
                    if (res.confirm) {
                        followWxPub()
                    } else if (res.cancel) {
                    }
                }

            })

        }
    }

    function followWxPub() {
        const resource = common.resources.filter((item: any) => {
            return item.code == 'follow_wx_pub'
        })
        jumpPage('/pages/common/H5?title=fast16cc 关注服务号&url=' + resource[0].url)
    }

    function modalContent() {
        if (showModal || showModal2) {
            if (process.env.TARO_ENV == 'weapp') {
                return <Modal
                    testInfo={debugInfo}
                    dismiss={() => {
                        setDebugInfo(null)
                        setShowModal(false);
                        setShowModal2(false);
                        global.pauseIndexTimer = false
                    }}
                    confirm={() => { }}>
                    {
                        showModal ? modalDetail : modalDetail2
                    }
                </Modal>
            }
            else if (process.env.TARO_ENV == 'rn') {
                return <PageContainer style={{ backgroundColor: '#1c1c1c' }}
                    // overlayStyle='background-color:rgba(0,0,0,0.9)'
                    // custom-style='background-color:#1c1c1c'
                    overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.9)' }}
                    customStyle={{ backgroundColor: '#1c1c1c' }}
                    closeOnSlideDown={false}
                    onBeforeEnter={() => {
                        Taro.hideTabBar();
                    }}
                    onBeforeLeave={() => {
                        Taro.showTabBar();
                    }}
                    onClick={() => { alert('b') }}
                    onClickOverlay={() => { alert('a') }}
                    onAfterLeave={() => { setShowModal(false); setShowModal2(false); global.pauseIndexTimer = false }}
                    show={showModal || showModal2} round={true} overlay={true} position='bottom'
                >
                    {
                        showModal ? modalDetail : modalDetail2
                    }
                </PageContainer>
            }
        }
        return <View />
    }

    async function getStorage(key: string) {
        try {
            const res = await Taro.getStorage({ key });
            return res.data;
        } catch {
            return '';
        }
    }

    function more() {
        jumpPage('/pages/common/RecordsHistory?type=time&title=time', 'RecordsHistory', navigation, {
            type: 'time',
            title: 'time'
        })
    }

    function tapLogin() {
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth')
            return
        }
    }

    function headerView() {
        return <ClockHeader homeData={homeData} />
    }

    global.scrollToLatest = () => {
        needScroll = true;


    }

    var timestamp = new Date().getTime()

    function render() {
        if (!loaded) {
            return <Layout type={TemplateType.customHeader} header={headerView()} title={t('page.clock.title')} titleShowStyle={NaviBarTitleShowType.scrollToShow}>
                <View style={{ width: rpxToPx(750), height: rpxToPx(900), display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <AtActivityIndicator size={40} color="#fff" />
                    <Tabbar index={0} />
                </View>
            </Layout>
        }
        return <Layout type={TemplateType.customHeader} header={headerView()} title={t('page.clock.title')} titleShowStyle={NaviBarTitleShowType.scrollToShow}>

            <View className="index_container">
                {
                    needShowAddTip && showTip && <Tooltip title="添加到我的小程序" closeTip={() => { setNeedShowAddTip(false) }} />
                }
                <Text className="count">{count}</Text>

                <Box>
                    <View>
                        <IndexItem type="FAST_SLEEP" data={homeData} time={timestamp} showStage={false} />
                        {

                            user.isLogin ? <IndexConsole record={homeData} /> : <StageSelector />
                        }

                    </View>
                </Box>

                <DayNightCard isNight={true} count={count} />
                {
                    user.isLogin && records.length > 0 && <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: rpxToPx(40), }}>
                        {
                            <Text className="discovery1" style={{ marginBottom: 0 }}>{t('feature.track_time_duration.record_fast_sleep.header.latest_record')}</Text>
                        }
                        {
                            process.env.TARO_ENV == 'weapp' && <Text className="fast_sleep_more index_more" onClick={more}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</Text>
                        }
                        {
                            process.env.TARO_ENV == 'rn' && <GradientText onClick={more} style={{ fontSize: rpxToPx(32), fontWeight: 'bold' }}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</GradientText>
                        }
                    </View>
                }

                {
                    user.isLogin && records.length > 0 && <View id="latest" className="fast_sleep_item_bg">
                        <RecordFastSleep data={records[0]} type='record' index={-20000} />
                    </View>
                }
                {
                    loaded && !user.isLogin && <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: rpxToPx(36) }}>
                        <ChooseScenarioBtn title={t('feature.auth.login.login_now')} background={ColorType.fast} onClick={tapLogin} />
                    </View>
                }
                {
                    showErrorPage && <NoData refresh={() => { getCheckData() }} />
                }

                {
                    user.isLogin && !showErrorPage && <View style={{ marginTop: rpxToPx(60), display: 'flex', flexDirection: 'column' }}>
                        <Text className="discovery1" >周统计</Text>
                        <WeekCalendar />
                    </View>
                }

                <View style={{ height: 100 }} />
                {
                    modalContent()
                }

                {
                    homeData && <SegmentPop data={homeData} />
                }
                {
                    homeData && <DurationPicker record={(homeData as any).current_record} />
                }
                <Tabbar index={0} />
            </View>
        </Layout>
    }

    // if (process.env.TARO_ENV == 'rn') {
    //     return <ScrollView>
    //         {
    //             render()
    //         }
    //     </ScrollView>
    // }
    return render()
}