import React from 'react';
import Upload, { UploadProps } from 'antd/lib/Upload';
import Button from 'antd/lib/Button';
import { WrapperFileUpload, WrapperFileItem } from './style';
import MSG from '../../../utils/msgsub'
import '../../../font/iconfont.css'
import { Icon } from '../../../../../components/icons';
import { createObject } from '../../../../../utils/helper';
import { findField } from '../../../../../utils/utils';

interface FileUploadProps {
  onRef?: (prop: any) => void;
  loading: boolean;
  url: any;
  setLoading: (loading: boolean) => void;
  env: any;
  reloadTarget: (target: string, data: any) => void;
  reload: string;
  data?: any;
}

interface FileUploadState {
  visible: boolean;
  showfilelist: any;
  params: string;
  turtyfilelist: any;
}

export class FileUpload extends React.PureComponent<FileUploadProps, FileUploadState> {

  state = {
    visible: false,
    showfilelist: [] as any,
    params: '',
    turtyfilelist: [] as any,
  };

  btn = React.createRef<HTMLDivElement>()

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
    // this._reloadBtn = document.getElementsByClassName('import-reload-btn')[0];
  }

  uploadClick = () => {
    this.btn?.current?.click()
  }

  openDownloadDialog = (url: any, saveName?: string) => {
    const baseUrl = this.props.env?.axiosInstance?.defaults?.baseURL || this.props.env?.ajaxApi || '';
    return new Promise((resolve, reject) => {
      resolve('')
    }).then(res => {
      if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
      } else if (typeof url == 'object') {
        if (typeof url.data == 'object') {
          let str = '';
          Object.entries(url.data).forEach(([k, v]) => {
            const target = findField(this.props.data, k);
            target != undefined && (str += `&${k}=${target}`);
          })
          url = baseUrl + url.url + str
        }
      }
      var aLink = document.createElement('a');
      aLink.href = url;
      aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
      var event;
      if (window.MouseEvent) event = new MouseEvent('click');
      else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      }
      aLink.dispatchEvent(event);
    })
  }

  handleRemove = (file: any) => {

    const { params, showfilelist, turtyfilelist } = this.state;
    const { loading, env } = this.props;
    if (loading) {
      MSG._error('正在上传中，无法执行删除操作', env?.getModalContainer);
      return false
    }
    // if (multiple) {
    const index = showfilelist.indexOf(file);
    const isexist = turtyfilelist.findIndex((item: any) => {
      return item.name === file.name && item.uid === file.uid && item.url === file.url
    })
    const newturtyfilelist = turtyfilelist.slice();
    const newFileList = showfilelist.slice();
    let newparams = params.slice();
    if (index !== -1 && isexist !== -1) {
      let example = params.split(',');
      newturtyfilelist.splice(isexist, 1);
      example.splice(isexist, 1);
      newparams = example.join(',');
    }
    newFileList.splice(index, 1);
    this.setState({
      showfilelist: newFileList,
      params: newparams,
      turtyfilelist: newturtyfilelist
    });
    return true
  }

  downFile(file: any) {
    const { env } = this.props;
    const baseUrl = env?.axiosInstance?.defaults?.baseURL || env?.ajaxApi;
    try {
      if (file?.downLoadUrl) {
        this.openDownloadDialog(baseUrl + file?.downLoadUrl, file?.name)
      } else {
        throw new Error('文件下载地址不存在，请检查')
      }
    } catch (err) {
      MSG._error(err, this.props.env?.getModalContainer)
    }
  }

  uuid = () => {
    const temp_url = URL.createObjectURL(new Blob());
    const uuid = temp_url.toString();
    URL.revokeObjectURL(temp_url);
    return uuid.substr(uuid.lastIndexOf("/") + 1);
  }

  handleUpload = (config: any) => {
    const { showfilelist, turtyfilelist } = this.state;
    const { url, env, data } = this.props;
    let fileSize = config?.file?.size;
    let name = config?.file?.name;
    if (fileSize > 20 * 1024 * 1024) {
      MSG._error('文件大小不能超过20M', env?.getModalContainer);
      return;
    }
    //file是文件字段，并没有记录到数据域上，所以字段名写死
    const newData = createObject(data, { file: config.file });
    this.props.setLoading(true);
    try {
      env.fetcher(url, newData).then((res: any) => {
        if (res.status === 0) {
          this.props.setLoading(false)
          this.setState({
            showfilelist: [
              ...showfilelist,
              {
                uid: this.uuid(),
                status: 'done',
                name: name,
                [res?.data?.downLoadUrl ? 'downLoadUrl' : '']: res?.data?.downLoadUrl ?? '',
                failNum: res?.data?.failNum,
                successNum: res?.data?.successNum,
                totalNum: res?.data?.totalNum,

              }
            ]
          });
          this.props?.reloadTarget(this.props?.reload, {})

          MSG._success('上传成功', env?.getModalContainer);
        } else if (res.status === 301) {
          this.props.setLoading(false)
          this.setState({
            showfilelist: [
              ...showfilelist,
              {
                uid: this.uuid(),
                status: 'error',
                name: name,
              }
            ]
          });
          MSG._error(res.msg, env?.getModalContainer);
        } else {
          this.props.setLoading(false);
          this.setState({
            showfilelist: [
              ...showfilelist,
              {
                uid: this.uuid(),
                status: 'error',
                name: name,
              }
            ]
          });
          MSG._error('系统异常：' + res.msg, env?.getModalContainer);
        }
        // this._reloadBtn && this._reloadBtn?.click();
      }).catch((_err: any) => {
        this.props.setLoading(false);
        MSG._info('本次操作时间较长，请稍后再来查看结果', env?.getModalContainer);
        return;
      })
    } catch (_err) {
      this.props.setLoading(false);
      MSG._error('系统异常：' + _err, env?.getModalContainer);
      return;
    }

  }

  render() {
    const { url } = this.props;
    const { showfilelist } = this.state;
    const { env } = this.props;
    const baseUrl = env?.axiosInstance?.defaults?.baseURL || env?.ajaxApi;
    const uploadButton = (
      <div style={{
        display: 'none',
        textAlign: 'center',
        cursor: 'pointer',
        outline: 'none',
        marginTop: '12px',
        fontSize: '12px',
        color: '#444'
      }}>
        <Button
          ref={this.btn}
          size='middle'
          style={{
            width: '56px',
            height: '32px',
            background: '#fff',
            border: '1px solid #3168f0',
            borderRadius: '4px',
            color: '#3168f0',
            fontWeight: 500,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            fontSize: '14px !important',
            padding: '9px 15px'
          }}
          disabled={
            // 判断是否多选
            this.props.loading ? true : false
          }
        >
          {this.props.loading ? <span className="fa fa-circle-o-notch fa-spin"></span> : '上传'}
        </Button>
      </div>
    );

    const uploadProps: UploadProps = {
      action: (baseUrl ? baseUrl : '') + url?.url,
      listType: "text",
      disabled: false,
      iconRender: () => <span className="fa fa-file-text-o"></span>,
      showUploadList: {
        showPreviewIcon: true,
        showRemoveIcon: true,
        removeIcon: <span className="fa fa-close"></span>
      },
      onRemove: this.handleRemove,
      onPreview: (file: any) => false,
      customRequest: this.handleUpload,
      itemRender: (originNode: any, file: any, fileList: object[], actions: { download: any, preview: any, remove: any }) => {
        return <WrapperFileItem className="lion-upload-itemrender--container" {...file}>
          {originNode}
          {file?.status === 'done' ? <div className="lion-upload-itemrender--notiy">
            {file?.totalNum === file?.successNum ?
              <Icon icon="status-success" className="icon" /> :
              file?.totalNum === file?.failNum ?
                <Icon icon="status-fail" className="icon" /> :
                <Icon icon="status-warning" className="icon" />
            }
            总行数{file?.totalNum}行,成功{file?.successNum}行,失败{file?.failNum}行{file?.downLoadUrl ? <>,<span onClick={() => { this.downFile(file) }} style={{ textDecoration: "underline", color: "#4569d4", display: 'inline' }}>点击此处</span>可下载相关文件</> : null}</div> : null}
          {actions?.remove}
        </WrapperFileItem>
      },
      fileList: showfilelist
    };

    return (
      <WrapperFileUpload>
        <Upload style={{ width: '70px', fontSize: '12px' }} {...uploadProps}>
          {uploadButton}
        </Upload>
      </WrapperFileUpload>
    );
  }
}