taro/src/_health/base/new_durationpicker.tsx

import { rpxToPx } from "@/utils/tools";
import { PickerView, PickerViewColumn, Text, View } from "@tarojs/components";
import { useEffect, useState } from "react";
import './new_timepicker.scss'
import dayjs from "dayjs";
import { MainColorType } from "@/context/themes/color";
import { TimeFormatter } from "@/utils/time_format";

export enum DurationPickerType {
    moment = 'moment',
    normal = 'normal',
    long = 'long'
}
export default function NewDurationPicker(props: { value?: any, onChange?: any, color?: string, type?: DurationPickerType }) {
    const [items, setItems] = useState<any>([[0]])
    const [values, setValues] = useState<any>([0])
    const [loaded, setLoaded] = useState(false)
    useEffect(() => {
        switch (props.type) {
            case DurationPickerType.normal:
                setItems(itemDatas())
                setValues(itemValues())
                break;
            case DurationPickerType.long:
                setItems(longDatas())
                setValues(longValues())
                break;
            case DurationPickerType.moment:
            default:
                {
                    var hours: any = []
                    var tempValues: any = [props.value / 5]

                    var array: any = []
                    for (var i = 0; i <= 12 * 3; i++) {
                        var count = i * 5;
                        var hour = Math.floor(count / 60);
                        var minute = count % 60;
                        var str = ''
                        if (hour > 0) {
                            str = hour + '小时'
                        }
                        if (minute > 0) {
                            str += minute + '分钟'
                        }
                        if (hour == 0 && minute == 0) {
                            str = '0分钟'
                        }
                        array.push(str)
                    }
                    setItems([array])
                    setValues(tempValues)
                }
                break;
        }

        setLoaded(true)
    }, [])

    function itemDatas() {
        var min: number = 1
        var max: number = 23
        var step: number = 5

        // if (common.duration) {
        min = 0//common.duration.min
        max = 23//common.duration.max
        step = 5//common.duration.step
        // }
        var minutes: string[] = []
        for (let i = 0; i < 60; i += step) {
            minutes.push(i + TimeFormatter.getMinutesUnit(i))
        }
        var hours: string[] = []
        for (let i = min; i <= max; i++) {
            hours.push(i + TimeFormatter.getHoursUnit(i))
        }
        return [hours, minutes]
    }

    function itemValues() {
        const seconds = props.value / 1000
        const hours = Math.floor(seconds / 3600)
        const minutes = Math.floor((seconds % 3600) / 60)

        return [hours, Math.floor(minutes / 5)]
    }

    function longDatas() {
        var min = 1
        var max = 99

        var days: string[] = []

        for (let i = min; i <= max; i++) {
            days.push(i + TimeFormatter.getDaysUnit(i))
        }

        var hours: string[] = []
        for (var i = 0; i < 24; i++) {
            hours.push(i + TimeFormatter.getHoursUnit(i))
        }
        return [days, hours]
    }

    function longValues() {
        if (props.value){
            var day = Math.floor(props.value/24)
            var hour = props.value%24
            return [day-1,hour]
            

        }
        return [0, 0]
    }

    function onPickerChange(e) {
        setValues(e.detail.value)
        if (props.onChange) {
            var list = e.detail.value
            switch (props.type) {
                case DurationPickerType.normal:
                    props.onChange(list[0] * 3600 * 1000 + list[1] * 5 * 60 * 1000)
                    break
                case DurationPickerType.long:
                    props.onChange(list[0]*24+list[1]+24)
                    break
                case DurationPickerType.moment:
                default:
                    props.onChange(list[0] * 5)
                    break
            }

        }
    }

    function getColor(i, j) {
        if (i == 0 && j == values[0]) {
            return true
        }
        if (i == 1 && j == values[1]) {
            return true
        }
        return false
    }
    if (!loaded) return <View />

    const bgStyle = `background-color: ${props.color}1A !important;`
    return <PickerView
        value={values}
        style={{ color: '#000', height: rpxToPx(340), width: rpxToPx(618) }}
        onChange={onPickerChange}
        indicatorClass="pick_sel_item"
        indicatorStyle={bgStyle}//""
        immediateChange={true}
        className="picker"

    >
        {
            items.map((item, index) => {
                return <PickerViewColumn key={index}>
                    {item.map((obj, j) => {
                        return (
                            <Text key={j} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: getColor(index, j) ? props.color ?? MainColorType.fast : '#000' }}>{obj}</Text>
                        );
                    })}
                </PickerViewColumn>
            })
        }

    </PickerView >
}