taro/src/pages/clock/Index.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 './Index.scss'
import { useDispatch, useSelector } from "react-redux";
import { useDidShow, useReady } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import { getInfoSuccess } from "@/store/user";
import { clockHome, clockSummaryRecords, clockSummaryStats, getClockRecords, getClocks } from "@/services/trackTimeDuration";
import { updateScenario } from "@/store/time";
import { setConfigs } from "@/store/common";
import { setScenario } from "@/store/scenario";
import { useEffect, useState } from "react";
import { IconPlus, IconRadioCheck, IconRadioCross } from "@/components/basic/Icons";
import { ColorType } from "@/context/themes/color";
import { getBgRing, getCommon, getDot, getSchedule } 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 } 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";

let GradientText
let useNavigation;

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

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 [showErrorPage, setErrorPage] = useState(false)
    const [data, setData] = useState(null)
    const [count, setCount] = useState(0)
    const [homeData, setHomeData] = useState(null)

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

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

    const [isModal1, setIsModal1] = useState(false)
    const [debugInfo, setDebugInfo] = useState(null)

    const [isMulti, setIsMulti] = useState(false)
    const [records, setRecords] = useState([])

    const [calendars, setCalendars] = useState([])


    const [multiData, setMultiData] = useState([
        {
            title: '睡前断食',
            checked: false
        },
        {
            title: '睡眠中断食',
            checked: false
        },
        {
            title: '起床后断食',
            checked: false
        },
    ])

    useEffect(() => {
        global.showNightRing = false;
        setInterval(() => {
            setCount((prevCounter) => prevCounter + 1)
        }, 1000)
    }, [])

    useEffect(() => {
        // if (user.isLogin) {
        getCheckData()
        // }

        if (user.isLogin) {
            getRecords()
        }
    }, [user.isLogin, time.status])

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

            // }, 200)
            getHistory()


        }

    })

    useDidShow(() => {
        if (user.isLogin)
            refresh()
    })

    global.refreshIndex = () => {
        setCount((prevCounter) => prevCounter + 1)
    }

    function refresh() {
        getInfo().then(res => {
            dispatch(getInfoSuccess(res))
        }).catch(e => {

        })
    }

    function getCheckData() {
        clockHome().then(res => {
            setHomeData(res as any)
            global.homeData = res
        })

        getHistory()
    }

    function getRecords() {
        var timestamp = TimeFormatter.getMondayTimestamp()
        var list: any = []
        var offset = 12 * 3600 * 1000
        for (var i = 0; i < 7; i++) {
            list.push(`${i},${timestamp - 7 * 24 * 3600 * 1000 * i - offset},${timestamp - 7 * 24 * 3600 * 1000 * i + 7 * 24 * 3600 * 1000 - offset}`)
            // list.push({
            //     start:timestamp-7*24*3600*1000*i,
            //     end:timestamp-7*24*3600*1000*i+24*3600*100,
            //     index:i
            // })
        }
        clockSummaryStats({ times: list.join(';') }).then(res => {
            setCalendars((res as any).data.reverse())
        })
        // clockSummaryStats({start:new Date().getTime()-7*24*3600*1000,end:new Date().getTime()}).then(res => { })
    }

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

    const startArc = (time: number) => {
        var date = new Date(time);
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        return (hour * 3600 + minute * 60 + second) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
    }

    const durationArc = (start_time: number, end_time: number) => {
        var duration = (end_time - start_time) / 1000;
        return duration / (24 * 3600) * 2 * Math.PI;
    }

    function bigRing() {
        var currentRecord = (homeData as any).fast_sleep.current_record

        var common = getCommon(null, true)
        common.radius = 42;
        common.lineWidth = 9;
        var bgRing = getBgRing()
        var realRing1 = getSchedule(currentRecord, true, true)
        realRing1.color = ColorType.fast + '66'

        var list: any = []
        if (multiData[0].checked) {

            const realRingBig: RealRing = {
                color: global.fastColor ? global.fastColor : ColorType.fast,
                startArc: startArc(currentRecord.fast.target_start_time),
                durationArc: durationArc(currentRecord.fast.target_start_time, currentRecord.sleep.target_start_time)
            }

            list.push(realRingBig)
        }
        if (multiData[1].checked) {
            const realRingBig: RealRing = {
                color: global.fastColor ? global.fastColor : ColorType.fast,
                startArc: startArc(currentRecord.sleep.target_start_time),
                durationArc: durationArc(currentRecord.sleep.target_start_time, currentRecord.sleep.target_end_time)
            }

            list.push(realRingBig)
        }
        if (multiData[2].checked) {
            const realRingBig: RealRing = {
                color: global.fastColor ? global.fastColor : ColorType.fast,
                startArc: startArc(currentRecord.sleep.target_end_time),
                durationArc: durationArc(currentRecord.sleep.target_end_time, currentRecord.fast.target_end_time)
            }

            list.push(realRingBig)
        }

        var points: any = []
        for (var i = 0; i < 12; i++) {
            var dot: CurrentDot = {
                color: 'red',
                lineWidth: 8,
                borderColor: 'black',
                timestamp: new Date().getTime() + i * 3600 * 1000 * 2
            }
            points.push(dot)
        }
        return <Rings common={common} bgRing={bgRing} realRing={realRing1} stageList={list} dotList={points} canvasId={'testA'} />

    }

    function smallRing() {
        var common = getCommon(null, true)
        common.radius = 28;
        common.lineWidth = 9;
        var bgRing = getBgRing()
        var realRing1 = getSchedule((homeData as any).fast_sleep.current_record, false, false)
        return <Rings common={common} bgRing={bgRing} realRing={realRing1} canvasId={'testB'} />
    }

    function rings() {
        return <View style={{ display: 'flex', flexDirection: 'row', marginLeft: 100, marginBottom: 30 }}>
            <View style={{ position: 'relative', zIndex: 1 }}>
                {
                    bigRing()
                }
                {
                    <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                        {
                            smallRing()
                        }
                    </View>
                }

            </View>
        </View>
    }

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

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

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

    function modalContent() {
        if (showModal || showModal2) {
            if (process.env.TARO_ENV == 'weapp') {
                return <Modal
                    testInfo={debugInfo}
                    dismiss={() => {
                        setDebugInfo(null)
                        setShowModal(false); setShowModal2(false)
                    }}
                    confirm={() => { }}>
                    {
                        isModal1 ? 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) }}
                    show={showModal || showModal2} round={true} overlay={true} position='bottom'
                >
                    {
                        isModal1 ? modalDetail : modalDetail2
                    }
                </PageContainer>
            }
        }
        return <View />
    }

    async function getStorage(key: string) {
        try {
            const res = await Taro.getStorage({ key });
            return res.data;
        } catch {
            return '';
        }
    }
    if (!homeData) {
        return <View>
            <Tabbar index={0} />
        </View>
    }

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

    var timestamp = new Date().getTime()

    function render() {
        return <View className="index_container">
            <Text className="count">{count}</Text>
            <IndexItem type="FAST" data={(homeData as any).fast} time={timestamp} />
            <IndexItem type='SLEEP' data={(homeData as any).sleep} time={timestamp} />
            <Text className="discovery">探索</Text>
            <IndexItem type="FAST_SLEEP" data={(homeData as any).fast_sleep} time={timestamp} />
            <Swiper className='swiper1' indicatorColor='#333'
                indicatorActiveColor='#999'
                current={0}
                autoplay={false}
                duration={300}
                interval={300}
                indicator-offset={[0, -30]}
                indicator-height={30}
                indicatorDots={(homeData as any).fast_sleep.current_record.status == 'WAIT_FOR_START'}
                onChange={(e) => {
                    var pageIndex = e.detail.current
                    global.changeMixIndex(pageIndex)
                }}
            >
                <SwiperItem className='swiperItem'>
                    <IndexConsole record={(homeData as any).fast_sleep} />

                </SwiperItem>

                {
                    (homeData as any).fast_sleep.current_record.status == 'WAIT_FOR_START' &&
                    <SwiperItem className='swiperItem'>
                        <View>
                            {
                                isMulti ? <View>
                                    {
                                        multiData.map((item, index) => {
                                            return <View className={item.checked ? "single_check_sel" : "single_check_nor"} onClick={() => {
                                                item.checked = !item.checked
                                                global.updateMixItem([multiData[0].checked, multiData[1].checked, multiData[2].checked])
                                                setMultiData(JSON.parse(JSON.stringify(multiData)))
                                                setCount((prevCounter) => prevCounter + 1)
                                            }}>
                                                <Text className={item.checked ? "single_check_text_sel" : "single_check_text_nor"}>{item.title}</Text>
                                                {
                                                    item.checked ? <Image src={require('@assets/images/check_black.png')} className="single_checked" /> :
                                                        <IconPlus color={ColorType.fast} />
                                                }
                                            </View>
                                        })
                                    }
                                </View> : <View>

                                    <View className={selIndex == 0 ? "single_check_sel" : "single_check_nor"} onClick={() => { setSelIndex(0); global.updateMixItem([true, false, false]); setCount((prevCounter) => prevCounter + 1) }}>
                                        <Text className={selIndex == 0 ? "single_check_text_sel" : "single_check_text_nor"}>睡前断食</Text>
                                        {
                                            selIndex == 0 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
                                        }
                                    </View>
                                    <View className={selIndex == 1 ? "single_check_sel" : "single_check_nor"} onClick={() => { setSelIndex(1); global.updateMixItem([false, true, false]); setCount((prevCounter) => prevCounter + 1) }}>
                                        <Text className={selIndex == 1 ? "single_check_text_sel" : "single_check_text_nor"}>睡眠中断食</Text>
                                        {
                                            selIndex == 1 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
                                        }
                                    </View>
                                    <View className={selIndex == 2 ? "single_check_sel" : "single_check_nor"} onClick={() => { setSelIndex(2); global.updateMixItem([false, false, true]); setCount((prevCounter) => prevCounter + 1) }}>
                                        <Text className={selIndex == 2 ? "single_check_text_sel" : "single_check_text_nor"}>起床后断食</Text>
                                        {
                                            selIndex == 2 && <Image src={require('@assets/images/check_black.png')} className="single_checked" />
                                        }
                                    </View>
                                </View>
                            }
                            <View style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', paddingRight: rpxToPx(46), width: rpxToPx(750), boxSizing: 'border-box' }}>
                                <View style={{ flex: 1 }} />
                                <Text style={{ marginRight: 10 }}>多选</Text>
                                <Switch color={ColorType.fast} onChange={(e) => {
                                    setIsMulti(e.detail.value)
                                    if (e.detail.value) {
                                        global.updateMixItem([multiData[0].checked, multiData[1].checked, multiData[2].checked])
                                    }
                                    else {
                                        global.updateMixItem([selIndex == 0, selIndex == 1, selIndex == 2])
                                    }
                                    setCount((prevCounter) => prevCounter + 1)
                                }} />
                            </View>
                        </View>
                    </SwiperItem>
                }

            </Swiper>
            {
                user.isLogin && <DayLight />
            }
            {
                user.isLogin && records.length > 0 && <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
                    {
                        <Text className="discovery">最近</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>
                        //<Text className="header_action fast_sleep_text"  onClick={() => { props.action!() }}>{t('feature.track_time_duration.record_fast_sleep.header.btn_show_all')}</Text>
                    }
                </View>
            }

            {
                records.length > 0 && <View className="fast_sleep_item_bg">
                    <RecordFastSleep data={records[0]} type='record' delSuccess={() => { }} index={-20000}/>
                </View>
            }

            {
                user.isLogin && calendars.length > 0 && <View>
                    <Text className="discovery">周统计</Text>
                    <WeekCalendar calendars={calendars} />
                </View>
            }


            {/* 
            <View style={{ marginTop: 50 }}>
                <Text>Multi Sel</Text>
                {
                    rings()
                }

            </View> */}

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

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