<template>
	<!-- 公共图片上传 微信小程序（压缩版）-->
	<view class="uploadImageYS">
		<button type="fail" @click="goUpImage()" :disabled="fileList.length == limit">上传图片</button>
		<!-- 图片展示 -->
		<view class="flex" v-if="fileList.length > 0">
			<view v-for="(item, index) in fileList" :key="item.index" class="viewImg">
				<img :src="item.url" alt="" class="compressImg" />
				<p class="deleImg" @click="deleteImg(item)">删除</p>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { sysUpload } from '@/utils/homeApi.js';

// baseUrl设置
let baseUrl = '';
/* #ifdef MP-WEIXIN */
// baseUrl = 'http://192.168.20.162:7200'; //谢斌斌
baseUrl = 'https://server1.wh-nf.cn:8131/prod-api'; //公司环境
/* #endif */
/* #ifdef H5 */
baseUrl = '';
/* #endif */

const fileList = ref([]);
const props = defineProps({
	// 图片数组值
	saveFileArr: {
		type: Array,
		default: () => []
	},
	// 图片数量限制
	limit: {
		type: Number,
		default: 3
	},
	// 关联类型和字段
	refField: {
		type: String,
		default: 'picXG'
	},
	refType: {
		type: String,
		default: 'picXG'
	}
});

// 图片上传点击
function goUpImage() {
	uni.chooseImage({
		sourceType: ['camera', 'album'],
		success(res) {
			uni.showLoading({
				title: '正在上传',
				mask: true
			});
			console.log('chooseImage--', res.tempFiles[0]);
			let imgmb = 2 * 1024 * 1024; //2M
			let Quality = 60;
			if (res.tempFiles[0].size > imgmb) {
				Quality = 30;
			}
			uni.compressImage({
				src: res.tempFilePaths[0],
				quality: Quality,
				success(res2) {
					console.log('compressImage---', res2); // 压缩后的
					uni.uploadFile({
						url: baseUrl + '/system/upload',
						filePath: res2.tempFilePath,
						name: 'file',
						success(res3) {
							console.log('uploadFile', res3); // 压缩后的
							let dataRes = JSON.parse(res3.data);
							if (dataRes.code == 200) {
								uni.hideLoading();
								let datas = dataRes.data;
								datas.refField = props.refField; //关联字段
								datas.refType = props.refType; //关联类型
								fileList.value.push(datas);
								props.saveFileArr.push(datas);
							} else {
								uni.showToast({
									icon: 'none',
									title: '上传失败,请重新上传'
								});
							}
						}
					});
				},
				fail() {
					if (res.tempFiles[0].size > imgmb) {
						uni.showToast({
							title: '图片不能大于4MB',
							icon: 'none'
						});
						return;
					}
					console.log(res.tempFilePaths[0]);
				}
			});
		}
	});
}

// 文件删除
function deleteImg(val) {
	console.log(val, fileList.value);
	let fileIndex = null;
	fileList.value.map((item, index) => {
		if (val.name == item.name) {
			fileIndex = index;
		}
	});
	fileList.value.splice(fileIndex, 1);
	props.saveFileArr.splice(fileIndex, 1);
}

// 清空图片
function clearImages() {
	fileList.value = [];
	props.saveFileArr = [];
}
defineExpose({
	clearImages
});
</script>

<style lang="scss">
.uploadImageYS {
	.viewImg {
		width: 30%;
		margin-left: 2%;
		margin-top: 15rpx;
		.compressImg {
			width: 100%;
			height: 150rpx;
			border-radius: 20rpx;
		}
		.deleImg {
			font-size: 24rpx;
			color: red;
			text-align: center;
		}
	}
}
</style>