<template>
    <div class="hello">
        <el-upload
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-remove="beforeRemove"
            :show-file-list="false"
            :accept="accept"
            :before-upload="beforeUpload"
            class="upload-demo"
            action="Fake Action"
            :http-request="handleUpload"
            multiple
        >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
                {{ tip }}
            </div>
        </el-upload>
        <ul>
            <li class="flex-item link" v-for="(item, index) in fileList" :key="index">
                <el-popover placement="top-start" title="文件名称" width="500" trigger="hover" :content="item.name">
                    <div class="upload" slot="reference">
                        <a :href="item.url" target="_blank">{{ item.name }}</a>
                    </div>
                </el-popover>
                <div @click="handleDelete(index, item)">删除</div>
            </li>
        </ul>
    </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,.JPEG'
        },
        tip: {
            type: String,
            default: '上传大小不能超过80M'
        },
        limit: {
            type: Number,
            default: 3
        },
        action: {
            type: String,
            default: ''
        },
        headers: {
            type: Object,
            default: () => {}
        },
        fileList: {
            type: Array,
            default: () => []
        },
        name: {
            type: String,
            default: ''
        },
        listType: {
            type: String,
            default: 'text'
        },
        max: {
            type: Number,
            default: 99
        }
    },
    data() {
        return {
            loading: false
        };
    },
    created() {
        console.log(this.fileList);
    },
    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;
                message.uid = fileList[i].uid;
                value.push(message);
            }
            console.log(value);
            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;
            }
            if (this.fileList.length == this.limit) {
                this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
                return;
            }
            // 生成的文件名称
            let objName = getFileNameUUID();
            // 调用 ali-oss 中的方法
            put(`${objName}${file.name}`, file).then((res) => {
                console.log(res);
                this.fileList.push(res);
                this.emitInput(this.fileList);
            });
        },
        handleRemove(file, fileList, index) {
            this.$emit('on-remove', file, fileList);
            this.fileList = fileList;
            this.emitInput(fileList);
        },
        // handlePreview(file) {
        //     this.$emit('on-preview', file);
        // },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleSuccess(response, file, fileList) {
            console.log('成功');
        },
        /**
         * 自定义上传方法
         */
        handleDelete(index, item) {
            this.$confirm(`确定要删除${item.name}么？`, '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.fileList.splice(index, 1);
                    this.$emit('input', this.fileList);
                })
                .catch(() => {});
        },

        handleUpload(option) {
            console.log(option.file);
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.upload {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 30px;
    width: 100px;
}
</style>


