taro/src/components/input/LimitPickers.tsx

import { PickerView, PickerViewColumn, View, Text } from "@tarojs/components";
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import './LimitPickers.scss'
import Taro from "@tarojs/taro";
import React from "react";
import { useTranslation } from "react-i18next";
import { TimeFormatter } from "@/utils/time_format";
// export default function Component(props: { limit: number, onChange: Function, onCancel: Function,isRealTime?:boolean,limitDay?:number,time?:number,ref?:any }) {
const Component = forwardRef((props: {
    limit: number, onChange: Function, onCancel: Function,
    isRealTime?: boolean, limitDay?: number, time?: number, themeColor?: string, title?: string
}, ref) => {

    const days: string[] = [];
    const today = new Date();
    var color = props.themeColor ? props.themeColor : '#ff0000'
    var alpha = alphaToHex(0.4)
    const [values, setValues] = useState([props.limitDay ? props.limitDay - 1 : 6, today.getHours(), today.getMinutes()])
    const [isDisableConfirm, setIsDisableConfirm] = useState(false)
    const [count, setCount] = useState(0)
    const { t } = useTranslation()

    function alphaToHex(alpha) {
        var alphaValue = Math.round(alpha * 255); // 将透明度乘以255并四舍五入
        var hexValue = alphaValue.toString(16); // 将整数转换为十六进制字符串
        if (hexValue.length === 1) {
            hexValue = "0" + hexValue; // 如果十六进制字符串只有一位，补零
        }
        return hexValue;
    }

    useEffect(() => {
        global.picker_time = global.set_time
        if (props.time) {
            var date = new Date(props.time)
            setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(date), date.getHours(), date.getMinutes()])
        }
    }, [])
    // useEffect(() => {
    //     setValues([6, today.getHours(), today.getMinutes()])
    // }, [props.limit])

    useEffect(() => {
        var date = new Date();
        if (!props.isRealTime) {
            date = new Date(global.set_time);
        }

        date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
        date.setHours(values[1])
        date.setMinutes(values[2])
        global.picker_time = date.getTime()
    }, [values])


    for (let i = props.limitDay ? props.limitDay - 1 : 6; i >= 0; i--) {
        const date = new Date();
        date.setDate(today.getDate() - i);

        const month = date.getMonth() + 1;
        const day = date.getDate();
        // const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];
        const weekday = TimeFormatter.getDayOfWeek(date.getDay(), true);
        const formattedDate = global.language == 'en' ? `${weekday} ${TimeFormatter.getMonth(month)} ${day}` : `${TimeFormatter.getMonth(month)}${day}日 ${weekday}`;
        if (i == 0) {
            days.push(TimeFormatter.getTodayUnit());
        }
        else if (i == 1) {
            days.push(TimeFormatter.getYesterdayUnit());
        }
        else {
            days.push(formattedDate);
        }

    }

    const hours: number[] = [];


    for (let i = 0; i <= 23; i++) {
        hours.push(i);
    }

    const minutes: number[] = [];
    for (let i = 0; i <= 59; i++) {
        minutes.push(i);
    }



    function getTimestamp(dateTimeString: string): number {
        const timestamp = Date.parse(dateTimeString);
        return timestamp;
    }

    function getDaysDiff(date: Date): number {
        const today = new Date();
        today.setHours(0, 0, 0, 0);

        const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
        targetDate.setHours(0, 0, 0, 0);

        const timeDiff = today.getTime() - targetDate.getTime();
        const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

        return daysDiff;
    }

    function onPickerChange(e) {
        setValues(e.detail.value)
        /*
        var list = e.detail.value

        const date = new Date();
        date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - list[0]));
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();

        const time = `${year}-${expandZero(month)}-${expandZero(day)}T${expandZero(hours[list[1]])}:${expandZero(minutes[list[2]])}:00`;
        if (getTimestamp(time) > global.set_time) {
            Taro.showToast({
                icon: 'none',
                title: t('feature.common.toast.min_value'),
            })
            setValues([list[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes()])
            disableConfirm()
        }
        else {
            var limitDate = new Date(props.limit)

            if (getTimestamp(time) < props.limit) {
                Taro.showToast({
                    icon: 'none',
                    title: t('feature.common.toast.max_value'),
                })
                setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(limitDate), limitDate.getHours(), limitDate.getMinutes()])
                disableConfirm()
                return
            }

            setValues(e.detail.value)
        }*/

    }

    function onPickerEnd(e) {
        // console.log(e)
        // console.log(values)
        // setValues(values)
        // setCount(count+1)
    }

    function cancel(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        props.onCancel()
    }

    function confirm(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }

        var date = new Date();
        date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const time = `${year}-${expandZero(month)}-${expandZero(day)}T${expandZero(hours[values[1]])}:${expandZero(minutes[values[2]])}:${expandZero((new Date(global.set_time)).getSeconds())}`;
        if (getTimestamp(time) > global.set_time) {
            setValues([values[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes()])
            setTimeout(() => {
                setValues([values[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes()])
            }, 300);
            Taro.showToast({
                icon: 'none',
                title: t('feature.common.toast.min_time_value'),
            })
            return
        }
        else {
            var limitDate = new Date(props.limit)

            if (getTimestamp(time) < props.limit) {

                setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(limitDate), limitDate.getHours(), limitDate.getMinutes()])
                setTimeout(() => {
                    setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(limitDate), limitDate.getHours(), limitDate.getMinutes()])
                }, 300)
                Taro.showToast({
                    icon: 'none',
                    title: t('feature.common.toast.max_time_value'),
                })
                return
            }
        }

        if (!props.isRealTime) {
            date = new Date(global.set_time);
            date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
        }

        // 
        date.setHours(values[1])
        date.setMinutes(values[2])
        props.onChange(date.getTime())
    }

    function getConfirmData() {
        var date = new Date();
        if (!props.isRealTime) {
            date = new Date(global.set_time);
        }


        date.setDate(today.getDate() - ((props.limitDay ? props.limitDay - 1 : 6) - values[0]));
        date.setHours(values[1])
        date.setMinutes(values[2])
        return date.getTime()
    }

    useImperativeHandle(ref, () => ({
        getConfirmData: getConfirmData
    }));

    function expandZero(num: number): string {
        return num < 10 ? `0${num}` : `${num}`;
    }

    function pickerDetail() {
        return <View style={{ display: 'flex', flexDirection: 'column' }}>
            <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text>
            <View style={{ backgroundColor: 'transparent', position: 'relative' }}>
                <PickerView
                    itemStyle={{ color: '#fff', margin: 0, padding: 0 }}
                    value={values}
                    className="picker"
                    maskClass="picker-mask"
                    style={{ color: '#fff' }}
                    onChange={onPickerChange}
                    onPickEnd={onPickerEnd}
                    immediateChange={true}
                    indicatorStyle='height: 50px;color:red;'>
                    <PickerViewColumn style='flex:0 0 45%'>
                        {days.map(item => {
                            return (
                                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{item}</View>
                            );
                        })}
                    </PickerViewColumn>
                    <PickerViewColumn>
                        {hours.map(item => {
                            return (
                                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{item < 10 ? `0${item}` : item}</View>
                            );
                        })}
                    </PickerViewColumn>
                    <PickerViewColumn>
                        {minutes.map(item => {
                            return (
                                <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{item < 10 ? `0${item}` : item}</View>
                            );
                        })}
                    </PickerViewColumn>
                </PickerView>

                {/* <View className="point_bg1 ">
                <Text style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>:</Text>
            </View> */}
            </View>
            <View className='modal_operate'>
                <View className='modal_btn' style={{ backgroundColor: color + alpha }} onClick={cancel}>
                    <Text className='modal_cancel_text' style={{ color: color, fontWeight: 'bold' }}>{t('feature.common.picker_cancel_btn')}</Text>
                </View>
                <View className='btn_space' />
                <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
                    <Text className='modal_confirm_text' style={{ color: '#000', fontWeight: 'bold' }}>{t('feature.common.picker_confirm_btn')}</Text>
                </View>


            </View>
        </View>
    }

    return pickerDetail()


})

export default React.memo(Component);;