<template>
<div>
<el-upload
    action="#"
    :limit="limit"
    :file-list="fileList"
    :show-file-list="true" :auto-upload="false"
    list-type="picture-card"
    :accept="accept"
    :on-change="fileChange"
    :class="{ disabled: uploadDisabled }"
    >   
    <!-- 文件格式下载，图片格式预览 -->
    <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
        <span class="el-upload-list__item-actions">
            <span v-if="updataIf(file)" class="el-upload-list__item-delete" @click="handleDownload(file)">
            <i class="el-icon-download" />
            </span>
            <span v-else class="el-upload-list__item-preview" @click="picturePreview(file)">
            <i class="el-icon-zoom-in" />
            </span>
            <span class="el-upload-list__item-delete" @click="fileRemove(file)">
            <i class="el-icon-delete" />
            </span>
        </span>
    </div>

    <i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
 
</div>
</template>
 
<script>
    import { downloadFile } from '@/utils/download'
	export default {
		name: "uploadFile",
		data() {
			return {
                fileList:[],
 
			}
		},
		props: {
			limit: {
				type: [String, Number],
				default: ""
			},
			uploadList: {
				type: Array,
				default: function() {
					return []
				}
			},
			accept: {
				type: String,
				default: ".png, .jpg, .jpeg"
			},
		}, 
        computed: {
            //图片上传超出限制，隐藏上传框
            uploadDisabled() {
                return this.fileList.length >= Number(this.limit)
            },
        },
		methods: {
            fileChange(file, fileList){
                if(file.size > 1024 * 1024 * 10){
                    this.$message.warning('文件大小不能超过10Mb')
                    fileList = fileList.filter(item => {
                        return item.uid != file.uid
                    })
                }
                fileList.forEach(file=>{
                    if(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf'){
                        file.url = require('../../assets/file.png')
                    }
                })
                this.fileList = fileList;
                this.$emit('update:uploadList',this.fileList)
            },
            fileRemove(file) {
                let sum = 0
                this.fileList.forEach((item, index) => {
                    if (item.uid == file.uid) { sum = index }
                })
                this.fileList.splice(sum, 1)
                // this.$emit('uploadList', this.fileList)
                this.$emit('update:uploadList',this.fileList)
            },
            handleDownload(file) {
                downloadFile({ fileName: file.name, fileData: file.raw, fileType: 'application/vnd.ms-excel;charset=utf-8' })
            },
            //上传组件-图片查看
            picturePreview(file) {
                this.$emit('picturePreview', file)
            },
            // 判断文件类型,图片预览，文件下载
            updataIf(e) {
                if (e.fileName) {
                    if (e.fileName.split('.')[1] === 'png' || e.fileName.split('.')[1] === 'jpeg' || e.fileName.split('.')[1] === 'jpg') {
                        return false
                    } else {
                    return true
                    }
                } else {
                    if (e.name.split('.')[1] === 'png' || e.name.split('.')[1] === 'jpeg' || e.name.split('.')[1] === 'jpg') {
                        return false
                    } else {
                        return true
                    }
                }
            },
		},
	}
</script>
 
<style lang="scss" scoped>
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
</style>