<template>
    <div>
        <el-upload action="fakeaction" ref="upload"
            :disabled="disabled"
            :file-list="fileList"
            :on-change="fileChange"
            :before-upload="beforeUpload"
            :http-request="submitUpload"
            :on-success="success"
            :drag="drag"
            :multiple='multiple'
            :limit="limit">
           <div class="my_temp" v-if="drag">
                <slot>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">{{title_name}}</div>
                </slot>
            </div>
            <el-button v-else slot="trigger" size="small" type="primary" :disabled="disabled">{{title_name}}</el-button>
            <div style="display:none" slot="file"></div>
        </el-upload>
        <div class="file_wrap">
            <div class="file_item" v-for="file of fileWrap" :key="file.uid">
                <i class="el-icon-document"></i>
                <span>{{file.name}}</span>
                <i class="el-icon-close" @click="handleRemove(file)"></i>
            </div>
        </div>
    </div>
</template>
<script>
/**
  * date 2021/8/18
  * author @ddy
  * @Description 文件上傳組件
  * @param {Array} propFile      選  文件list [{name:'',uid:'123'}]
  * @param {Array} fileType      選  文件類型 ['']
  * @param {String} url          選  接口調(diào)用地址 
  * @param {String} title_name    按鈕名稱
  * @param {Boolean} multiple    選  是多文件上傳
  * @param {Boolean} drag        選  是否支持拖拽上傳
  * @param {Boolean} disabled    選  禁用上傳
  * @param {Number} limit        選  文件上傳數(shù)量最大限制
  * @param {Number} size         選  文件上傳大小最大限制
  * @param {Function} success    選  上傳成功方法
  * @param {Function} fileChange 選  文件上傳成功或者移除后的方法  可以理解為覆蓋默認(rèn)文件改變的方法
  * @use <upload-file :propFile="[{name:'',uid:'123'}]" url="api/dd" :limit="1" :disabled="fileDisabled" @fileChange="submitUpload" @success="success"/>
  */
import { UploadFile } from "@/utils/require" 
export default {
    name:'UploadFile',
    props:{
        propFile:{
            type: Array,
            default: () => []
        },
        multiple:{
            type: Boolean,
            default: false
        },
        drag:{
            type: Boolean,
            default: false
        },
        limit:{
            type: Number,
            default: 1
        },
        disabled:{
            type: Boolean,
            default: false
        },
        url:{
            type: String,
            default: ''
        },
        title_name:{
            type: String,
            default: '選擇附件'
        },
        fileType:{
            type: Array,
            default:()=>['pdf','doc','docx']
        },
        size:{
           type: Number,
            default: 20
        }
    },
    watch:{
        propFile:{
            handler:function(val,old){
                this.$nextTick(()=>{
                    this.fileWrap=val||[];
                    this.fileList=val||[];
                })
            },
            immediate:true,
            deep:true
        }
    },
    data() {
        return {
            fileWrap:[],
            fileList:[]
        }
    },
    methods:{
        beforeUpload(file){
            let name=file.name.substring(file.name.lastIndexOf('.')+1);
            const isJPG =!this.fileType.length||this.fileType.indexOf(name)>-1;
            const isLt2M = file.size / 1024 / 1024 < this.size;
            if (!isJPG) {
                let str=this.fileType.map(item=> '.'+item).join(" ")
                this.$message.error('上傳文件只能是 '+str+'格式 !')
                this.handleRemove(file)
                return false
            }
            if (!isLt2M) {
                this.$message.error('上傳文件大小不能超過 '+this.size+'MB!')
                this.handleRemove(file)
                return false
            }
        },
        fileChange(file, fileList){//上傳文件時(shí)限制格式
            
        },
        handleRemove(file) {//刪除文件
            //無論是新上傳的還是編輯回顯的文件,file的uid都是他的唯一標(biāo)識id,但是傳入回顯數(shù)據(jù)時(shí)要對數(shù)據(jù)綁定賦值uid字段,要不然這邊f(xié)ile找不到
            this.fileList=this.fileList.filter(item=>item['response']&&item['response']['annex_id']!=file['uid']);
            this.getImg();
        },
        success(response, file, fileList){
            this.fileList=fileList;
            this.getImg();
        },
        submitUpload(file) {//上傳到服務(wù)器
            let params = new FormData()
            params.append('file',file.file)
            UploadFile(params,{url:this.url}).then(res => {
                if(res.errno===0&&!!res.data){
                    this.$message.success('上傳成功')
                    this.$emit('success',res.data);
                    file.onSuccess(res.data[0])
                }else{
                    this.$message.error(res.errmsg)
                }
            }).catch(err => {
                this.$message.error(err.errmsg)
                this.handleRemove(file)
            })
        },
        getImg(){
            let arr = JSON.parse(JSON.stringify(this.fileList))
            arr.map((item,i)=>{
                if(item.response){
                   item.uid = item.response.annex_id
                }
            })
            this.$nextTick(()=>{
                this.fileWrap=arr;
            })
            this.$emit('fileChange',arr);
        }
    }
}
</script>
<style scoped lang='scss'>
/deep/ .el-upload-dragger{
    border: 2px dashed #d9d9d9;
    position: relative;
    .my_temp{
        position: absolute;
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        .el-icon-upload{
            margin-top: 0px;
        }
    }
}
.file_wrap{
    .file_item{
        display: flex;
        align-items: center;
        background: #F4F6FB;
        padding:0 5px;
        margin: 5px 0;
        >span{
            flex: 1;
            color: #636B78;
            margin: 0 10px;
        }
        i{
            color: #C4C4C4;
            font-size: 20px;
            &:nth-of-type(2){
                cursor: pointer;
            }
        }
    }
}
.hide_add{
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
/deep/ .el-upload-list{
    display: none;
}
</style>