<template>
    <sar-upload v-model="fileList" :root-class="rootClass" :after-read="afterRead" :multiple="multiple"
        :max-count="99"
        :root-style="`--sar-upload-select-bg:#f7f7f7;${customUpload ? '--sar-upload-select-width: max-content;--sar-upload-select-height: max-content;--sar-upload-select-color: transparent;--sar-upload-select-bg: transparent;--sar-upload-select-border-radius:  0;' : ''} ${hiddenPreview ? '--sar-upload-preview-width:  0;--sar-upload-preview-height:  0;' : ''}`">
        <template #select>
            <view class="flex flex-col items-center" v-if="!customUpload">
                <view class="w-[60rpx] h-[60rpx]">
                    <image src="https://lwzk.ycymedu.com/img/cpgx/cp_shangchuan.png" mode="scaleToFill" />
                </view>
                <view class="text-[30rpx] text-[#333] mt-[10rpx]">上传图片</view>
            </view>
            <view v-else>
                <slot :fileList="fileList"></slot>
            </view>
        </template>
    </sar-upload>
</template>

<script setup lang="ts">
import type { UploadFileItem } from 'sard-uniapp'
import { getEnvBaseUrl } from '@/utils';

const props = defineProps({
    outerFileList: {
        type: Array,
        default: () => []
    },
    customUpload: {
        type: Boolean,
        default: false
    },
    hiddenPreview: {
        type: Boolean,
        default: false
    },
    multiple: {
        type: Boolean,
        default: false
    },
    rootClass: {
        type: String,
        default: ''
    }
})

const emits = defineEmits(["change"])

const fileList = ref<UploadFileItem[]>([])
watch(() => props.outerFileList, (newV, oldV) => {
    fileList.value = newV
}, { deep: true, immediate: true })

const uploadFileFn = (fileItem, index) => {
    uni.uploadFile({
        url: `${getEnvBaseUrl()}/api/sysFile/uploadFile`,
        filePath: fileItem.file.path,
        name: "file",
        success: (uploadFileRes) => {
            const resp = JSON.parse(uploadFileRes.data)
            if (resp.code === 200) {

                fileList.value[index].status = "done"
                fileList.value[index].message = '上传完成'
                fileList.value[index].url = resp.result.url
                emits("change", fileList.value)
            }

        }
    })
}

const afterRead = (fileItem: UploadFileItem) => {
    fileItem.status = 'uploading'
    fileItem.message = '正在上传'
    fileList.value = [...fileList.value]


    if (Array.isArray(fileItem)) {
        fileItem.forEach((item, index) => {
            uploadFileFn(item, index)
        })
    } else {
        const index = fileList.value.findIndex(item => item.name === fileItem.name)
        uploadFileFn(fileItem, index)
    }

}

</script>
