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

import { View, Text } from "@tarojs/components";
import './WeekCalendarItem.scss'
import { rpxToPx } from "@/utils/tools";
import { useEffect, useState } from "react";
import { ColorType } from "@/context/themes/color";
import { TimeFormatter } from "@/utils/time_format";
import dayjs from 'dayjs'
import showAlert from "@/components/basic/Alert";
import { title } from "process";

const utc = require('dayjs/plugin/utc')
const timezone = require('dayjs/plugin/timezone')

dayjs.extend(utc)
dayjs.extend(timezone)

let timer
export default function WeekCalendarItem(props: { data: any, isCurrentWeek: boolean, isFastSleep: boolean }) {
    const [charts, setCharts] = useState([])
    const [showCurrentTime, setShowCurrentTime] = useState(false)
    const [position, setPosition] = useState({ left: 0, top: 0 })
    useEffect(() => {
        if (props.isCurrentWeek) {
            if (timer)
                clearInterval(timer)
            if (props.isCurrentWeek) {
                timer = setInterval(() => {
                    getPosition()
                }, 6000)
                getPosition()
            }
            setShowCurrentTime(props.isCurrentWeek)
        }
        else {
            if (timer)
                clearInterval(timer)
        }
        var array: any = []
        for (var i = 0; i < 7; i++) {
            var start = props.data.start + 24 * 3600 * 1000 * i
            var end = props.data.start + (24 * 3600 * 1000) * (i + 1)
            var fasts: any = []
            var sleeps: any = []
            array.push({
                start,
                end,
                fasts,
                sleeps
            })


            props.data.list.map((item, index) => {
                var isFast = item.scenario == 'FAST'
                if (!props.isFastSleep) {
                    isFast = item.scenario == 'EAT'
                }

                var real_start = item.real_start_time
                var real_end = item.real_end_time



                //睡眠数据下，以fast_end为准
                if (item.fast_real_end_timezone && item.fast_real_end_timezone.id) {
                    var strEnd = TimeFormatter.tzTimeFormateLocalTime(real_end, item.fast_real_end_timezone.id, 'YYYY-MM-DDTHH:mm:ss')
                    var duration = real_end - real_start
                    real_end = new Date(strEnd).getTime()
                    real_start = real_end - duration
                }

                else if (item.real_end_timezone && item.real_end_timezone.id) {
                    var strEnd = TimeFormatter.tzTimeFormateLocalTime(real_end, item.real_end_timezone.id, 'YYYY-MM-DDTHH:mm:ss')
                    var duration = real_end - real_start
                    real_end = new Date(strEnd).getTime()
                    real_start = real_end - duration
                }



                var range = getIntersection(start, end, real_start, real_end)




                if (range) {
                    var begin = (range[0] - start) / (24 * 3600 * 1000)
                    var height = (range[1] - range[0]) / (24 * 3600 * 1000)
                    if (isFast) {
                        fasts.push({
                            begin,
                            height
                        })
                    }
                    else {
                        sleeps.push({
                            begin, height
                        })
                    }
                }
            })
        }
        setCharts(array)
        // if (array.length>0 && props.isCurrentWeek){
        //     showAlert({
        //         title:'111',
        //         content:JSON.stringify(props.data)
        //     })
        // }

        return () => {
            timer && clearInterval(timer)
        }
    }, [props.data])

    useEffect(() => {
        if (timer)
            clearInterval(timer)
        if (props.isCurrentWeek) {
            timer = setInterval(() => {
                getPosition()
            }, 60000)
            getPosition()
        }
        setShowCurrentTime(props.isCurrentWeek)
    }, [props.isCurrentWeek])

    function getPosition() {
        var now = new Date().getTime()
        var start = props.data.start
        var index = Math.floor((now - start) / (3600 * 24 * 1000))
        var left = (now - start) % (3600 * 24 * 1000)
        var top = left / (3600 * 24 * 1000) * 400
        if (top >= 398) {
            top = 398
        }
        setPosition({
            left: rpxToPx(94 * index),
            top: rpxToPx(top)
        })
    }

    function getIntersection(start1, end1, start2, end2) {
        // 确保 start1 小于等于 end1，start2 小于等于 end2
        if (start1 > end1) {
            [start1, end1] = [end1, start1];
        }
        if (start2 > end2) {
            [start2, end2] = [end2, start2];
        }

        // 计算相交的时间戳
        var intersectionStart = Math.max(start1, start2);
        var intersectionEnd = Math.min(end1, end2);

        // 检查是否存在相交时间戳
        if (intersectionStart <= intersectionEnd) {
            // 返回相交的时间戳
            return [intersectionStart, intersectionEnd];
        } else {
            // 不存在相交时间戳

            return null;
        }
    }

    function isTop() {
        var now = new Date()
        if (now.getHours() >= 12) {
            if (!props.isFastSleep) return false;
            return true
        }
        if (!props.isFastSleep) return true;
        return false
    }

    function weekIndex() {
        var week = new Date().getDay()
        if (!props.isFastSleep) {
            if (week == 0) {
                return 6;
            }
            return week - 1;
        }
        if (!isTop()) {
            return week - 1
        }
        return week
    }
    return <View className="chart_content" style={{ width: parseInt(rpxToPx(658) + '') }}>
        <View style={{ height: parseInt(rpxToPx(60) + '') }}>
            {
                props.isFastSleep ? <View className="chart_top_week">
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 0 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(0)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(1)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 2 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(2)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 3 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(3)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 4 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(4)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 5 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(5)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + ''), opacity: props.isCurrentWeek && isTop() && weekIndex() == 6 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(6)}</Text>
                </View> :
                    <View className="chart_top_week">
                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + ''), opacity: props.isCurrentWeek  && weekIndex() == 0 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(1)}</Text>
                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + ''), opacity: props.isCurrentWeek  && weekIndex() == 1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(2)}</Text>
                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + ''), opacity: props.isCurrentWeek  && weekIndex() == 2 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(3)}</Text>
                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + ''), opacity: props.isCurrentWeek  && weekIndex() == 3 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(4)}</Text>
                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + ''), opacity: props.isCurrentWeek  && weekIndex() == 4 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(5)}</Text>
                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + ''), opacity: props.isCurrentWeek  && weekIndex() == 5 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(6)}</Text>
                        <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + ''), opacity: props.isCurrentWeek  && weekIndex() == 6 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(0)}</Text>
                    </View>
            }

        </View>

        <View className="chart_detail">

            <View className="verticalLine" style={{ left: 0 }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 1) + '') }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 2) + '') }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 3) + '') }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 4) + '') }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 5) + '') }} />
            <View className="verticalLine" style={{ left: parseInt(rpxToPx(94 * 6) + '') }} />
            <View className="horizontalLine" style={{ top: rpxToPx(100), backgroundColor: '#262626' }} />
            <View className="horizontalLine" style={{ top: rpxToPx(200), backgroundColor: '#383838' }} />
            <View className="horizontalLine" style={{ top: rpxToPx(300), backgroundColor: '#262626' }} />
            {
                charts.map((item, index) => {
                    return <View className="lineContent" key={index * 9527} style={{ left: rpxToPx(94 * index) }}>
                        {
                            (item as any).fasts.length > 0 &&
                            <View className="lineBgView">
                                {
                                    (item as any).fasts.map((obj, k) => {
                                        return <View key={k} className="detailLine" style={{
                                            backgroundColor: props.isFastSleep ? ColorType.fast : ColorType.food,
                                            top: rpxToPx(obj.begin * 400),
                                            height: rpxToPx(obj.height * 400)
                                        }} />
                                    })
                                }
                            </View>
                        }

                        {
                            (item as any).sleeps.length > 0 &&
                            <View className="lineBgView">
                                {
                                    (item as any).sleeps.map((obj, j) => {
                                        return <View key={j} className="detailLine" style={{
                                            backgroundColor: props.isFastSleep ? ColorType.sleep : ColorType.activity,
                                            top: rpxToPx(obj.begin * 400),
                                            height: rpxToPx(obj.height * 400)
                                        }} />
                                    })
                                }
                            </View>
                        }
                    </View>
                })
            }
            {
                showCurrentTime && <View className="currentLine" style={{
                    position: 'absolute',
                    left: position.left,
                    top: position.top,
                    width: rpxToPx(94 - 1),
                    backgroundColor: 'red'
                }}>
                    {/* <View className={position.top < rpxToPx(400)-40 ? 'currentTime currentTimeBottom' : 'currentTime currentTimeTop'}>{TimeFormatter.timelineFormatTime(new Date().getTime())}</View> */}
                </View>
            }
        </View>
        {
            props.isFastSleep && <View style={{ height: parseInt(rpxToPx(60) + '') }}>
                <View className="chart_bottom_week">
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(0) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 0 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(1)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 1) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(2)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 2) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 2 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(3)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 3) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 3 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(4)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 4) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 4 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(5)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 5) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == 5 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(6)}</Text>
                    <Text className="chart_week_text" style={{ left: parseInt(rpxToPx(94 * 6) + ''), opacity: props.isCurrentWeek && !isTop() && weekIndex() == -1 ? 1 : 0.4 }}>{TimeFormatter.getDayOfWeek(0)}</Text>
                </View>
            </View>
        }

    </View>
}