import { CloudUploadOutlined } from '@ant-design/icons';
import { Modal, Form, Input, Button, Upload } from 'antd';
import { useEffect, useState } from 'react';
import { getRandomString } from '@/utils/utils';

const CreateChildrenModal = ({
  loading,
  parentId,
  open,
  onOk,
  handleCancel,
}) => {
  const [form] = Form.useForm();
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };
  const [upLoading, setUpLoading] = useState([]);
  const [cadPath, setCadPath] = useState([]);

  useEffect(() => {
    if (!open) return;
    setCadPath([]);
    form.resetFields();
  }, [open]);

  // function dwgUpload() {
  //   let uploadDwg = document.getElementById('uploadDwg');
  //   uploadDwg.click();
  // }

  // function uploadDwg(event) {
  //   const selectedFile = event.target.files[0];
  //   if (selectedFile) {
  //     setUpLoading(true);
  //     ZwCloud2D.ZwDataProcessor.uploadDwg(selectedFile).then((res) => {
  //       if (res.code == 200) {
  //         const oldPath = form.getFieldValue('cad_path');
  //         const cad_path = oldPath
  //           ? oldPath + ',' + res.data.path
  //           : res.data.path;
  //         form.setFieldsValue({ cad_path });
  //       }
  //       setUpLoading(false);
  //     });
  //   }
  // }
  const UploadProps = {
    action: `https://cad.greentech.com.cn/sdk/doc/upload`,
    multiple: true,
    data: { path: getRandomString() },
    headers: {
      'JWT-TOKEN': localStorage.getItem('JWT-TOKEN'),
    },
    onChange({ file, fileList }) {
      if (file.status !== 'uploading') {
        setCadPath([...cadPath, file.response.data.path]);
      }
    },
  };

  const handleOk = () => {
    form.validateFields().then((values) => {
      values.parent_id = parentId;
      if (!values.remark) values.remark = '';
      if (!values.cad_path) values.cad_path = cadPath.join(',');
      console.log(values);
      onOk(values);
    });
  };

  return (
    <Modal
      title="新建版本"
      width={800}
      open={open}
      confirmLoading={loading}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Form {...layout} name="basic" form={form}>
        <Form.Item name="version" label="版本：" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item label="上传：">
          <Upload {...UploadProps}>
            <Button icon={<CloudUploadOutlined />}>Upload</Button>
          </Upload>
        </Form.Item>
        <Form.Item name="remark" label="备注：">
          <Input.TextArea />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default CreateChildrenModal;