/**
 * 2019年9月27日
 * 钟是志
 * 文件上传组件
 * 通过设置一个隐藏的input的框 和一个覆盖在上面的P标签实现文件上传功能
 * */
import React, {Fragment} from 'react';
import { Button, Toast} from 'antd-mobile';
import { uploadFile } from './api';

export default class UploadFile extends React.Component {
  constructor(props){
    super(props);
  }

  imgFileChange = (e) => {
    const file = this.fileInput.files[this.fileInput.files.length - 1];
    if(!file) {
      return false;
    }
    Toast.loading('文件上传中', 0);
    uploadFile({file}).then((res) => {
      Toast.hide();
      if(res && res.url){
        Toast.success('上传成功!');
        console.log(res);
        this.props.returnFile(
          {
            name: file.name,
            uid: res.id,
            status: 'done',
            previewType: res.previewType,
            url: res.url,
          },
        )
      }
    });
  };

  render() {
    return (
      <div  style={{
        fontSize: '18px',
        paddingTop: '10px',
        paddingBottom: '10px',
        position: 'relative'
      }} >
        <p
          style={{
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            textAlign: 'center',
            lineHeight: '46px',
            margin: 'auto',
          }}>
          上传
        </p>
        <input type="file"
               accept={'image/*'}
               id={'infoUpload'}
               style={{ opacity: 0 }}
               onChange={this.imgFileChange}
               ref={input => {
                 this.fileInput = input;
               }}
        />
      </div>
    )
  }

}
