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

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

  useEffect(() => {
    if (!open) return;
    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 handleOk = () => {
    form.validateFields().then((values) => {
      if (!values.cad_path) values.cad_path = 'test';
      values.parent_id = parentId;
      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 name="cad_path" label="上传：">
          <Button
            loading={upLoading}
            icon={<CloudUploadOutlined />}
            onClick={dwgUpload}
          >
            上传
          </Button>
          {form.getFieldValue('cad_path')}
        </Form.Item>
        <Form.Item name="remark" label="备注：">
          <Input.TextArea />
        </Form.Item>
      </Form>

      <input
        // multiple
        style={{ display: 'none' }}
        id="uploadDwg"
        type="file"
        onChange={uploadDwg}
        accept=".dwg, .dxf"
      />
    </Modal>
  );
};
export default CreateChildrenModal;