<template>
    <div class="rum-ui-upload">
        <rum-button>
            <rum-icon type="ios-cloud-upload" size="16" class="upload-icon"></rum-icon>
            ᠮᠠᠲ᠋ᠧᠷᠢᠶᠠᠯ ᠢᠶᠠᠨ ᠰᠣᠩᠭᠣᠬᠣ
            <input @change="fileChange" type="file" :multiple="multiple" class="rum-upload-input"/>
        </rum-button>
        <file-list :fileList="fileList" @remove="remove"></file-list>
    </div>
</template>

<script>

import ajax from './ajax'
import fileList from './filelist.vue'

export default {
    data() {
        return {
            fileList: [],
            tempIndex: 1
        }
    },
    props: {
        action: {
            type: String,
            required: true
        },
        name: {
            type: String,
            default: 'file'
        },
        data: {
            type: Object
        },
        headers: {
            type: Object,
            default() {
                return {};
            }
        },
        multiple: {
            type: Boolean,
            default: false
        },
    },
    methods: {
        fileChange(e) {
            let files = e.target.files
            let postFiles = Array.prototype.slice.call(files)

            if (postFiles.length === 0) return;

            postFiles.forEach(file => {
                this.upload(file);
            });
        },
        upload(file) {
            this.handleStart(file)
            ajax({
                headers: this.headers,
                file: file,
                data: this.data,
                filename: this.name,
                action: this.action,
                onProgress: e => {
                    this.handleProgress(e, file);
                },
                onSuccess: res => {
                    this.handleSuccess(res, file);
                },
                onError: (err, response) => {
                    this.handleError(err, response, file);
                }
            });
        },
        handleStart (file) {
            file.uid = Math.ceil(Math.random()*999999)
            const _file = {
                status: 'uploading',
                name: file.name,
                size: file.size,
                percentage: 0,
                uid: file.uid,
                showProgress: true
            };
            this.fileList.push(_file);
        },
        handleSuccess(res, file) {
            const _file = this.getFile(file);
            _file.status = 'finished';
            setTimeout(() => {
                _file.showProgress = false;
            }, 1000);
            this.$emit('on-success',res)
        },
        handleError(err, response, file) {
            const _file = this.getFile(file);
            _file.status = 'fail';
            this.fileList.splice(fileList.indexOf(_file), 1);
            this.$emit('on-error',err)
        },
        getFile(file) {
            return this.fileList.find(item=> {
                return file.uid === item.uid
            })
        },
        handleProgress(e, file) {
            const _file = this.getFile(file);
            _file.percentage = e.percent || 0;
        },
        remove(i) {
            this.fileList.splice(i,1)
        }
    },
    components: {
        fileList
    }
};
</script>

<style lang="less">
.rum-ui-upload {
    height: 100%;
    writing-mode: vertical-lr;
    color: #444;
    .rum-ui-button {
        font-size: 16px;
        padding: 7px 4px;
    } 
    .upload-icon {
        position: relative;
        left: 2px;
    }
    .rum-upload-input {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0; left: 0;
        cursor: pointer;
    }
}
</style>

