<template>
    <el-upload
        :id="id"
        action="default"
        :on-success="handleSuccess"
        :on-remove="handleRemove"
        :on-error="handleError"
        :before-upload="beforeUpload"
        :file-list="fileList"
        :http-request="httpRequest"
        :limit="option_limit"
        :on-exceed="handleExceed"
        ref="veUpload"
        :accept="option_accept"
        v-bind="$attrs"
        v-on="$listeners"
        class="upload-content"
        :class="hasUploadFile?'upload-success':''"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
    >
        <slot name="trigger" slot="trigger"></slot>
        <slot name="tip" slot="tip"></slot>
        <!--<slot></slot>-->
        <i class="el-icon-plus"></i>
    </el-upload>
</template>

<script>
import imageMixin from "./image-mixin";
import mixin from "./mixin";
import PreviewUtil from "../../../../service/PreviewUtil";

export default {
    name: "single-image",
    mixins: [mixin, imageMixin],
    data() {
        return {}
    },
    created() {
        this.setOptions({
            multiple: false,
            accept: [
                '.gif', '.jpg', '.png', '.bmp'
            ]
        })
    },
    methods: {
        handlePictureCardPreview(file) {
            PreviewUtil.previewImage(file.url);
        }
    }
}
</script>

<style scoped lang="less">
.upload-content {
    display: flex;

    /deep/ .el-upload__tip {
        align-self: flex-end;
        margin-bottom: 0;
        margin-left: 5px;
    }
}

.upload-success {
    /deep/ .el-upload-list__item {
        margin: 0;
        display: block;
    }

    /deep/ .el-upload--picture-card {
        display: none;
    }
}
</style>
