<template>
    <el-upload
        class="upload-demo"
        :action="actionUrl"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :multiple="multiple"
        :limit="limit"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :headers="headers"
        :on-success="handleSuccess"
        :data="uploadData"
        :before-upload="beforeUpload"
    >
        <slot name="default">
            <el-button size="small" type="primary">点击上传</el-button>
        </slot>
        <!-- <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div> -->
    </el-upload>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
    name: 'UploadFile',
    props: {
        fileList: {
            type: Array,
            default: () => [],
        },
        actionUrl: {
            type: String,
            default: 'https://jsonplaceholder.typicode.com/posts/',
        },
        limit: {
            type: Number,
            default: 3,
        },
        // uploadTip: {
        //   type: String,
        //   default: '只能上传jpg/png文件，且不超过500kb'
        // },
        multiple: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            uploadImgUrl:
                process.env.VUE_APP_BASE_API + '/dev-api' + this.actionUrl,
            headers: {
                Authorization: 'Bearer ' + getToken(),
            },
            uploadData: {
                fileType: 'ma',
            },
        }
    },
    methods: {
        handleRemove(file, fileList) {
            this.$emit('remove', file, fileList)
        },
        handleSuccess(response, file, fileList) {
            this.$emit('success', response, fileList)
        },
        handlePreview(file) {
            this.$emit('preview', file)
        },
        handleExceed(files, fileList) {
            // this.$message.warning(
            //     `当前已选择 ${this.limit} 个文件，本次选择了 ${
            //         files.length
            //     } 个文件，共选择了 ${files.length + fileList.length} 个文件`,
            // )
            // this.$emit('exceed', files, fileList)

            this.$message.error(`最多只能上传${this.limit}个文件！`)
        },
        beforeRemove(file, fileList) {
            // return this.$confirm(`确定移除 ${file.name} ？`)
            //   .then(() => {
            //     this.$emit('before-remove', file, fileList)
            //   })
            //   .catch(() => {})
        },
        beforeUpload(file) {
            const isJPGorPNG =
                file.type == 'image/png' ||
                file.type == 'image/jpg' ||
                file.type == 'image/jpeg' ||
                file.type == 'application/pdf' ||
                file.type ==
                    'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                file.type == 'application/msword'
            const isLt5M = file.size / 1024 / 1024 < 10 // 小于 5MB
            if (!isJPGorPNG) {
                this.$message.error(
                    '只能上传 jpg、jpeg、png 、.pdf、.doc、.docx 格式的文件！',
                )
            }
            if (!isLt5M) {
                this.$message.error('上传图片大小不能超过 10MB')
            }
            return isJPGorPNG && isLt5M
        },
    },
}
</script>

<style scoped>
.upload-demo .el-upload__tip {
    margin-top: 10px;
}
</style>
