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";
import { IconMore } from "@/components/basic/Icons";
import showActionSheet from "@/components/basic/ActionSheet";
import { makeDone } from "@/services/health";

export default function HistoryItem(props: {
    data: any,
    preData: any,
    index: number,
    onClick: Function,
    isArchived?: boolean,
    refresh?: Function,
    mode: string,
    fast_type?: string
}) {
    const health = useSelector((state: any) => state.health);
    let showActionSheetWithOptions;
    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
        })
    }

    //npm install react-native-text-size

    function getTitle(item) {
        if (item.title) return item.title
        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: 10,
            lineWidth: 3,
            isFast: true,
            status: 'WAIT_FOR_START'
        }

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

        const realRing = {
            hideBg: true,
            color: props.mode == 'FAST,SLEEP'?getThemeColor('FAST'):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)
        }
        const canvasId = props.mode == 'FAST,SLEEP'?'history_fast_sleep' + props.index:'history_' + props.index
        return <Rings common={common} bgRing={bgRing} realRing={realRing} canvasId={canvasId} />
    }

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

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

        const realRing = {
            hideBg: true,
            color: getThemeColor('SLEEP'),
            startArc: startArc(props.data.events[1].time.timestamp),
            durationArc: durationArc(props.data.events[1].time.timestamp, props.data.events[2].time.timestamp)
        }

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

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

        })
        return count;
    }

    function historyDate() {
        if (!props.preData) {
            return dayjs(props.data.window_range.start_timestamp).format('D')
        }
        if (dayjs(props.data.window_range.start_timestamp).format('D') ==
            dayjs(props.preData.window_range.start_timestamp).format('D')) {
            return ''
        }
        return dayjs(props.data.window_range.start_timestamp).format('D')
    }

    return <View className="history_item2">
        <View className="history_date">{historyDate()}</View>
        <View className="history_content">

            <View style={{ display: 'flex', flexDirection: 'column' }}>
                {
                    props.data.events.map((item, index) => {
                        return <Text key={index}>
                            <Text className="history_item_title">{item.time && dayjs(item.time.timestamp).format('HH:mm')} {getTitle(item)} </Text>
                            {
                                item.moments && item.moments.map((moment, i) => {
                                    return <Text className="history_item_desc" key={i * 1000}>{moment.description}</Text>
                                })
                            }
                        </Text>
                    })
                }
            </View>
            <View className="media" style={{ marginTop: mediaCount() > 0 ? 9 : -10, marginRight: mediaCount() == 4 ? 80 : 0 }}>
                {
                    props.data.events.map((item) => {
                        if (item.moments) {
                            return item.moments.map(moment => {
                                return moment.media.map((obj, j) => {
                                    return <Image className="media_item" mode="aspectFill" onClick={() => preview(obj)} src={obj.url} key={j * 10} />
                                })
                            })
                        }

                    })
                }
            </View>
            <View className="history_duration_bg">
                {
                    props.fast_type != 'LF' && ring()
                }
                {
                    props.data.window_range.end_timestamp && <Text className="history_item_duration">{formatMilliseconds(props.data.window_range.end_timestamp - props.data.window_range.start_timestamp)}</Text>
                }
            </View>
            {
                props.mode == 'FAST,SLEEP' && props.data.events.length>2 && <View className="history_duration_bg" style={{marginTop:0}}>
                    {
                        props.fast_type != 'LF' && ring2()
                    }
                    {
                        props.data.window_range.end_timestamp && <Text className="history_item_duration">{formatMilliseconds(props.data.events[2].time.timestamp - props.data.events[1].time.timestamp)}</Text>
                    }
                </View>
            }
            {
                props.isArchived && <View className="history_archived_row">
                    <View className="history_archived" onClick={(e) => {
                        if (process.env.TARO_ENV == 'weapp') {
                            e.stopPropagation()
                        }
                        showActionSheet({
                            showActionSheetWithOptions: showActionSheetWithOptions,
                            title: 'Oprate Title',
                            itemList: ['标记完成', '补记'],
                            success: (res) => {
                                // tapActionSheet(res)
                                switch (res) {
                                    case 1:
                                        break;
                                    case 0:
                                        makeDone(props.data.window_id).then(res => {
                                            global.refreshWindow()
                                            global.refreshHistory()
                                            if (props.refresh)
                                                props.refresh()
                                        })
                                        break;
                                }
                            }
                        });
                    }}>
                        <IconMore width={17} color="#b2b2b2" />
                    </View>
                </View>
            }
        </View>
        <View className="seperate_light_line" />
    </View>
}