import { Form, Input, message, Modal, ModalProps } from 'antd';
import { FC, useState } from 'react';
import { Uploader } from '~/components/uploader';
import { UploadOutlined } from '@ant-design/icons';
import { UploadFile } from 'antd/es/upload/interface';
import { OrderManageAPI } from '~/api';
import { listPurchaseOrderType } from '~/api/interface/orderManageType';
import { InterListType } from '~/api/interface';

// 采购订单列表返回类型
type procurementOrderType = InterListType<listPurchaseOrderType>[0];
interface selfProps {
  onOk: () => void;
  onCancel: () => void;
  currentOrderItem: procurementOrderType | undefined;
}
const UploadPayment: FC<ModalProps & selfProps> = ({ open, currentOrderItem, onCancel, onOk }) => {
  const [form] = Form.useForm<{ payImgList: string; payRemark: string }>();
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  // 上传成功
  const uploadSuccess = (value: any) => {
    setFileList([...value]);
    form.setFieldValue('payImgList', JSON.stringify(value.map((v: any) => ({ filePath: v.url }))));
  };
  const handleOk = () => {
    if (currentOrderItem) {
      form.validateFields().then((values) => {
        OrderManageAPI.uploadPOrder({ ...values, uavOrderId: currentOrderItem.id }).then(
          ({ code }) => {
            if (code === '200') {
              message.success('上传凭证成功'), form.resetFields();
              setFileList([]);
              onOk();
            }
          },
        );
      });
    }
  };
  const handleCancel = () => {
    form.resetFields();
    setFileList([]);
    onCancel();
  };
  return (
    <Modal open={open} onOk={handleOk} onCancel={handleCancel} title='上传付款凭证'>
      <Form form={form} labelCol={{ span: 2 }} wrapperCol={{ span: 20 }}>
        <Form.Item
          label='凭证'
          rules={[{ required: true, message: '请上传付款凭证' }]}
          name='payImgList'
        >
          <Uploader
            fileUpload
            listType='picture-card'
            onChange={uploadSuccess}
            fileLength={4}
            defaultFileList={fileList}
          >
            <UploadOutlined />
          </Uploader>
        </Form.Item>
        <Form.Item label='备注' name='payRemark'>
          <Input.TextArea placeholder='请输入备注' maxLength={70} rows={4} showCount />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default UploadPayment;
