<template>
	<up-upload :fileList="images" @afterRead="afterRead" @delete="deletePic" :multiple="multiple" :width="width"
		:height="height" :maxCount="maxCount"></up-upload>
</template>

<script setup>
	import {
		$uploadFile
	} from '@/http/yskApi/file.js'
	import {
		ref,
		watch
	} from 'vue';

	const props = defineProps({
		modelValue: {
			type: Array,
			default: () => []
		},
		width: {
			type: [String, Number],
			default: 60
		},
		height: {
			type: [String, Number],
			default: 60
		},
		maxCount: {
			type: [Number],
			default: 10
		},
		multiple: {
			type: Boolean,
			default: true
		}
	})


	const emits = defineEmits(['update:modelValue'])
	const images = ref(props.modelValue)
	
	
	
	function uploadfile(par){
		let file=null;
		// #ifdef H5
		file= par.file
		// #endif
		// #ifndef H5
		file= par
		// #endif
		return $uploadFile(file)
	}
	
	function afterRead(e) {
		console.log(e);
		if (Array.isArray(e.file)) {
			for (let i in e.file) {
				const file = e.file[i]
				console.log(file);
				uploadfile(file).then(res => {
					console.log(res);
					images.value.push({
						url: e.file[i].url,
						serveUrl: res.data[0]
					})
				}).catch(res => {
					console.log(res);
					if (res.errMsg) {
						images.value.splice(i, 1)
						uni.showToast({
							title: '图片大小超出限制',
							icon: 'error'
						})
					}

				})
			}
		}else{
			const i=0
			uploadfile(e.file).then(res => {
				console.log(res);
				images.value.push({
					url: e.file.url,
					serveUrl: res.data[0]
				})
			}).catch(res => {
				console.log(res);
				if (res.errMsg) {
					images.value.splice(i, 1)
					uni.showToast({
						title: '图片大小超出限制',
						icon: 'error'
					})
				}
			
			})
		}

	}

	function deletePic(e) {
		const {
			index
		} = e
		images.value.splice(index, 1)
	}

	watch(() => images.value, (newval) => {
		emits('update:modelValue', newval)
	})
	watch(() => props.modelValue, (newval) => {
		images.value = newval
	})
</script>

<style>
</style>