<template>
    <!-- 全局图片下载 -->
    <up-upload
        :width="width + 'rpx'"
        :height="height + 'rpx'"
        :fileList="getFileList"
        @afterRead="afterRead"
        @delete="deletePic"
        multiple
        :maxCount="10"
        :previewFullImage="true"
    >
        <slot>
            <view class="upload-button" :style="getUploadButtonSize">
                <uni-icons :type="uploadIcon" :size="24" color="rgba(0, 0, 0, 0.4)"></uni-icons>
            </view>
        </slot>
    </up-upload>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { cloneDeep } from 'lodash'

const es = defineEmits(['handleUpload'])
const ps = defineProps({
    fileList: {
        type: Array,
        default: () => []
    },
    width: {
        type: [String, Number],
        default: '155'
    },
    height: {
        type: [String, Number],
        default: '155'
    },
    url: {
        type: String,
        default: ''
    },
    uploadIcon: {
        type: String,
        default: 'plusempty'
    }
})
const getUploadButtonSize = computed(() => {
    return {
        width: ps.width + 'rpx',
        height: ps.height + 'rpx'
    }
})

const fileList = ref(ps.fileList)
const getFileList = computed(() => {
    return fileList.value.map((item) => {
        return { ...item, url: item.fileUrl }
    })
})
// 删除图片
const deletePic = (event) => {
    fileList.value.splice(event.index, 1)
}
// 新增图片
const afterRead = async (event) => {
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file)
    let fileListLen = fileList.value.length
    lists.map((item) => {
        fileList.value.push({
            ...item,
            status: 'uploading',
            message: '上传中'
        })
    })
    for (let i = 0; i < lists.length; i++) {
        try {
            const res = await uploadFilePromise(lists[i].url)
            if (res.code == 200) {
                fileList.value.splice(fileListLen, 1, {
                    ...res.data,
                    status: 'success',
                    message: ''
                })
            } else {
                fileList.value.splice(fileListLen, 1)
                uni.$message.showToast(res.message || '请求错误')
            }
        } catch (error) {
            fileList.value.splice(fileListLen, 1)
            uni.$message.showToast('上传失败')
        }
        fileListLen++
    }
}

watch(
    fileList,
    (value) => {
        es(
            'handleUpload',
            cloneDeep(value)
                .filter((item) => {
                    return item.status != 'uploading'
                })
                .filter((item) => {
                    return delete item.status
                })
                .filter((item) => {
                    return delete item.message
                })
        )
    },
    { deep: true }
)
const uploadFilePromise = (url) => {
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            url: ps.url,
            name: 'file',
            filePath: url,
            success: (res) => {
                resolve(JSON.parse(res.data))
            },
            fail: (res) => {
                console.error(JSON.parse(res.data))
                reject(false)
            }
        })
    })
}
</script>
<style lang="scss" scoped>
.upload-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f3f3;
}
</style>
