taro/src/_health/components/post_moment_time.tsx

import { View, Text, Image } from '@tarojs/components'
import './post_moment_time.scss'
import NewModal from '../base/new_modal'
import { useState } from 'react'
import { useSelector } from 'react-redux';
import { getThemeColor } from '@/features/health/hooks/health_hooks';
import { rpxToPx } from '@/utils/tools';
import NewTimePicker from '../base/new_timepicker';
import { IconCalendar, IconTarget } from '@/components/basic/Icons';
import NewDurationPicker from '../base/new_durationpicker';
import NewButton, { NewButtonType } from '../base/new_button';
import dayjs from 'dayjs';

let isYesterdayTarget = false
export default function PostMomentTime(props: {
    title?: string,
    time: string,
    isTemp: boolean,
    onChange: any,
    moment?: any,
    dismiss: any
}) {
    const health = useSelector((state: any) => state.health);
    const [showDurationPicker, setShowDurationPicker] = useState(false)
    const [isYesterday, setIsYesterday] = useState(false)
    const [showMore, setShowMore] = useState(false)
    const [time, setTime] = useState(props.time)
    const [minutes, setMinutes] = useState(30)

    function durationTime() {
        var hour = Math.floor(minutes / 60)
        var minute = minutes % 60
        var str = ''
        if (hour > 0) {
            str = hour + '小时'
        }
        if (minute > 0) {
            str += minute + '分钟'
        }
        if (hour == 0 && minute == 0) {
            str = '0分钟'
        }
        return str
    }

    function endTime() {
        var now = new Date()
        var hour = parseInt(time.split(':')[0] + '')
        var minute = parseInt(time.split(':')[1] + '')
        now.setHours(hour)
        now.setMinutes(minute)
        var timestamp = now.getTime()
        if (isYesterday) {
            timestamp = timestamp - 24 * 3600 * 1000
        }
        timestamp = timestamp + minutes * 60 * 1000

        const today = dayjs();
        const dt = dayjs(timestamp);
        var strTime = dt.format('HH:mm ')
        const yesterday = today.subtract(1, 'day');
        const tomorrow = today.subtract(-1, 'day');

        if (dt.isSame(today, 'day')) {
            return strTime + 'Today';
        } else if (dt.isSame(yesterday, 'day')) {
            return strTime + 'Yesterday';
        } else if (dt.isSame(tomorrow, 'day')) {
            return strTime + 'Tomorrow';
        } else {
            return strTime + dt.format('MM-DD');
        }
    }

    function durationContent() {
        return <View className='picker_time_card'>
            <View className='picker_time_card_header'>
                <View style={{ width: rpxToPx(52) }} />
                <Text>Duration</Text>
                <View style={{ flex: 1 }} />
                <NewButton
                    type={showDurationPicker ? NewButtonType.alpha : NewButtonType.gray}
                    color={getThemeColor(health.mode)}
                    title={durationTime()}
                    height={rpxToPx(84)}
                    onClick={() => {
                        setShowDurationPicker(true)
                    }}
                />
                <View style={{ width: rpxToPx(40) }} />
            </View>
            {
                showDurationPicker && <NewDurationPicker
                    value={minutes}
                    color={getThemeColor(health.mode)}
                    onChange={(v) => {
                        setMinutes(v)
                    }} />
            }

            <View className='picker_time_card_footer'>
                <IconTarget width={rpxToPx(24)} color='#5C7099' />
                <Text style={{ color: '#5C7099', marginLeft: rpxToPx(12), fontSize: rpxToPx(26) }}>Expect to finish at {endTime()}</Text>

            </View>
        </View>
    }

    function scheduleTime() {
        if (props.moment) {
            var timestamp = props.moment.target.timestamp
            var time = parseInt(dayjs(timestamp).format('HHmm'))
            var now = parseInt(dayjs().format('HHmm'))
            if (time > now) {
                isYesterdayTarget = true
                return `Scheduled for ${dayjs(timestamp).format('HH:mm')} yesterday`
            }
            isYesterdayTarget = false
            return `Scheduled for ${dayjs(timestamp).format('HH:mm')} today`
        }
        return 'Scheduled for xxx today'
    }
    /*
    type={expandIndex == index ? NewButtonType.alpha : NewButtonType.gray}
                    color={iFast ? MainColorType.fast : MainColorType.sleep}
    */
    return <NewModal
        title='开始时间'
        dismiss={props.dismiss}
        confirm={() => {
            props.onChange({
                time: time,
                duration: minutes,
                isYesterday: isYesterday
            })
        }}
        themeColor={getThemeColor(health.mode)}>
        <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center' }}>

            <View className='picker_time_card'>
                <View className='picker_time_card_header'>
                    <View style={{ flex: 1 }} />
                    <NewButton
                        type={NewButtonType.gray}
                        title={isYesterday ? 'Yesterday' : 'Today'}
                        height={rpxToPx(84)}
                        onClick={() => {
                            setIsYesterday(!isYesterday)
                        }}
                    />
                    <View style={{ width: rpxToPx(12) }} />
                    <NewButton
                        type={!showDurationPicker ? NewButtonType.alpha : NewButtonType.gray}
                        color={getThemeColor(health.mode)}
                        title={time}
                        height={rpxToPx(84)}
                        onClick={() => {
                            setShowDurationPicker(false)
                        }}
                    />
                    <View style={{ flex: 1 }} />
                    {
                        !showDurationPicker && <View className='border_footer_line' />
                    }
                </View>
                {
                    !showDurationPicker && <NewTimePicker time={time} onChange={(e) => {
                        setTime(e)
                    }} color={getThemeColor(health.mode)} />
                }
                {
                    !props.isTemp && !showDurationPicker && <View className='picker_time_card_footer' onClick={() => {
                        setIsYesterday(isYesterdayTarget)
                        setTime(dayjs(props.moment.target.timestamp).format('HH:mm'))
                    }}>
                        <IconCalendar width={rpxToPx(24)} color='#5C7099' />
                        <Text style={{ color: '#5C7099', marginLeft: rpxToPx(12), fontSize: rpxToPx(26) }}>{scheduleTime()}</Text>
                    </View>
                }

            </View>
            <View style={{ marginBottom: rpxToPx(72), marginTop: rpxToPx(36) }}>
                {
                    showMore ? durationContent() :
                        <View
                            onClick={() => setShowMore(true)}
                            style={{
                                flexDirection: 'row',
                                width: rpxToPx(142),
                                height: rpxToPx(72),
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center'
                            }}>
                            <Image style={{ width: rpxToPx(26), height: rpxToPx(26) }} src={require('@assets/_health/setting.png')} />
                            <Text style={{ color: '#5C7099', marginLeft: rpxToPx(10) }}>More</Text>
                        </View>
                }

            </View>

        </View>
    </NewModal>

}