** ----------------------  **/
/**  author : Louie Butch   **/
/**     2019/7/9 9:43     **/
/** email:844089357@qq.com  **/
/** ______________________  **/

<template>

    <el-upload
        ref="uploadFile"
        :data="params"
        :action="uploadUrl"
        :on-success="onSuccess"
        :on-error="handleError"
        :on-progress="onProgress"
        :before-upload="beforeUpload"
        :on-change="handleChange"
        :on-exceed="handleExceed"
        :auto-upload="autoUpload"
        :multiple="multiple"
        :withCredentials="true"
        :show-file-list="false"
        :file-list="fileList"
        :limit="limit"
        :before-remove="beforeRemove"
        :disabled="isDisabled"
        :drag="drag"
        :accept="accept"
        style="width: 100%"
    >

        <template slot="trigger">
            <slot></slot>
        </template>

        <transition name="el-fade-in">
            <file-list-card :fileList="fileList"
                            :cardTitle="cardTitle"
                            :isUploading="isUploading"
                            :successCount="successCount"
                            v-if="showFileList && fileList.length > 0"
                            @cancelUpload="abort"
                            @clearFiles="clearFiles">
            </file-list-card>
        </transition>
    </el-upload>
</template>
<script>
    import FileListCard from "./fileListCard";
    export default {
        name: "hd-upload",
        components:{
            FileListCard
        },
        props:{
            uploadUrl:{
                type:String,
                required: true
            },
            handleSuccess:{
                type:Function,
                default:() =>{}
            },
            handleProgress:{
                type:Function,
                default:() =>{}
            },
            handleExceed:{
                type:Function,
                default:() => {}
            },
            handleError:{
                type:Function,
                default:() =>{}
            },
            handleChange:{
                type:Function,
                default:() =>{}
            },
            beforeUpload:{
                type:Function,
                default:() =>{}
            },
            multiple:{
                type:Boolean,
                default:true
            },
            autoUpload:{
                type:Boolean,
                default: true
            },
            limit:{
                type:Number
            },
            beforeRemove:{
                type:Function,
                default:() => {}
            },
            drag:{
                type:Boolean,
                default:false
            },
            isDisabled:{
                type:Boolean,
                default:false
            },
            params:{
                type:Object,
                default: null
            },
            accept:{
                type:String,
                default:""
            },
            showFileList:{
                type:Boolean,
                default:true
            },
            completeAutoClear:{
                type:Boolean,
                default:false
            }
        },
        data() {
            return {
                cardTitle:"正在上传",
                fileList:[],
                successCount:0,
                errorCount:0,
                isUploading: false
            }
        },
        // 大附件上传方案
        // 上传前 如果文件过大（限制10M） 则取消上传（保留数据） 然后 再处理手动上传 （分片上传）（在列表项手动上传）
        methods: {
            clearFiles() {
                this.$refs.uploadFile.clearFiles();
                this.fileList = [];
            },
            abort(file) {
                this.$refs.uploadFile.abort(file);
                this.fileList.splice(this.fileList.findIndex(item => item.uid === file.uid),1);
            },
            onProgress(event, file, fileList) {
                this.cardTitle = "正在上传";
                this.fileList = fileList;
                this.isUploading = true;
                this.handleProgress(event, file, fileList);
            },

            onSuccess(response,file,fileList){
                let successFileList = fileList.filter(item => item.response && item.response.code === 0 && (item.response.result || item.response.data));

                this.successCount = successFileList.length;
                if (this.successCount === fileList.length){
                    this.cardTitle = "上传完成";
                    this.isUploading = false;
                    //是否需要完成后自动清除
                    if (this.completeAutoClear){
                        this.clearFiles();
                    }
                }
                let allComplete = !this.isUploading;

                this.handleSuccess(response,file,fileList,allComplete);
            }
        }
    }
</script>