import React, {Component} from "react";
import {Button, Form, message, Upload} from "antd";
import getCookie from "../../utils/getCookie";
import {InboxOutlined, UserOutlined} from "@ant-design/icons";
import {apiUploadFile} from "../../services/API/API";
import {file} from "ant-design-icons";
import './UploadFile.less'

const {Dragger} = Upload;

class UploadFile extends Component {
    state = {
        fileList: []
    }

    constructor(props) {
        super(props);
        if (props.onRef) {
            props.onRef(this)
        }
    }

    clickButton = () => {
        let e = document.createEvent('MouseEvents');
        e.initEvent('click', true, true)
        document.getElementById('upload-file-form-button').dispatchEvent(e)
    }

    handleUploadFile = () => {
        const {fileList} = this.state
        var formData = new FormData();
        fileList.forEach(file => {
            formData.append('file', file);
        })
        formData.append('username', getCookie('username'))
        formData.append('token', getCookie('token'))
        formData.append('father_folder_id', this.props.fatherFolderId)
        // let data = {
        //     username: getCookie('username'),
        //     token: getCookie('token'),
        //     father_folder_id: this.props.fatherFolderId,
        //     fileList: fileList,
        // }
        apiUploadFile(formData).then(res => {
            if (res.data.code === 200) {
                message.success('添加成功');
                this.props.cdFolder(this.props.fatherFolderId)
            } else {
                message.error(res.data.error)
            }
        })
    };

    beforeUpload = file => {
        this.setState({
            fileList: [...this.state.fileList, file]
        })
        return false
    }

    render() {
        return (
            <div className={'UploadFile-div'}>
                <Form onFinish={this.handleUploadFile} initialValues={{remember: true}}>
                    <Form.Item
                        name="upload"
                        rules={[{required: true, message: 'Please upload file!'}]}
                    >
                        <Dragger
                            beforeUpload={this.beforeUpload}
                            name={'upload'}
                            multiple={false}
                            maxCount={1}
                        >
                            <p className="ant-upload-drag-icon">
                                <InboxOutlined/>
                            </p>
                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
                            <p className="ant-upload-hint">
                                Support for a single or bulk upload. Strictly prohibit from uploading company data or
                                other
                                band files
                            </p>
                        </Dragger>
                    </Form.Item>
                    <Form.Item style={{height: "1px"}}>
                        <Button size="large" type="primary" htmlType="submit" id="upload-file-form-button"
                                style={{
                                    width: '100%',
                                    display: 'none',
                                    float: 'bottom',
                                    marginBottom: '100vh'
                                }}>
                            Upload
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

export default UploadFile;