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

import { View, Text, Image } from "@tarojs/components";
import { dotIsOuterRange, getBgRing, getCommon, getDot, getReal, getSchedule, getTarget } from "../hooks/RingData";
import { RealRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import Rings from "./Rings";
import './IndexItem.scss'
import { useTranslation } from "react-i18next";
import { ColorType } from "@/context/themes/color";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { TimeFormatter } from "@/utils/time_format";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";

let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
}
export default function Component(props: { type: string, data: any, time: any }) {
    const { t } = useTranslation()
    const record = props.data.current_record;
    const user = useSelector((state: any) => state.user);
    const dayNight = useSelector((state: any) => state.dayNight);
    const [stageList, setStageList] = useState([true, false, false])
    const [isStageMode, setIsStageMode] = useState(false)
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        if (props.type == 'FAST_SLEEP') {
            global.updateMixItem = (data) => {
                setStageList(data)
            }

            global.changeMixIndex = (index) => {
                setIsStageMode(index == 1)
            }
        }
    }, [])

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

    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;
    }

    function bigRing() {
        var common = getCommon(null, true)
        common.radius = 42;
        common.lineWidth = 9;
        var bgRing = getBgRing()

        if (props.type == 'SLEEP') {
            var realRing = getReal(record, false, true)
            var currentDot1 = getDot(record, true)
            var targetBigRing1 = getTarget(record, true)
            if (record.status == 'ONGOING') {
                var realRing1 = getReal(record, true, false)

                return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} realRing={realRing1} targetRing={targetBigRing1} canvasId={props.type + props.time + 'big'} />
            }

            if (record.status == 'WAIT_FOR_START' || record.status == 'ONGOING1') {
                var realRing1 = getSchedule(record, props.type != 'SLEEP', true)
                return <Rings common={common} bgRing={bgRing} realRing={realRing1} canvasId={props.type + props.time + 'big'} />
            }
            if (props.data.status == 'ONGOING3') {
                realRing.color = 'rgba(0,0,0,0)'
                // bgRing.color = 'rgba(0,0,0,0)'
            }
            return <Rings common={common} bgRing={bgRing} canvasId={props.type + props.time + 'big'} realRing={realRing} />
        }
        else {
            var currentDot1 = getDot(record, true)
            var targetBigRing1 = getTarget(record, true)
            if (record.status == 'ONGOING') {
                var realRing1 = getReal(record, true, false)

                return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} realRing={realRing1} targetRing={targetBigRing1} canvasId={props.type + props.time + 'big'} />
            }
            if (record.status == 'WAIT_FOR_START') {
                var realRing1 = getSchedule(record, props.type != 'SLEEP', true)
                var list: any = []
                if (props.type == 'FAST_SLEEP') {
                    realRing1.color = ColorType.fast + '66'

                    if (dotIsOuterRange(true, record.fast)) {
                        currentDot1.color = ColorType.ring
                    }

                    if (stageList[0]) {

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

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

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

                        list.push(realRingBig)
                    }
                }

                if (!isStageMode) {
                    list = []
                }
                return <Rings common={common} bgRing={bgRing} currentDot={isStageMode ? null : currentDot1} stageList={list} realRing={realRing1} canvasId={props.type + props.time + 'big'} />
            }
            var realRing1 = getReal(record, true, false)
            return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId={props.type + props.time + 'big'} />
        }
    }

    function smallRing() {
        if (record.scenario == 'FAST_SLEEP') {
            var common = getCommon(null, false)
            common.radius = 28;
            common.lineWidth = 9;
            var bgRing = getBgRing()
            var realRing = getReal(record, false, false)
            if (props.type == 'SLEEP' || props.type == 'FAST_SLEEP') {
                if (record.sleep.status == 'WAIT_FOR_END') {
                    var targetBigRing1 = getTarget(record, false)
                    targetBigRing1.color = ColorType.sleep + '66'
                    var currentDot = getDot(record, false)
                    realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
                    return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={props.type + props.time + 'small'} targetRing={targetBigRing1} realRing={realRing} />
                }
                else if (record.status == 'WAIT_FOR_START' || record.status == 'ONGOING1') {
                    realRing = getSchedule(record, false, true)
                    var currentDot = getDot(record, false)
                    if (dotIsOuterRange(true, record.sleep)) {
                        currentDot.color = ColorType.ring
                    }

                    return <Rings common={common} bgRing={bgRing} currentDot={isStageMode ? null : currentDot} realRing={realRing} canvasId={props.type + props.time + 'small'} />
                }
                else if (record.sleep.status == 'NOT_COMPLETED') {
                    realRing.durationArc = 0.01
                    var currentDot = getDot(record, false)
                    return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={props.type + props.time + 'small'} realRing={realRing} />
                }
                else if (record.sleep.status == 'COMPLETED') {
                    realRing = getReal(record, false, true)
                    return <Rings common={common} bgRing={bgRing} canvasId={props.type + props.time + 'small'} realRing={realRing} />
                }
                else if (record.sleep.status == 'ONGOING2') {
                    var currentDot = getDot(record, false)
                    return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={props.type + props.time + 'small'} />
                }
                return <Rings common={common} bgRing={bgRing} canvasId={props.type + props.time + 'small'} />
            }
            else {


                var currentDot = getDot(record, false)
                var targetRing = getTarget(record, false)
                if (record.status == 'ONGOING2') {
                    var realRing = getReal(record, false, false)
                    return <Rings common={common} bgRing={bgRing} realRing={realRing} currentDot={currentDot} targetRing={targetRing} canvasId={props.type + props.time + 'small'} />
                }
                if (record.status == 'ONGOING3') {
                    currentDot.color = 'rgba(0, 255, 255, 0.5)'
                }
                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={props.type + props.time + 'small'} />
            }
        }
        return null
    }

    function dayRing() {
        var common = getCommon(null, true)
        common.radius = 56;
        common.lineWidth = 9;
        var bgRing = getBgRing()

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

        if (dayNight.gpsInfo && user.test_user){
            var sunRiseObj = dayNight.gpsInfo.daylights[0].sunrise
            var sunSetObj = dayNight.gpsInfo.daylights[0].sunset
            sunRise = 24*60+parseInt(sunRiseObj.split(':')[0])*60+parseInt(sunRiseObj.split(':')[1])
            sunSet = parseInt(sunSetObj.split(':')[0])*60+parseInt(sunSetObj.split(':')[1])
            if (sunSetObj.indexOf('PM')!=-1){
                sunSet+=12*60
            }
        }
        var duration = sunRise - sunSet
        realRingBig.startArc = (sunSet * 60) / (24 * 3600) * 2 * Math.PI - Math.PI / 2.0;
        realRingBig.durationArc = (duration * 60) / (24 * 3600) * 2 * Math.PI;

        var currentDot = getDot(record, false)
        if (dotIsOuterRange(false, null, { sunrise: dayNight.sunRise, sunset: dayNight.sunSet })) {
            currentDot.color = ColorType.ring
        }
        else {
            currentDot.color = ColorType.night + '66'
        }

        return <Rings common={common} bgRing={bgRing} realRing={realRingBig} currentDot={currentDot} canvasId={props.type + props.time + 'day'} />
    }

    function rings() {
        return <View style={{ position: 'relative', zIndex: 1 }}>
            {
                bigRing()
            }
            {
                props.type == 'FAST_SLEEP' && <View style={{ display: 'flex', position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }}>
                    {
                        smallRing()
                    }
                </View>
            }
            {
                props.type == 'FAST_SLEEP' && user.isLogin && global.showNightRing === true && <View style={{ display: 'flex', position: 'absolute', left: -14, top: -14, right: -14, bottom: -14 }}>
                    {
                        dayRing()
                    }
                </View>
            }

        </View>
    }

    function getArrowText() {
        if (record.status == 'WAIT_FOR_START') {
            return '去开始'
        }
        if (record.status == 'ONGOING1' && props.type == 'SLEEP') {
            return '去开始'
        }
        return '去结束'
    }

    function getDuration(obj) {
        if (!obj) {
        }
        if (obj.status == 'NOT_STARTED' || obj.status == 'NOT_COMPLETED') {
            return ''
        }
        var start = obj.real_start_time
        var end = obj.real_end_time
        if (!end) {
            end = (new Date()).getTime()
        }
        if (obj.status == 'WAIT_FOR_START') {
            start = obj.target_start_time
            end = obj.target_end_time
        }
        return TimeFormatter.durationFormate(start, end)
        // return TimeFormatter.calculateTimeDifference(start, end)
    }

    function fastDuration() {
        if (record.fast.status == 'WAIT_FOR_END') {
            return TimeFormatter.formateTimeDifference(record.fast.real_start_time, new Date().getTime(), false)
        }
        return getDuration(record.fast)
    }

    function sleepDuration() {
        if (record.sleep.status == 'WAIT_FOR_END') {
            return TimeFormatter.formateTimeDifference(record.sleep.real_start_time, new Date().getTime(), false)
        }
        return getDuration(record.sleep)
    }

    function goClock() {
        if (!user.isLogin) {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            return
        }
        global.selectData = props.data
        global.scenario = props.type
        jumpPage('/pages/clock/Clock', 'Clock', navigation)
    }

    function nightDuration(){
        if (dayNight.gpsInfo && dayNight.isMember){
            var sunRiseObj = dayNight.gpsInfo.daylights[0].sunrise
            var sunSetObj = dayNight.gpsInfo.daylights[0].sunset
            var sunRise = 24*60+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 = (sunRise-sunSet)*60*1000

            return TimeFormatter.calculateTimeDifference(new Date().getTime(),new Date().getTime()+duration);
        }else {
            return '12小时'
        }
    }

    return <View className="time_operate_item" onClick={goClock}>
        <View className="fast_sleep_item">
            {
                rings()
            }
            <View className="duration_bg">
                {
                    props.type == 'FAST_SLEEP' && user.isLogin && global.showNightRing === true &&
                    <Text className="duration_title">夜间</Text>
                }
                {
                    props.type == 'FAST_SLEEP' && user.isLogin && global.showNightRing === true &&
                    <Text className="duration_value" style={{ color: ColorType.night }}>{nightDuration()}</Text>
                }
                {
                    (props.type == 'FAST' || props.type == 'FAST_SLEEP') && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
                }
                {
                    (props.type == 'FAST' || props.type == 'FAST_SLEEP') && <Text className="duration_value" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration()}</Text>
                }
                {
                    (props.type == 'SLEEP' || props.type == 'FAST_SLEEP') && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
                }
                {
                    (props.type == 'SLEEP' || props.type == 'FAST_SLEEP') && <Text className="duration_value" style={{ color: global.sleepColor ? global.sleepColor : ColorType.sleep }}>{sleepDuration()}</Text>
                }
            </View>
            {/* <Image className="arrow1" src={require('@/assets/images/arrow.png')} /> */}
            <View className="record_arrow_bg" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>
                <View style={{ flex: 1 }} />
                <Text className='recordTime'>{getArrowText()}</Text>
                <Image className="arrow2" src={require('@/assets/images/arrow3.png')} />
            </View>

        </View>
    </View>
}