<template>
	<view class="pic">
		<view class="uploader__preview" v-for="(item,index) in imgUrls" @click.stop="previewImage(imgUrls,index)"
			:key="index">
			<image :src="item" style="width: 160upx;height: 160upx;" alt="" />
			<view class="van-uploader__preview-delete" @click.stop="delImages(item)">
				<i class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
			</view>
		</view>
		<view v-if="imgUrls.length < maxLength" class="imgItem" @click="chooseImg">
			<i class="van-icon van-icon-photograph van-uploader__upload-icon"></i>
		</view>
	</view>
</template>

<script>
	import {
		chooseImg,
		devEnv
	} from '@/common/util.js'
	export default {
		name: "upLoadImg",
		props: {
			maxLength: ''
		},
		data() {
			return {
				imgUrls: []
			};
		},
		methods: {
			previewImage(imgUrls, index) {
				uni.previewImage({
					urls: imgUrls, // 要放大的图片的路径，可以是一个数组，支持多张图片
					current: index, // 当前要显示的图片的路径
					success: (res) => {
						// console.log('预览图片成功');
					},
					fail: (err) => {
						// console.error('预览图片失败', err);
					}
				});
			},
			delImages(v) {
				// console.log('图片返回')
				let i = this.imgUrls.findIndex(item => item == v)
				this.imgUrls.splice(i, 1)
				this.$emit('imgParams', this.imgUrls)
			},
			chooseImg() {
				chooseImg().then(res => {
					console.log('图片返回', res)
					let imgUrl = res
					if (!devEnv) {
						imgUrl = this.replaceImgUrl(imgUrl)
					}
					this.imgUrls.push(imgUrl)
					this.$emit('imgParams', this.imgUrls)
				})
			},
			replaceImgUrl(url) {
				const originalUrl = url.replace('admin-api/system/file/0/get', 'appImageDir');
				const newIpAddress = '127.0.0.1';
				const newPort = uni.getStorageSync("ZHHQ_HLJ_PORT");
				// const newIpAddress = '220.248.250.227';
				// const newPort = '49967';
				const replacedUrl = originalUrl.replace(/\/\/([\d]+\.[\d]+\.[\d]+\.[\d]+):(\d+)/,
					`//${newIpAddress}:${newPort}`);
				return replacedUrl
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pic {
		display: flex;
	}
</style>