<template>
    <view class="wh-full">
        <u-upload
                :fileList="data.fileList"
                @afterRead="afterRead"
                @delete="deletePic"
                v-bind="attrs"
                :deletable="!attrs.disabled"
        />
    </view>
</template>

<script setup lang="ts">
//https://uiadmin.net/uview-plus/components/upload.html'

import {hideLoading, showLoading} from "@/utils/uniapp";
import {attachmentUpload} from "@/api/system/upload";
import {imagUrl} from "@/utils";

const attrs: any = useAttrs()
const data: any = reactive({
    fileList: []
})
let urlList: string[] = []
let isUpdate = false

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

function deletePic(event: any) {
    if (!attrs.disabled) {
        isUpdate = true
        data.fileList.splice(event.index, 1)
        urlList.splice(event.index, 1)
        emit('update:modelValue', urlList.join(','))
    }
}

const props = defineProps(['modelValue'])

watchEffect(() => {
    if (props.modelValue) {
        if (!isUpdate) {
            let urlListModel = props.modelValue.split(',')
            for (let key in urlListModel) {
                if (urlListModel[key] && urlListModel[key] != 'undefined') {
                    data.fileList.push({
                        url: imagUrl(urlListModel[key]),
                    })
                    urlList.push(urlListModel[key])
                }
            }
        }
    }
})

async function afterRead(event: any) {
    isUpdate = true
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    let lists: any = [].concat(event.file)
    let fileListLen = data.fileList.length
    lists.map((item: any) => {
        data.fileList.push({
            ...item,
            status: 'uploading',
            message: '上传中'
        })
    })

    for (let i = 0; i < lists.length; i++) {
        showLoading({title: '上传中'})
        const {result} = await attachmentUpload(lists[i].url)
        hideLoading()
        let item = data.fileList[fileListLen]
        data.fileList.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: imagUrl(result[0].filePath)
        }))
        urlList.push(result[0].filePath)
        fileListLen++
    }
    emit('update:modelValue', urlList.join(','))
}
</script>