<script setup>
import Api from "../../api/index.js";

const {size, api} = defineProps({
    size: {
        type: String,
        default: '100%'
    },
    api: {
        type: Function,
        default: Api.system.uploadFile,
    }
});
const emits = defineEmits(['success']);
const files = defineModel('file');

const beforeUpload = (file) => {
    api(file).then(({data}) => {
        files.value = data;
        emits('success', file);
    });
    return false;
}
</script>

<template>
    <div class="x-upload-one">
        <a-upload draggable @before-upload="beforeUpload">
            <template #upload-button v-if="files">
                <div class="x-upload-one-image">
                    <a-image fit="contain" width="100%" height="100%" :preview="false" :src="files"></a-image>
                </div>
            </template>
        </a-upload>
    </div>
</template>

<style scoped lang="scss">
.x-upload-one {
    width: v-bind(size);
    height: v-bind(size);

    :deep(.arco-upload-wrapper) {
        width: v-bind(size);
        height: v-bind(size);

        .x-upload-one-image {
            @apply border;
            width: v-bind(size);
            height: v-bind(size);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .arco-upload {
            width: v-bind(size);
            height: v-bind(size);

            .arco-upload-drag {
                padding: 0;
                width: v-bind(size);
                height: v-bind(size);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .arco-upload-drag-text {
                    padding: 0 5px;
                }

                svg {
                    margin-bottom: 0;
                }
            }
        }
    }
}
</style>
