<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">
                <up-icon :name="uploadIcon" size="24" color="rgba(0, 0, 0, 0.4)"></up-icon>
            </view>
        </slot>
    </up-upload>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { cloneDeep } from 'lodash'
import { upload } from 'mocp/utils/http'

const es = defineEmits(['update:modelValue', 'change', 'getFileList'])
const ps = defineProps({
    fileList: {
        type: Array,
        default: () => []
    },
    width: {
        type: [String, Number],
        default: '155'
    },
    height: {
        type: [String, Number],
        default: '155'
    },
    url: {
        type: String,
        default: '/resource/uploadFile'
    },
    uploadIcon: {
        type: String,
        default: 'camera-fill'
    },
    mapFieldName: {
        type: String,
        default: ''
    },
    mapFieldSplit: {
        type: String,
        default: ','
    }
})
const getUploadButtonSize = computed(() => {
    return {
        width: ps.width + 'rpx',
        height: ps.height + 'rpx'
    }
})

const fileList = ref(cloneDeep(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 upload({ url: ps.url, filePath: lists[i].url, name: 'file' })
            if (res.code == 200) {
                fileList.value.splice(fileListLen, 1, {
                    ...res.data,
                    status: 'success',
                    message: ''
                })
            } else {
                fileList.value.splice(fileListLen, 1)
                uni.$mocpMessage.error(res.message || '请求错误')
            }
        } catch (error) {
            fileList.value.splice(fileListLen, 1)
            uni.$mocpMessage.error('上传失败')
        }
        fileListLen++
    }
}

watch(
    fileList,
    (value) => {
        let files = cloneDeep(value)
            .filter((item) => {
                return item.status != 'uploading'
            })
            .filter((item) => {
                return delete item.status
            })
            .filter((item) => {
                return delete item.message
            })
        if (ps.mapFieldName) {
            files = files.map((v) => v[ps.mapFieldName]).join(ps.mapFieldSplit)
        }
        es('update:modelValue', files)
        es('change', files)
        es('getFileList', cloneDeep(value))
    },
    { deep: true, immediate: true }
)
</script>
<style lang="scss" scoped>
.upload-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f3f3;
}
</style>
