<template>
<Upload ref="upload"
    :id="id"
    :action="action" 
    :data="data" 
    :accept="accept" 
    :maxSize="maxSize" 
    :on-success="success" 
    :on-error="error"
    :before-upload="beforeUpload">
    <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
</Upload>
</template>
<script>
import _ from 'lodash';

export default {
    name: 'FileUpload',
    props: {
        action: {
            type: String,
            default: '/Api/upload/image'
        },
        data: {
            type: Object,
            default: () => {
                return {
                    bucket: 'goodsimg'
                };
            }
        },
        accept: {
            type: String,
            default: 'image/png,image/jpeg,image/gif,image/jpg'
        },
        maxSize: {
            type: Number,
            default: 512 * 1024
        },
        id: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {};
    },
    methods: {
        success(response) {
            let files = [];

            if (_.get(response, 'data.imagesList.length', 0)) {
                files = response.data.imagesList;
            }
            this.$emit('on-success', this.id, files);
        },
        error(error) {
            this.$Message.error('上传失败');
            this.$emit('on-error', this.id, error);
        },
        beforeUpload() {
            this.$refs.upload.clearFiles();
            return true;
        }
    }
};
</script>