taro/src/_health/components/choose_date_time.tsx

import { View, Image } from "@tarojs/components"
import './choose_date_time.scss'
import { rpxToPx, vibrate } from "@/utils/tools"
import NewButton, { NewButtonType } from "../base/new_button"
import { useEffect, useState } from "react"
import NewDatePicker, { NewDatePickerType } from "../base/new_date_picker"
import NewTimePicker from "../base/new_timepicker"
import { IconCalendar } from "@/components/basic/Icons"
import dayjs from "dayjs"
import NewDateTimePicker from "../base/new_date_time_picker"
import { TimeFormatter } from "@/utils/time_format"
import { useTranslation } from "react-i18next"
import { MainColorType } from "@/context/themes/color"

export default function ChooseDateTime(props: {
    title?: any,
    disable?: boolean,
    showError?: boolean,
    showLine?: boolean,
    minTimestamp?: number,
    maxTimestamp?: number,
    hideFooter?: boolean,
    footerTitle?: string,
    tapFooter?: any,
    count?: number,
    color: string,
    date: string,
    time: string,
    expand: boolean,
    choose?: any,
    timeChange?: any,
    dateChange?: any,
    change?: any,
    enterTimestamp?: number,
    targetTimestamp?: number
}) {
    const [chooseDate, setChooseDate] = useState(false)
    const { t } = useTranslation()
    const [count, setCount] = useState(0)

    useEffect(() => {
        console.log('sss')
        setCount(count => count + 1)
    }, [props.count])


    function dateTitle() {
        if (props.date == '') return global.language == 'en' ? 'Date' : '日期'
        var date = dayjs(props.date)

        if (TimeFormatter.isToday(date.unix() * 1000)) {
            return global.language == 'en' ? 'Today' : '今天'
        }
        if (TimeFormatter.isYesterday(date.unix() * 1000)) {
            return global.language == 'en' ? 'Yesterday' : '昨天'
        }
        else if (TimeFormatter.isTimestampInThisWeek(date.unix() * 1000)) {
            return date.format('dddd')
        }
        else {
            return global.language == 'en' ? date.format('MMM D') : date.format('MMMD日')
        }
    }

    function timeTitle() {
        if (props.time == '')
            return global.language == 'en' ? 'Time' : '时间'
        return props.time

    }

    function reset() {
        props.change([
            dayjs(props.enterTimestamp).format('YYYY-MM-DD'),
            dayjs(props.enterTimestamp).format('HH:mm')
        ])
    }

    function tapTarget() {
        props.change([
            dayjs(props.targetTimestamp).format('YYYY-MM-DD'),
            dayjs(props.targetTimestamp).format('HH:mm')
        ])
    }

    function targetDate(){
        if (TimeFormatter.isToday(props.targetTimestamp!)){
            return TimeFormatter.getTodayUnit()+' '
        }
        if (TimeFormatter.isYesterday(props.targetTimestamp!)){
            return TimeFormatter.getYesterdayUnit()+' '
        }
        if (TimeFormatter.isTomorrowday(props.targetTimestamp!)){
            return TimeFormatter.getTomorrowUnit()+' '
        }
        return global.language=='en'?dayjs(props.targetTimestamp).format('MMM D '):dayjs(props.targetTimestamp).format('MMMD日')

    }

    function footerTitle() {
        if (dayjs(props.targetTimestamp!).format('YYYY-MM-DD HH:mm') == props.date + ' ' + props.time) {
            return <View style={{ display: 'flex', flexDirection: 'row' }} onClick={reset}>
                <View className="h26 g02">{t('health.select_schedule')}</View>
                <View className="h26" style={{ color: MainColorType.link, marginLeft: rpxToPx(8) }}>{t('health.reset')}</View>
            </View>
        }
        if (new Date().getTime() > props.targetTimestamp!) {
            return <View style={{ display: 'flex', flexDirection: 'row' }} onClick={tapTarget}>
                <View className="h26 g02">{t('health.schedule_for', { time: targetDate()+dayjs(props.targetTimestamp).format('HH:mm') })}</View>
                <View className="h26" style={{ color: MainColorType.link, marginLeft: rpxToPx(8) }}>{t('health.select')}</View>
            </View>
        }
        else {
            return <View onClick={(e)=>{
                vibrate()
            }}>
                <View className="h26 g02">{t('health.schedule_for', { time: targetDate()+dayjs(props.targetTimestamp).format('HH:mm') })}</View>
            </View>
        }
    }

    return <View style={{ position: 'relative' }}>
        <View className="card_header">
            {
                props.title ? <View className="h34" style={{ flex: 1, color: '#000' }}>{props.title}</View> :
                    <View style={{ flex: 1 }} />
            }
            {/* <View className="h34" style={{color:props.color}}>{dateTitle()} {timeTitle()}</View> */}
            {
                !props.title ? <View className="h44" style={{ color: props.color }}
                onClick={() => {
                    // setChooseDate(false)
                    if (props.choose) {
                        props.choose()
                    }
                }}
                >{dateTitle()} {timeTitle()}</View> :
                    <View style={{
                        borderColor: props.showError ? 'red' : (props.expand && !chooseDate) ? props.color : 'transparent',
                        borderWidth: rpxToPx(2),
                        borderRadius: rpxToPx(88 / 4),
                        borderStyle: 'solid'
                    }}>
                        <NewButton
                            type={(props.expand && !chooseDate && !props.showError) ? NewButtonType.alpha : NewButtonType.gray}
                            color={props.color}
                            title={dateTitle() + ' ' + timeTitle()}
                            fontSize={rpxToPx(34)}
                            width={rpxToPx(296)}
                            height={rpxToPx(84)}
                            disable={props.disable}
                            fontNormal
                            onClick={() => {
                                setChooseDate(false)
                                if (props.choose) {
                                    props.choose()
                                }
                            }}
                        />
                    </View>
            }
            {
                !props.title && <View style={{ flex: 1 }} />
            }
            <View className='border_footer_line' style={{ left: rpxToPx(40),right:rpxToPx(40) }} />
        </View>

        {
            props.expand && !chooseDate && <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: rpxToPx(698), height: rpxToPx(340) }}>
                {/* <NewTimePicker time={props.time} onChange={(e) => {
                    props.timeChange(e)
                }} color={props.color} /> */}
                <NewDateTimePicker date={props.date} count={props.count} time={props.time}
                    minTimestamp={props.minTimestamp ? props.minTimestamp : new Date().getTime() - 24 * 3600 * 1000}
                    maxTimestamp={props.maxTimestamp ?? new Date().getTime()}
                    onChange={(e) => {
                        if (props.dateChange)
                            props.dateChange(e[0])
                        if (props.timeChange)
                            props.timeChange(e[1])
                        props.change(e)
                    }} color={props.color} />
            </View>
        }

        {
            props.expand && !chooseDate && !props.hideFooter && <View className='card_footer'>
                {
                    props.footerTitle
                }
                {
                    props.targetTimestamp && footerTitle()
                }
                {/* <NewButton type={NewButtonType.link}
                    title={props.footerTitle}
                    onClick={props.tapFooter}
                >
                    <View style={{ marginRight: rpxToPx(12), display: 'flex' }}>
                        <IconCalendar width={rpxToPx(24)} color='#5C7099' />
                    </View>
                </NewButton> */}
            </View>
        }
        {
            props.showLine && <View className="border_footer_line" style={{ left: rpxToPx(66) }} />
        }
    </View>
}