<template>
    <div class="upload-file">
        <el-upload
            :action="action"
            :before-upload="handleBeforeUpload"
            :file-list="fileList"
            :drag="drag"
            :limit="count"
            :multiple="count > 1 ? true : false"
            :on-remove="handleDelete"
            :accept="accept"
            :on-error="handleUploadError"
            :on-exceed="handleExceed"
            :on-success="handleUploadSuccess"
            :on-change="handChange"
            :show-file-list="true"
            :auto-upload="false"
            class="upload-file-uploader"
            ref="upload"
            list-type="picture-card"
        >
            <i class="el-icon-plus"></i>
            <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" style="margin-top: 0">只能上传.jpg,.jpeg,.png文件</div> -->
        </el-upload>
    </div>
</template>

<script>
export default {
    name: 'upload-file',
    components: {},
    props: {
        // 值
        value: [String, Object, Array],
        // 大小限制(MB)
        fileSize: {
            type: Number,
            default: 2,
        },
        count: {
            type: Number,
            default: 4,
        },
        // 文件类型, 例如['png', 'jpg', 'jpeg']
        fileType: {
            type: Array,
            default: () => [
                '.jpg',
                '.jpeg',
                '.png',
                // ".doc",
                // '.xls',
                // '.xlsx',
                // ".ppt",
                // ".txt",
                // ".pdf",
                // '.csv',
            ],
        },
        // 是否显示提示
        isShowTip: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            drag: true,
            // 已选择文件列表
            fileList: [],
            // 是否显示文件上传弹窗
            visible: false,
            // 可上传的文件类型
            accept: '',
            action: 'action',
        }
    },
    filters: {},
    computed: {},
    mounted() {},
    watch: {},
    created() {
        // 拼接
        this.fileType.forEach((el) => {
            this.accept += el
            this.accept += ','
        })
        this.fileType.slice(0, this.fileList.length - 2)
    },
    methods: {
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
            // 校检文件类型
            if (this.fileType) {
                let fileExtension = ''
                if (file.name.lastIndexOf('.') > -1) {
                    fileExtension = file.name.slice(file.name.lastIndexOf('.'))
                }
                const isTypeOk = this.fileType.some((type) => {
                    if (file.type.indexOf(type) > -1) return true
                    if (fileExtension && fileExtension.indexOf(type) > -1) return true
                    return false
                })
                if (!isTypeOk) {
                    this.$message.error(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
                    return false
                }
            }
            // 校检文件大小
            if (this.fileSize) {
                const isLt = file.size / 1024 / 1024 < this.fileSize
                if (!isLt) {
                    this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
                    return false
                }
            }
            return true
        },
        // 文件个数超出
        handleExceed() {
            this.$message.error(`只允许上传${this.count}个文件`)
        },
        // 上传失败
        handleUploadError(err) {
            this.$message.error('上传失败, 请重试')
        },
        // 上传成功回调
        handleUploadSuccess(res, file) {
            this.$message.success('上传成功')
            this.cancel()
        },
        /** 文件状态改变时调用 */
        handChange(file, fileList) {
            this.fileList = fileList
            console.log(this.fileList)
        },
        // 删除文件
        handleDelete(file, list) {
            var index = this.fileList.findIndex((v) => v.uid === file.uid)
            if (index > -1) {
                this.fileList.splice(index, 1)
            }
        },
        // 获取文件名称
        getFileName(name) {
            if (name.lastIndexOf('/') > -1) {
                return name.slice(name.lastIndexOf('/') + 1).toLowerCase()
            } else {
                return ''
            }
        },
        /** 手动提交上传 */
        submitUpload() {
            if (this.fileList.length <= 0) {
                this.msgError('请选择文件上传')
                return false
            }
            const formData = new FormData()
            // 把多个文件放到同一个请求里，这样只会请求一次接口。否则一个文件就会请求一次
            this.fileList.forEach((el) => {
                formData.append('file', el.raw)
            })
        },
        /** 关闭上传弹框 */
        cancel() {
            this.fileList = []
            this.visible = false
        },
    },
}
</script>
