assistant-todo/src/components/TaskRemindComponent.tsx

import styles from "@/components/TaskRemind.module.css";
import {CascaderProps, ConfigProvider, message} from 'antd';
import {Cascader} from 'antd';
import React, {Fragment, useState} from "react";
import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";
import {CascaderOption} from "@/lib/definitions";

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

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

const TaskRemindComponent = (props: ITaskRemind) => {
    const [options, setOptions] = useState<CascaderOption[]>(optionLists);
    // : CascaderProps<Option>['onChange']
    const cascaderOnChange = (value: (string | number)[], selectedOptions: CascaderOption[], index: number) => {
        console.log(value, selectedOptions, index);
        if(value){
            props.remindTypeList[index] = value.join(",")
            props.setRemindTypeList([...props.remindTypeList])
        }
    };

    const removeRemindType = (index: number) => {
        props.remindTypeList.splice(index, 1)
        props.setRemindTypeList([...props.remindTypeList])
    }
    const addRemindType = () => {
        if (props.remindTypeList.length>3){
            message.error("提醒次数超额")
        }else{
            props.remindTypeList.push("")
            props.setRemindTypeList([...props.remindTypeList])
        }
    }

    function changeValueToLabel(taskRemind: string) {
        console.log({taskRemind})
        if (!taskRemind) {
            return []
        }
        let taskRemindArray: string[] = taskRemind.split(",");
        if (taskRemindArray.length != 4) {
            return []
        }
        if (taskRemindArray[1] == "before") {
            taskRemindArray[1] = "前"
        } else if (taskRemindArray[1] == "after") {
            taskRemindArray[1] = "后"
        }
        if (taskRemindArray[3] == "m") {
            taskRemindArray[3] = "分钟"
        } else if (taskRemindArray[3] == "h") {
            taskRemindArray[3] = "小时"
        } else if (taskRemindArray[3] == "d") {
            taskRemindArray[3] = "天"
        }
        return taskRemindArray;
    }

    const cascaderLoadData = (selectedOptions: CascaderOption[]) => {
        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"
                label: i,
                value: i,
                isLeaf: false,
            }))
        } else {
            targetOption.children = [
                {
                    label: "分钟",
                    value: "m",
                    isLeaf: true,
                },
                {
                    label: "小时",
                    value: "h",
                    isLeaf: true,
                },
                {
                    label: "天",
                    value: "d",
                    isLeaf: true,
                }
            ]
        }
        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}>{changeValueToLabel(remindType)}</div>
                ))
            )
        ) : props.remindTypeList.length === 0 ? (
            <ConfigProvider
                theme={{
                    components: {
                        Cascader: {
                            /* 这里是你的组件 token */
                            controlWidth: 300
                        },
                    },
                }}
            >
                <Cascader options={options} loadData={cascaderLoadData}
                          onChange={(e, o) => cascaderOnChange(e, o, 0)}
                          clearIcon={false}
                    // 允许只选择父级
                    //   changeOnSelect
                          />
            </ConfigProvider>
        ) : (
            props.remindTypeList.map((remindType, index) => (
                // <div key={index}>{remindType.split(",").join(", ")}</div>
                <Fragment key={remindType}>
                    <ConfigProvider
                        theme={{
                            components: {
                                Cascader: {
                                    /* 这里是你的组件 token */
                                    controlWidth: 300
                                },
                            },
                        }}
                    >
                        <Cascader options={options} key={index} loadData={cascaderLoadData}
                                  onChange={(e, o) => cascaderOnChange(e, o, index)}
                                  defaultValue={changeValueToLabel(remindType)}
                                  clearIcon={false}
                                  // value={remindType.split(",")}
                        />
                    </ConfigProvider>
                    <DeleteOutlined className="icon" onClick={() => removeRemindType(index)}/>
                    {index == props.remindTypeList.length - 1 && props.remindTypeList.length<3 && <PlusOutlined className="icon" onClick={addRemindType}/>}
                </Fragment>
            ))
        )}
    </div>)
}
export default TaskRemindComponent