<template>
    <div class="hello">
        <el-upload
            :http-request="handleUpload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-remove="beforeRemove"
            :limit="limit"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :list-type="listType"
            :accept="accept"
            class="upload-demo"
            action
            multiple
        >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">{{ tip }}</div>
        </el-upload>
    </div>
</template>

<script>
import { put, getFileNameUUID } from "~/api/ali-oss";

export default {
    name: "Upload",
    props: {
        accept: {
            type: String,
            default: ".pdf,.jpg,.jpeg,.zip,.rar,.doc,.docx",
        },
        tip: {
            type: String,
            default: "上传大小不能超过2M",
        },
        limit: {
            type: Number,
            default: 5,
        },
        action: {
            type: String,
            default: "",
        },
        headers: {
            type: Object,
            default: () => {},
        },
        name: {
            type: String,
            default: "",
        },
        listType: {
            type: String,
            default: "text",
        },
        max: {
            type: Number,
            default: 10,
        },
        fileList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {};
    },
    methods: {
        emitInput(fileList) {
            let value = [];
            for (let i = 0; i < fileList.length; i++) {
                let message = {};
                message.name = fileList[i].name;
                message.url = fileList[i].url;
                message.fileName = fileList[i].name;
                message.fileUrl = fileList[i].url;
                value.push(message);
            }
            this.$emit("input", value);
        },
        beforeUpload(file) {
            const max = this.max;
            const isLt2M = file.size / 1024 / 1024 < max;
            if (!isLt2M) {
                this.$message.error(`上传附件大小不能超过 ${max} MB!`);
            }
            return isLt2M;
        },
        handleRemove(file, fileList, index) {
            this.$emit("on-remove", file, fileList);
            this.fileList = fileList;
            this.emitInput(fileList);
        },
        handlePreview(file) {
            this.$emit("on-preview", file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleSuccess(response, file, fileList) {
            console.log("成功");
            this.fileList = fileList;
            this.$emit("on-success", file, fileList);
        },
        /**
         * 自定义上传方法
         */
        handleUpload(option) {
            const max = this.max;
            const isLt2M = option.file.size / 1024 / 1024 < max;
            if (isLt2M) {
                // 生成的文件名称
                let objName = getFileNameUUID();
                // 调用 ali-oss 中的方法
                put(`${objName}${option.file.name}`, option.file).then(
                    (res) => {
                        res.fileName = res.name;
                        res.fileUrl = res.url;
                        this.fileList.push(res);
                        this.emitInput(this.fileList);
                    }
                );
            }
        },
    },
};
</script>
<style scoped></style>
