<script setup lang="ts">
import ADDICON from "../static/icons/add.png";
import {uploadFile} from "../utils/uils";
import XImage from "./XImage.vue";

const {size} = defineProps({
    size: {
        type: String,
        default: "160rpx"
    }
});
const emits = defineEmits(['success']);
const files = defineModel('files');

const upload = async () => {
    uploadFile({
        count: 1,
    }).then(({data}) => {
        files.value.push(data);
        emits('success', data);
    })
}
</script>

<template>
    <view class="!flex gap-[12rpx] flex-wrap">
        <view class="x-upload" @click="upload">
            <image class="!size-[28rpx]" :src="ADDICON"></image>
            <view>上传图片</view>
        </view>

        <x-image
            :style="{
            width: size,
            height: size,
        }"
            class="border border-[rgb(229,230,235)]"
            v-for="v in files"
            :src="v"
            :list="[v]"
            :key="v">
        </x-image>
    </view>
</template>

<style scoped lang="scss">
.x-upload {
    border: 1px dashed rgb(229, 230, 235);
    background-color: #F2F3F5;
    width: v-bind(size);
    height: v-bind(size);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22rpx;
    font-size: 24rpx;
    border-radius: 4px;
}
</style>
