import InitForm from '../InitForm';
import { Drawer, Upload,message} from 'antd';
import React, { useState, memo } from 'react';
import DetailPro from '../DetailPro';
import { InboxOutlined } from "@ant-design/icons"



function DrawerPro(props) {
  let token = localStorage.getItem('TOKENSTRING');
  let newProps = { ...props };
  delete newProps.children;

  const detailprops = {
    title: props.title,
    detailpath: props.detailpath,
    fields: props.fields,
    detailData: props.detailData,
    params: props.params,
  };
  const fields = newProps?.fields?.filter?.((it, i) => {
    return it?.valueType != 'option';
  });


  const propes = {
    name: 'files',
    multiple: true,
    action: REACT_APP_URL + props?.importurl,
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info?.file?.response?.data?.length??0}条数据已导入成功！`);
        props?.refresh();
      } else if (status === 'error') {
        message.error(`${info.file.name}导入失败`);
      }
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  return (
    <Drawer
      placement="right"
      closable={true}
      rootStyle={{ position: 'absolute', transform: 'translateX(0)', maxWidth: '100%',height:"100%" }}
      width={'60%'}
      destroyOnClose={true}
      {...props}
    >
      {props.val == 'only' && props.children}
      {props.val == 'only' ? null : props.val == 'detail' ? (
        <DetailPro {...detailprops} />
      ) : props.val == 'import' ? (
        <Upload.Dragger
          {...propes}
          headers={{
            Authorization: token,
          }}>

          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">拖拽文件到此处上传excel数据</p>
          <p className="ant-upload-hint">
            仅支持上传Excel文件，否则无法解析数据
          </p>

        </Upload.Dragger>
      ) : (
        <InitForm {...newProps} fields={fields} />
      )}
    </Drawer>
  );
}


export default DrawerPro;