<template>
    <div @click="handleClick" style="display: inline-block;">
        <input ref="input" type="file" accept=".xlsx" @change="handleChange">
        <slot></slot>
    </div>
</template>

<script>
    import request from 'axios';
    import _ from 'lodash';

    export default {
        name: 'upload-xlsx',
        props: {
            action: {
                type: String,
                default() {
                    return '/upload/xlsx';
                }
            },
            onSuccess: {
                type: Function,
                default() {
                    return {};
                }
            },
            onError: {
                type: Function,
                default() {
                    return {};
                }
            },
            onProgress: {
                type: Function,
                default() {
                    return {};
                }
            },
            onChange: {
                type: Function,
                default() {
                    return {};
                }
            },
            data: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                files: null
            };
        },
        methods: {
            handleClick() {
                this.$refs.input.click();
            },
            handleChange(e) {
                this.files = e.target.files;
                this.onChange(this.files);
            },
            upload(data) {
                let files = this.files;

                if (!files) {
                    return Promise.reject();
                }

                let postFiles = Array.prototype.slice.call(files);

                postFiles = postFiles.slice(0, 1);

                if (postFiles.length === 0) {
                    return Promise.reject();
                }

                Object.assign(this.data, data);

                return this.post(postFiles[0], this.data);
            },
            clear() {
                this.files = null;
                this.$refs.input.value = '';
            },
            post(file, params) {
                let _this = this;
                let config = {
                    onUploadProgress(processEvent) {
                        _this.onProgress(processEvent);
                    }
                };
                let data = new FormData();

                data.append('file', file);

                if (!_.isEmpty(params)) {
                    _.each(params, (v, k) => {
                        data.append(k, v);
                    });
                }

                return request.post(this.action, data, config)
                    .then((result) => {
                        _this.onSuccess(result.data);
                    })
                    .catch((err) => {
                        _this.onError(err);
                    });
            }
        }
    };
</script>

<style lang="scss" scoped>
input[type="file"] {
    display: none;
}
</style>