assistant-todo/src/components/TaskRemindComponent.tsx

import styles from "@/components/TaskRemind.module.css";
import {CascaderProps, ConfigProvider} from 'antd';
import {Cascader} from 'antd';
import React, {useState} from "react";

interface ITaskRemind {
    remindTypeList: string[],
    setRemindTypeList: (taskTypeList: string[]) => void,
    readonly: boolean,
}

interface Option {
    value?: string | number | null;
    label: React.ReactNode;
    children?: Option[];
    isLeaf?: boolean;
}

const optionLists: Option[] = [
    {
        label: "期望开始",
        value: "expect_start",
        isLeaf: false,
    },
    {
        label: "期望结束",
        value: "expect_end",
        isLeaf: false,
    },
];

const TaskRemindComponent = (props: ITaskRemind) => {
    const [options, setOptions] = useState<Option[]>(optionLists);
    const cascaderOnChange: CascaderProps<Option>['onChange'] = (value: (string | number)[], selectedOptions: Option[]) => {
        console.log(value, selectedOptions);
    };
    const cascaderLoadData = (selectedOptions: Option[]) => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        if (targetOption.value === "expect_start" || targetOption.value === "expect_end") {
            targetOption.children = [
                {
                    label: `前`,
                    value: 'before',
                    isLeaf: false,
                },
                {
                    label: `后`,
                    value: 'after',
                    isLeaf: false,
                },
            ];
        } else if (targetOption.value === "before" || targetOption.value === "after") {
            targetOption.children = Array.from({length: 60}, (_, i) => ({
                label: i.toString().padStart(2, '0'), // 显示为 "00", "01", ..., "59"
                value: i,
                isLeaf: false,
            }))
        } else {
            targetOption.children = [
                {
                    label: "分钟",
                    value: "m",
                    isLeaf: true,
                },
                {
                    label: "小时",
                    value: "h",
                    isLeaf: false,
                },
                {
                    label: "天",
                    value: "d",
                    isLeaf: false,
                }
            ]
        }
        setOptions([...options]);
    }

    return (<div className={styles.localDiv}>
        <div style={{marginBottom: "8px"}}>提醒</div>
        {/*{props.readonly ?*/}
        {/*    (props.remindTypeList.length == 0 ? <div>-</div> : props.remindTypeList.map(remindType => {*/}
        {/*        <div>remindType.split(",")</div>*/}
        {/*    })) :*/}
        {/*    (props.remindTypeList.length == 0 ?        <Space wrap>*/}
        {/*        <Select*/}
        {/*            style={{width: 120}}*/}
        {/*            allowClear*/}
        {/*            // defaultValue={onceConsumeChange[0]}*/}
        {/*            onChange={(value) => {*/}
        {/*            }}*/}
        {/*            options={[{*/}
        {/*                label: "期望开始",*/}
        {/*                value: "expect_start",*/}
        {/*            }, {*/}
        {/*                label: "期望结束",*/}
        {/*                value: "expect_end",*/}
        {/*            }*/}
        {/*            ]}*/}
        {/*        />*/}
        {/*        <Select*/}
        {/*            style={{width: 120}}*/}
        {/*            allowClear*/}
        {/*            // defaultValue={onceConsumeChange[0]}*/}
        {/*            onChange={(value) => {*/}
        {/*            }}*/}
        {/*            options={[{*/}
        {/*                label: "前",*/}
        {/*                value: "before",*/}
        {/*            }, {*/}
        {/*                label: "后",*/}
        {/*                value: "after",*/}
        {/*            }*/}
        {/*            ]}*/}
        {/*        />*/}
        {/*        <Select*/}
        {/*            style={{width: 120}}*/}
        {/*            allowClear*/}
        {/*            onChange={(value) => {*/}
        {/*            }}*/}
        {/*            options={onceConsumeList}*/}
        {/*        />*/}
        {/*        <Select*/}
        {/*            style={{width: 120}}*/}
        {/*            allowClear*/}
        {/*            // defaultValue={onceConsumeChange[1]}*/}
        {/*            onChange={(value) => {*/}

        {/*            }}*/}
        {/*            options={[{label: "分钟", value: "m"}, {label: "小时", value: "h"}, {*/}
        {/*                label: "天",*/}
        {/*                value: "d"*/}
        {/*            }]}*/}
        {/*        />*/}
        {/*    </Space>:props.remindTypeList.map(remindType => {*/}
        {/*        <div>remindType.split(",")</div>*/}
        {/*    }))}*/}


        {props.readonly ? (
            props.remindTypeList.length === 0 ? (
                <div>-</div>
            ) : (
                props.remindTypeList.map((remindType, index) => (
                    <div key={index}>{remindType.split(",").join(", ")}</div>
                ))
            )
        ) : props.remindTypeList.length === 0 ? (
            <ConfigProvider
                theme={{
                    components: {
                        Cascader: {
                            /* 这里是你的组件 token */
                            controlWidth:300
                        },
                    },
                }}
            >
                <Cascader options={options} loadData={cascaderLoadData} onChange={cascaderOnChange} changeOnSelect defaultValue={["expect_start","after","1","h"]} />
            </ConfigProvider>
        ) : (
            props.remindTypeList.map((remindType, index) => (
                <div key={index}>{remindType.split(",").join(", ")}</div>
            ))
        )}
    </div>)
}
export default TaskRemindComponent