<template>
	<view>
		<l-upload ref="imgUpload" uploadType="img" :serverUrl="this.url_config" :formData="{isImg: 'true'}" :width="110"
			:height="110" :images="_value || []" :header="header" :max-size="$props.formProps.maxSize"
			:disableAdd="$props.readonly" :limit="$props.formProps.maxNumber" @complete="complete" @remove="remove"
			:disable="$props.readonly">
		</l-upload>
		<view v-if="!readonly" style="color: #999999; font-size: 26rpx;">{{ $props.formProps.placeholder || '请上传图片' }}
			{{ sizeTip }}
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			formProps: {
				type: Object,
				default: () => {
					return {}
				}
			},
			modelValue: {
				type: Array,
				default: () => {
					return []
				}
			},
			readonly: Boolean
		},
		model: {
			prop: "modelValue",
			event: "update",
		},
		components: {},
		data() {
			return {
				imageStyles: {
					width: 80,
					height: 80,
					padding: '19rpx'
				},
				originVal: [],
			}
		},
		computed: {
			header() {
				return {
					Authorization: "Bearer " + uni.getStorageSync('wflow-token')
				}
			},
			_value: {
				get() {
					let dealArr = [];
					// console.log(JSON.stringify(this.$props.modelValue),123)
					// console.log(JSON.stringify(this.originVal),456)
					// console.log(JSON.stringify(dealArr),111222)
					if (JSON.stringify(this.$props.modelValue) == JSON.stringify(this.originVal)) {
						return this.originVal
					}
					this.originVal.length = 0;
					if (this.$props.modelValue) {
						this.originVal = this.$props.modelValue;
						console.log(JSON.stringify(this.originVal), 888)
						this.originVal.map(item => {
							if (item.url.indexOf("http://") != -1 || item.url.indexOf("https://") != -1) {
								dealArr.push({
									...item,
									id: item.name,
									url: item.name,
									isImage: true,
									contentType: "image/png"
								})
							} else {
								dealArr.push({
									...item,
									id: item.url,
									url: item.url,
									isImage: true,
									contentType: "image/png"
								})
							}

						})
						return dealArr
					} else {
						return this.$props.modelValue
					}
				},
				set(val) {
					console.log("_value", val);
					this.$emit('update:modelValue', val)
				}
			},
			sizeTip() {
				return this.$props.formProps.maxSize > 0 ? `| 每张图不超过${this.$props.formProps.maxSize}MB` : ''
			}
		},
		created() {
			console.log(this.$props.formProps)
		},
		onLoad() {
			console.log(this.$props.formProps)
		},
		mounted() {
			console.log(this.$props.formProps)
		},
		onShow() {
			console.log(this.$props.formProps)
		},
		methods: {
			resizeCollapse() {
				setTimeout(() => this.$emit('resize'), 800)
			},
			complete(e) {
				console.log(JSON.stringify(e), 666777)
				this._value = e.imageArr
				if ((this._value || []).length < e.imageArr.length) {
					uni.showToast({
						icon: 'none',
						title: '上传图片成功'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '移除图片成功'
					})
				}
				this.resizeCollapse();
			},
			remove(i) {
				if (!this.$props.readonly) {
					this._value.splice(i, 1)
				}
			}
		}
	}
</script>

<style>

</style>