<template>
	<view>
		<l-upload ref="imgUpload" uploadType="img" :serverUrl="BASE_URL" :formData="{isImg: 'true'}"
			:width="110" :height="110" :images="_value || []" :header="header" :max-size="props.formProps.maxSize"
			:disableAdd="readonly" :limit="props.formProps.maxNumber" @complete="complete" @remove="remove"
			:disable="readonly">
		</l-upload>
		<view v-if="!readonly" style="color: #999999; font-size: 26rpx;">{{ props.formProps.placeholder || '请上传图片' }}
			{{ sizeTip }}
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		BASE_URL
	} from '@/api/request.js'

	const imageStyles = {
		width: 80,
		height: 80,
		padding: '19rpx'
	}

	const header = ref({
		Authorization: "Bearer " + uni.getStorageSync('wflow-token')
	})

	const props = defineProps({
		formProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: Array,
		readonly: Boolean
	})

	const _value = computed({
		get() {
			return props.modelValue
		},
		set(val) {
			emits('update:modelValue', val)
		}
	})

	const sizeTip = computed(() => {
		return props.formProps.maxSize > 0 ? `| 每张图不超过${props.formProps.maxSize}MB` : ''
	})

	const emits = defineEmits(['update:modelValue','resize'])

	const imgUpload = ref()
	function resizeCollapse(){
		setTimeout(() => emits('resize'), 800)
	}
	function complete(e) {
		_value.value = e.imageArr
		if ((_value.value || []).length < e.imageArr.length) {
			uni.showToast({
				icon: 'none',
				title: '上传图片成功'
			})
		} else {
			uni.showToast({
				icon: 'none',
				title: '移除图片成功'
			})
		}
		resizeCollapse();
	}

	function remove(i) {
		if (!props.readonly) {
			_value.value.splice(i, 1)
		}
	}
</script>

<style>

</style>