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

const {size, api, multiple, placeholder} = defineProps({
    size: {
        type: String,
        default: '60px'
    },
    api: {
        type: Function,
        default: Api.system.uploadFile,
    },
    multiple: {
        type: Boolean,
        default: true,
    },
    placeholder: {
        type: String,
        default: '上传'
    }
});
const files = defineModel('files');
const emits = defineEmits(['success']);

const beforeUpload = (file) => {
    api && api(file).then(({data}) => {
        console.log(files.value);
        if (!multiple) {
            files.value = [data];
        } else {
            files.value.push(data);
        }
        emits('success', data);
    });
    return false;
}
</script>

<template>
    <div class="flex flex-wrap gap-[15px]">
        <a-upload v-if="!(!multiple && files.length >= 1)" :style="{width: size,height: size}"
                  @before-upload="beforeUpload" :multiple="multiple">
            <template #upload-button>
                <div class="upload-button test">
                    <IconPlus/>
                    {{ placeholder }}
                </div>
            </template>
        </a-upload>

        <x-image
            @delete="files.splice(index,1)"
            :width="size"
            :height="size"
            :key="index"
            :src="v"
            v-for="(v, index) in files">
        </x-image>
    </div>
</template>

<style scoped lang="scss">
.upload-button {
    width: v-bind(size);
    height: v-bind(size);
    border: 1px dashed rgb(229, 230, 235);
    @apply flex flex-col justify-center items-center bg-[#F2F3F5] hover:bg-[#ddd] duration-300;
}
</style>
