import {Button, Form} from "antd";
import React, {useEffect} from "react";
import {
    ModalForm,
    ProFormDateTimeRangePicker,
    ProFormText,
    ProFormTextArea
} from "@ant-design/pro-components";
import {TaskScheduleRecordForm, TaskScheduleRecordVO} from "@/components/type/TaskSchedule.d";
import {clickRecordAPI} from "@/components/service/ScheduleTask";
import dayjs, {UnitTypeShort} from "dayjs";
import {onceConsumerRead} from "@/utils/codeToReadName";
import {betweenTime} from "@/utils/timeFormatUtil";

interface ClickRecordProps {
    taskId: string;
    taskName: string;
    onceConsume: string | undefined;
}

const ClickRecord: React.FC<ClickRecordProps> = ({taskId, taskName, onceConsume}) => {
    const [form] = Form.useForm<TaskScheduleRecordForm>();
    useEffect(() => {
        let data = {
            'recordTimeRange': [onceConsume ? dayjs().subtract(Number(onceConsume.split(",")[0]), onceConsume.split(",")[1] as UnitTypeShort) : dayjs(), dayjs()],
            'timeDifference': onceConsumerRead(onceConsume),
        };
        form.setFieldsValue(data)
    }, []);
    return (

        <ModalForm<TaskScheduleRecordForm>
            title={`${taskName}打卡`}
            layout="horizontal"
            trigger={
                <Button type="primary">
                    打卡记录
                </Button>}
            form={form}
            autoFocusFirstInput
            modalProps={{
                // destroyOnClose: true,
                onCancel: () => console.log('run'),
            }}
            onFinish={async (values) => {
                values.taskId = taskId
                if (values.recordTimeRange[0]) {
                    values.startDate = new Date(values.recordTimeRange[0])
                }
                if (values.recordTimeRange[1]) {
                    values.recordDate = new Date(values.recordTimeRange[1])
                }
                await clickRecordAPI(values);
                return true
            }}
        >
            <ProFormDateTimeRangePicker name="recordTimeRange" label="记录时间"
                                        fieldProps={{
                                            showTime: {
                                                format: 'HH:mm',
                                            },
                                            format: "YYYY-MM-DD HH:mm",
                                            allowEmpty: [true, false],
                                            onChange: (dates) => {
                                                console.log({dates})
                                                if (dates && dates[0] && dates[1]) {
                                                    form.setFieldValue("timeDifference", betweenTime(dayjs(dates[1]), dayjs(dates[0])))
                                                } else {
                                                    form.setFieldValue("timeDifference", "")
                                                }
                                            }
                                        }}
                                        placeholder={['开始时间', '结束时间']}
                                        allowClear/>

            <ProFormText
                width="xs"
                name="timeDifference"
                label="耗时"
                readonly={true}
            />
            <ProFormTextArea name="remarks" label="备注"/>
        </ModalForm>)
}
export default ClickRecord;