<template>
    <div class="com-upload-image" @click="onSelect">
        <div>
            <upload ref="uploadFile" media-type="image" @file-change="onFileChange"></upload>
            <div class="btn-push" v-show="!dataURL">
                <i class="iconfont iconedit_add"></i>
            </div>
        </div>
    </div>
</template>
<script>
import Upload from "./Upload";
export default {
    name: "UploadImageMobile",
    components: {
        Upload
    },
    props: {
        src: String
    },
    data() {
        return {
            dataURL: ""
        };
    },
    methods: {
        onSelect() {
            this.$refs.uploadFile.click();
        },
        onClear() {
            this.$refs.uploadFile.clear();
            this.dataURL = "";
            this.isClear = true;
            this.$emit("file-change", null);
        },
        onFileChange(file, base64) {
            this.isClear = false;
            if (this.showBackground) {
                this.dataURL = file.dataURL;
            }
            this.$emit("file-change", file);
        }
    }
};
</script>
<style lang="less" scoped>
.com-upload-image {
    cursor: pointer;
    display: inline-block;
    min-width: 60px;
    min-height: 60px;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 4px;
    > div {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 12px;
        color: @color;
        border: dashed 2px @color;
        border-radius: 0.3rem;
    }

    .iconedit_add {
        font-size: 0.9rem;
    }

    .btn-push {
        text-align: center;
        span {
            display: block;
        }
    }
}
</style>
<style lang="less">
.cropper-container.cropper-bg {
    background: #000 !important;
}
</style>