import {
  postOrderErpTicketsUpdate,
  postOrderErpTicketsUpload,
} from '@/services';
import { UploadOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProCard,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, Form, Space, Upload, message } from 'antd';
import type { RcFile, UploadProps } from 'antd/es/upload';
import { useState } from 'react';

const waitTime = (time = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default ({ id, toReload }) => {
  const [form] = Form.useForm<{ result: string }>();
  const [fileList, setFileList] = useState<file[]>([]);

  type file = {
    uid: number;
    name: string;
    url: string;
  };

  const handleUploadChange = async (value) => {
    setFileList(value.fileList);

    if (value.fileList.length && value.fileList[0].status === 'uploading') {
      if (value.fileList[0].originFileObj instanceof File) {
        const formData = new FormData();
        formData.append('file', value.fileList[0].originFileObj as RcFile);

        const res = await postOrderErpTicketsUpload({
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });

        if (res.message === '成功') {
          message.success('上传成功');
          setFileList([
            {
              uid: value.fileList[0].originFileObj.uid,
              name: value.fileList[0].originFileObj.name,
              url: res.data,
            },
          ]);
        }
      }
    }
  };

  const uploadProps: UploadProps = {
    onChange: handleUploadChange,
    fileList: fileList.filter((item) => item.url),
  };

  const shouldShowUploadButton = fileList.length !== 1 || !fileList[0].url;

  return (
    <Space>
      <ModalForm<{ result: string }>
        title="处理工单"
        width={660}
        form={form}
        trigger={<a>处理</a>}
        modalProps={{
          okText: '确定',
          cancelText: '取消',
          destroyOnClose: true,
        }}
        onFinish={async (values) => {
          let ticketRequest = {};
          ticketRequest.id = id;
          ticketRequest.status = 'SOLVED';
          if (values.result) {
            ticketRequest.result = values.result;
          }
          if (fileList.length !== 0) {
            ticketRequest.resultAnnexUrl = fileList[0].url;
            ticketRequest.resultAnnexName = fileList[0].name;
          }
          let res = postOrderErpTicketsUpdate({
            data: {
              ...ticketRequest,
            },
          });
          if (res.message === '成功') {
            message.success('操作成功');
          }
          await waitTime(2000);
          setFileList([]);
          toReload();
          return true;
        }}
      >
        <ProCard bordered>
          <Form.Item label="处理结果">
            <ProFormTextArea name="result" />
          </Form.Item>
          <Form.Item label="附件">
            <Upload {...uploadProps}>
              {shouldShowUploadButton && (
                <Button icon={<UploadOutlined />}>上传附件</Button>
              )}
            </Upload>
          </Form.Item>
        </ProCard>
      </ModalForm>
    </Space>
  );
};