<template>
    <div style="display: flex;">
        <img v-if="previewUrl?.length>0" :src="previewUrl" class="box"/>
        <div class="box" style="cursor:pointer;" @click="selectFIle">
            <span @click="test">+</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import useCurrentInstance from '/@/utils/useCurrentInstance'
import {onBeforeUnmount, onMounted, ref} from "vue";

const {proxy} = useCurrentInstance()

const emit = defineEmits(['update:fileUrl'])

let props = defineProps({
    data: {
        type: String,
        default: ''
    }
})

let previewUrl = ref('')

onMounted(() => {
    proxy.eventBus.on('onUploadFileSuccess', () => {
        console.log('我收到上传回调')
    })
    if (props.data != '') {
        previewUrl.value = props.data
    }
})


onBeforeUnmount(() => [
    proxy.eventBus.off('onUploadFileSuccess')
])

function selectFIle(){
    proxy.eventBus.emit('onUploadFile','传送门')
}


</script>

<style scoped>
.box {
    height: 90px;
    width: 90px;
    border: #bfc0c2 1px dashed;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 23px 10px 0;
}
</style>
