<template>
    <div class="uploadImg" :style="`width:${width}px;height:${width}px`">
        <el-upload
            :disabled="disable"
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-change="handleAvatarSuccess"
        >
            <img v-if="imageUrl" :src="imageUrl" @click="clickImg" class="avatar" />
            <!--            <el-icon v-else class="avatar-uploader-icon"  :style="`line-height: ${width}px`"><Plus /></el-icon>-->
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

const props = defineProps(['disable', 'width'])
const imageUrl = ref('')

const handleAvatarSuccess = (res, file) => {
    imageUrl.value = URL.createObjectURL(res.raw)
}

const emit = defineEmits(['onClick'])

const clickImg = () => {
    if (!props.disable) {
        emit('onClick', {
            ...this.file,
            baseUrl: this.imageUrl,
        })
    }
}
</script>
<style lang="scss" scoped>
.uploadImg {
    :deep .avatar-uploader {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #dfdfdf;
        overflow: hidden;

        .el-upload--text {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;

            .avatar-uploader-icon {
                width: 100%;
                height: 100%;
            }
        }

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
</style>
