import { FC, useState } from "react";
import { Form, Input, InputNumber, Modal, ModalProps } from "antd";
import style from "@/components/AddIndexModal/index.module.scss";
import { IManageNormItem } from "@/types";
import { saveSelfScoreApi } from "@/api";

export interface SelfReportScoreModalProps extends Omit<ModalProps, "onOk"> {
  item: IManageNormItem | null;
  onCancel?: () => void;
  onOk?: () => void;
}

export const SelfReportScoreModal: FC<SelfReportScoreModalProps> = ({
  open,
  item,
  onOk,
  onCancel,
  ...rest
}) => {
  const [form] = Form.useForm<any>();
  const [loading, setLoading] = useState(false);

  const handleCancel = () => {
    form.resetFields();
    onCancel?.();
  };

  const handleConfirm = () => {
    form.submit();
  };

  const handleSubmit = async (values: any) => {
    try {
      setLoading(true);
      await saveSelfScoreApi(item!.id, values.score);
      form.resetFields();
      onOk?.();
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      className={style.modal}
      title={item?.name}
      okText="提交"
      cancelText="取消"
      open={open}
      width={640}
      okButtonProps={{
        disabled: loading,
      }}
      onOk={handleConfirm}
      onCancel={handleCancel}
      {...rest}
    >
      <Form
        labelCol={{ span: 4, offset: 2 }}
        form={form}
        onFinish={handleSubmit}
      >
        <Form.Item
          label="自评得分"
          name="score"
          required
          rules={[{ required: true, message: "请输入 " }]}
        >
          <InputNumber
            className="w100"
            min={0}
            max={50}
            precision={1}
            placeholder="请输入0~50的数字，支持小数点后一位"
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};
