taro/src/features/health/HistoryItem.tsx

import formatMilliseconds from "@/utils/format_time";
import { View, Text, Image } from "@tarojs/components";
import './History.scss'
import Taro from "@tarojs/taro";
import dayjs from "dayjs";
import { useSelector } from "react-redux";
import { getThemeColor } from "./hooks/health_hooks";
import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import { MainColorType } from "@/context/themes/color";
import { durationArc, startArc } from "./util";

export default function HistoryItem(props: { data: any, index: number }) {
    const health = useSelector((state: any) => state.health);
    function preview(obj) {
        var list:any = []
        props.data.events.map((item) => {
            item.moment.media.map((media) => {
                list.push(media.url)
            })
        })

        Taro.previewImage({
            current: obj.url,
            urls: list
        })
    }

    function getTitle(item) {
        if (item.moment) {
            return item.moment.title
        }
        if (health.mode == 'FAST') {
            return '开始断食'
        }
        else if (health.mode == 'SLEEP') {
            return '开始睡眠'
        }
        return ''
    }

    function ring() {
        const common: RingCommon = {
            useCase: 'ChooseScenario',
            radius: 17,
            lineWidth: 3,
            isFast: true,
            status: 'WAIT_FOR_START'
        }

        const bgRing: BgRing = {
            color: MainColorType.ringBg
        }

        const realRing = {
            hideBg:true,
            color:getThemeColor(health.mode),
            startArc:startArc(props.data.window_range.start_timestamp),
            durationArc:durationArc(props.data.window_range.start_timestamp,props.data.window_range.end_timestamp)
        }


        return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={'history_' + props.index} />
    }

    function mediaCount(){
        let count = 0;
        props.data.events.map((item) => {
            if (item.moment){
                item.moment.media.map((obj, j) => {
                    count++;
                })
            }
            
        })
        return count;
    }

    return <View className="history_item">
        <View className="history_ring">
            {
                ring()
            }
            <View className="history_date">{dayjs(props.data.window_range.start_timestamp).format('D')}</View>
        </View>
        <View className="history_content">
            {
                props.data.window_range.end_timestamp && <Text className="history_item_duration" style={{ color: getThemeColor(health.mode) }}>{formatMilliseconds(props.data.window_range.end_timestamp - props.data.window_range.start_timestamp)}</Text>
            }
            <Text>
                {
                    props.data.events.map((item, index) => {
                        return <Text key={index}>
                            <Text className="history_item_title">{dayjs(item.real.start_timestamp).format('HH:mm')} {getTitle(item)} </Text>
                            {
                                item.moment && item.moment.description && <Text className="history_item_desc">{item.moment.description}</Text>
                            }
                        </Text>
                    })
                }
            </Text>
            <View className="media" style={{ marginTop: mediaCount()>0?9:-10 }}>
                {
                    props.data.events.map((item) => {
                        if (item.moment){
                            return item.moment.media.map((obj, j) => {
                                return <Image className="media_item" mode="aspectFill" onClick={() => preview(obj)} src={obj.url} key={j * 10} />
                            })
                        }
                        
                    })
                }
            </View>
        </View>
        <View className="border_footer_line" />
    </View>
}