<template>
    <div class="upload-body flex-center flex-column" :style="{'width':width,'height':height}">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <img src="../assets/upload-img.png" v-else alt="" class="icon" :style="{'width':iconWidth}">
        <span class="text" v-if="!imageUrl">上传图片</span>
        <input type="file" name="" id="" @change="fileChange" ref="file">
    </div>
</template>
<script>
    export default {
        props: {
            imageUrl: String,
            width: {
                type: String,
                default: '58px'
            },
            height: {
                type: String,
                default: '58px'
            },
            iconWidth: {
                type: String,
                default: '24px'
            }
        },
        methods: {
            fileChange(event) {
                // console.log(event, 'event')
                this.$emit('fileChange', event)
                // console.log('执行完emit')
            }
        }
    }
</script>
<style style lang="scss" scoped>
    @import '../style/common.scss';

    .upload-body {
        width: 58px;
        height: 58px;
        border: 1px solid #D8D8D8;
        // overflow: hidden;
        position: relative;
    }

    .avatar {
        width: 100%;
        height: 100%;

    }

    .icon {
        width: 24px;
    }

    .text {
        font-size: 12px !important;
        font-family: PingFang SC;
        font-weight: 400;
        color: #B1B1B1 !important;
        margin-top: 5px;
        text-align: center;
        width: 56px !important;

    }

    input {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
    }
</style>