<template>
    <el-upload
        class="single-upload"
        :action="url"
        :show-file-list="false"
        :on-success="onSuccess"
        :before-upload="beforeUpload">
        <div></div>
        <div class="wrapper">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div v-if="loading" class="loading"><i class="el-icon-loading"></i></div>
        </div>
        <div slot="tip" class="el-upload__tip">
            <slot></slot>
        </div>
    </el-upload>
</template>
<script>
    import {imageUrlPrefix} from '../config'

    const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://localhost:8080';
    export default {
        created() {
            this.updateImageUrl(this.value);
        },
        props: {
            value: String,
            usePrefix: {
                type: Boolean,
                default: true
            },
            prefix: {
                type: String,
                default: imageUrlPrefix
            },
            url: {
                type: String,
                default: baseUrl + '/assets/uploadFile'
            }
        },
        data() {
            return {
                imageUrl: '',
                loading: false
            };
        },
        methods: {
            onSuccess(res, file) {
                this.loading = false;
                this.imageUrl = URL.createObjectURL(file.raw);
                var newVal = '';
                if (res.data instanceof Array) {
                    newVal = res.data[0];
                } else {
                    newVal = res.data;
                }
                this.$emit('input', newVal);
            },
            onError(err, file, fileList) {
                this.loading = false;
            },
            beforeUpload(file) {
                this.loading = true;
                return true;
            },
            updateImageUrl(url) {
                if (this.usePrefix && url && url.indexOf(this.prefix) === -1 && url.indexOf('http') === -1) {
                    this.imageUrl = this.prefix + url;
                } else {
                    this.imageUrl = url;
                }
            }
        },
        watch: {
            value(val) {
                this.updateImageUrl(val);
            }
        }
    }
</script>
<style lang="less" scoped>
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        background-color: #fbfdff;
        &:hover {
            border-color: #409EFF;
        }
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
            border-color: #409EFF;
        }
    }

    .wrapper {
        position: relative;
    }

    .single-upload .el-upload {
        position: relative;
    }

    .loading {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.6);
        color: #333;
        font-size: 24px;
    }

</style>
