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";
// 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)

    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 formattedDate = `${month}月${day}日 ${weekday}`;
        if (i == 0) {
            days.push('今天 ');
        }
        else if (i == 1) {
            days.push('昨天 ');
        }
        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) {
        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) > today.getTime()) {
        //     setValues([list[0], today.getHours(), today.getMinutes()])
        // }
        if (getTimestamp(time) > global.set_time) {
            Taro.showToast({
                icon: 'none',
                title: '不能更大了',
            })
            setValues([list[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes()])
            disableConfirm()
        }
        else {
            var limitDate = new Date(props.limit)

            // const date = new Date();
            // date.setDate(today.getDate() - (6 - list[0]));
            // const year = date.getFullYear();
            // const month = date.getMonth() + 1;
            // const day = date.getDate();
            // debugger
            // const time = `${year}-${expandZero(month)}-${expandZero(day)}T${expandZero(hours[list[1]])}:${expandZero(minutes[list[2]])}:59`;
            if (getTimestamp(time) < props.limit) {
                // console.log(6 - getDaysDiff(limitDate))
                Taro.showToast({
                    icon: 'none',
                    title: '不能更小了',
                })
                setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(limitDate), limitDate.getHours(), limitDate.getMinutes()])
                disableConfirm()
                return
            }

            setValues(e.detail.value)

            //把picker变动时间存储起来
            setPickerTime();
        }

    }

    function disableConfirm(){
        setIsDisableConfirm(true)
        setTimeout(() => {
            setIsDisableConfirm(false)
        },2000);
    }

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

    function cancel() {
        props.onCancel()
    }

    function confirm() {
        if (isDisableConfirm){
            return;
        }
        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])
        props.onChange(date.getTime())
    }

    function setPickerTime() {

    }

    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
    }));



    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 value={values}
                className="picker"
                maskClass="picker-mask"
                // indicatorClass = 'picker-sel'
                onChange={onPickerChange}
                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' }}>{item}</View>
                        );
                    })}
                </PickerViewColumn>
                <PickerViewColumn>
                    {hours.map(item => {
                        return (
                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{item < 10 ? `0${item}` : item}</View>
                        );
                    })}
                </PickerViewColumn>
                <PickerViewColumn>
                    {minutes.map(item => {
                        return (
                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{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 }}>取消</Text>
            </View>
            <View className='btn_space' />
            <View className='modal_btn' style={{ backgroundColor: color }} onClick={confirm}>
                <Text className='modal_confirm_text' style={{ color: '#000' }}>确定</Text>
            </View>


        </View>
    </View>
})

export default Component;