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

import Box from "@/components/layout/Box";
import Header from "@/components/layout/Header";
import Modal from "@/components/layout/Modal";
import RecordItem from "@/features/common/RecordItem";
import { delRecord } from "@/services/trackTimeDuration";
import { ModalType } from "@/utils/types";
import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState } from "react";
import TimelineFastSleep from "./TimelineFastSleep";
import { TimeFormatter } from "@/utils/time_format";
import './RecordFastSleep.scss'
import { getBgRing, getCommon, getDot, getReal, getTarget } from "../hooks/RingData";
import Rings from "./Rings";
import Segment from "@/components/navigation/Segment";
import Stage from "./Stage";
import CenterContentTitleModal from "@/features/common/CenterContentTitleModal";
import { useTranslation } from "react-i18next";
import { ColorType } from "@/context/themes/color";
import TimelineStage from "./TimelineStage";
import { jumpPage } from "../hooks/Common";

export default function RecordFastSleep(props: { data: any, type: string, delSuccess?: Function }) {
    const [showDetailModal, setShowDetailModal] = useState(false)
    const [segmentIndex, setSegmentIndex] = useState(0)
    const { t } = useTranslation()
    const canvasId = props.data.id
    const record = props.data;
    function header() {
        if (props.type == 'latest') {
            return <Header title={t('feature.track_time_duration.record_fast_sleep.header.latest_record')} action={() => {
                jumpPage('/pages/common/RecordsHistory?type=time&title=time')
            }} />
        }
        return null
    }
    function del() {
        var id = props.data.id
        delRecord(id
        ).then(res => {
            global.refreshTime()
            Taro.showToast({
                title: t('page.records_history.del_success')
            })
            props.delSuccess && props.delSuccess(props.data)
            // Taro.navigateBack()
        })
    }

    function schedules() {
        debugger
        return <View style={{ display: 'flex', flexDirection: 'column' }}>
{/* 
            <Text className="modalTitle1" style={{
                marginBottom: 10,
                color: '#fff', fontWeight: 'bold',
            }}>{TimeFormatter.getDateAndWeek(props.data.first_real_check_time)}</Text> */}
            <TimelineStage data={props.data} title={t('feature.track_time_duration.record_fast_sleep.pop_title')} 
            subTitle={TimeFormatter.getDateAndWeek(props.data.first_real_check_time)} first_real_check_time={props.data.first_real_check_time}/>

            {/* {
                props.data.scenario == 'FAST_SLEEP' &&
                <View style={{ marginBottom: 0 }}>
                    <Segment titles={['断食睡眠时间', '断食阶段']} changed={(e) => {
                        setSegmentIndex(e);
                        global.segmentIndex = e
                    }} />
                </View>
            }
            <View className="segment_detail" style={{
                marginTop: 10,
                display: 'flex', alignItems: 'center',
                flexDirection: 'column', justifyContent: 'center'
            }}>
                <View style={{ position: 'relative',width:'100%',display: 'flex', alignItems: 'center',
                flexDirection: 'column', justifyContent: 'center' }}>
                    <View style={{ opacity: segmentIndex == 0 ? 1 : 0 }}>
                        <TimelineFastSleep data={props.data} />
                    </View>
                    {
                        props.data.scenario == 'FAST_SLEEP' && <View style={{
                            position: 'absolute', left: 0, top: 0, right: 0, bottom: 0,
                            opacity: segmentIndex == 1 ? 1 : 0
                        }}>
                            <Stage data={props.data} />
                        </View>
                    }

                </View>
            </View> */}
        </View>
    }

    function showDetail(e) {
        if (props.type == 'latest') {
            setSegmentIndex(0)
            global.segmentIndex = 0
            setShowDetailModal(true)
            return;
        }
        setShowDetailModal(true)

        // var node = (<Modal children={schedules()}
        //     modalType={ModalType.center}
        //     dismiss={() => {
        //         global.showModal(false, null)
        //     }}
        //     confirm={() => { }} />);
        // global.showModal(true, node);
    }

    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()
        }
        return TimeFormatter.durationFormate(start,end)
        // return TimeFormatter.calculateTimeDifference(start, end)
    }

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

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

        if (props.type == 'record' || props.type == 'latest') {
            var realRing = getReal(record, true, true)
            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={canvasId} 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={canvasId} />
            }
            if (record.status == 'WAIT_FOR_START') {
                return <Rings common={common} bgRing={bgRing} currentDot={currentDot1} canvasId={canvasId} />
            }
            var realRing1 = getReal(record, true, false)
            return <Rings common={common} bgRing={bgRing} realRing={realRing1} currentDot={currentDot1} targetRing={targetBigRing1} canvasId={canvasId} />
        }
    }

    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 == 'record' || props.type == 'latest') {
                if (record.sleep.status == 'WAIT_FOR_END') {
                    realRing.durationArc = durationArc(record.sleep.target_start_time, (new Date()).getTime())
                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
                }
                else if (record.sleep.status == 'NOT_COMPLETED') {
                    realRing.durationArc = 0.01
                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
                }
                else if (record.sleep.status == 'COMPLETED') {
                    realRing = getReal(record, false, true)
                    return <Rings common={common} bgRing={bgRing} canvasId={canvasId + 'small'} realRing={realRing} />
                }
                return <Rings common={common} bgRing={bgRing} canvasId={canvasId + '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={canvasId + 'small'} />
                }
                if (record.status == 'ONGOING3') {
                    currentDot.color = 'rgba(0, 255, 255, 0.5)'
                }
                return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={canvasId + 'small'} />
            }
        }
        return null
    }

    function rings() {
        return <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>
    }

    function recordDetail() {
        var fastDuration = ''
        var sleepDuration = ''
        var showFast = false;
        var showSleep = false;
        if (record.scenario == 'FAST_SLEEP') {
            fastDuration = getDuration(record.fast)
            sleepDuration = getDuration(record.sleep)
            if (record.status == 'ONGOING3') {
                fastDuration = t('feature.common.wait_for_end')
            }

            if (record.sleep.status == "NOT_STARTED") {
                sleepDuration = t('feature.common.not_started')
            }
            else if (record.sleep.status == 'NOT_COMPLETED') {
                sleepDuration = t('feature.common.not_completed')
            }
            showFast = true
            showSleep = true
        }
        else if (record.scenario == 'FAST') {
            fastDuration = getDuration(record.fast)
            showFast = true
        }
        else {
            sleepDuration = getDuration(record.sleep)
            showSleep = true
        }
        return <View className="fast_sleep_item">
            {
                rings()
            }
            <View className="duration_bg">
                {
                    showFast && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.fast')}</Text>
                }
                {
                    showFast && <Text className="duration_value" style={{ color: global.fastColor ? global.fastColor : ColorType.fast }}>{fastDuration}</Text>
                }
                {
                    showSleep && <Text className="duration_title">{t('feature.track_time_duration.record_fast_sleep.item.sleep')}</Text>
                }
                {
                    showSleep && <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'>{TimeFormatter.dateDescription(props.data.first_real_check_time, true)}</Text>
                <Image className="arrow2" src={require('@/assets/images/arrow3.png')} />
            </View>

        </View>
    }

    return <View>
        {/* {header()} */}
        <View className="time_operate_item">
            <RecordItem canDel={record.status == 'COMPLETED'} delete={del}
                onClick={showDetail}
            >{recordDetail()}
            </RecordItem>
            {
                showDetailModal && <Modal children={schedules()}
                    modalType={ModalType.center}
                    dismiss={() => setShowDetailModal(false)}
                    confirm={() => { }} />
            }
        </View>
    </View>
}