<template>
	<div>
		<van-nav-bar title="上传相片" left-text="返回" left-arrow @click-left="onClickLeft" />
		<van-form @failed="onFailed" @submit="onSubmit">
			<van-cell-group inset>
				<label style="font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;相片：</label><van-uploader v-model="fileList"
					multiple :max-count="1" :max-size="500 * 1024" :preview-size="[400, 200]" @oversize="onOversize" />
				<br />
				<van-field type="textarea"  v-model="nickname" label="照片描述" placeholder="请输入照片描述" ></van-field>
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					提交
				</van-button>
			</div>
		</van-form>
	</div>
	<!-- 	<view class="container">
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-form-item uni-column">
				<view class="title">上传照片</view>
				<view class="goods-box">

					<view class="imgList" v-for="(item, key) in fileList" :key="key">
						<uni-icons class="del" type="clear" size="20" color="red" @click="delImage(key)"></uni-icons>
						<image class="imgList" :src="item" @click="previewImg(fileList,key)"></image>
					</view>
					<view v-if="fileList.length < 1">
						<uni-icons class="imgList" type="images" size="300" @click="addImage()"></uni-icons>
					</view>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">相片描述：</view>
				<textarea auto-height placeholder="请输入相片描述" />
			</view>
		</view>
		<button type="primary" @click="submit('customForm')">提交</button>
	</view> -->
</template>

<script setup>
	import {
		ref
	} from "vue";

	const onClickLeft = () => history.back();

	const fileList = ref([]); // 存储图片的数组，
	const urlStr = ref(""); //  后端返回的图片数据拼接

	// 预览图片功能
	function previewImg(urls, i) {
		// console.log(urls);
		uni.previewImage({
			urls, //所有要预览的图片的地址集合 必须数组形式 
			current: urls[i] //当前图片地址,点击预览哪个预览的哪个传的 i 是索引
		})
	}

	// 新增图片 
	function addImage() {
		const max = 6;
		const count = max - fileList.value.length
		uni.chooseImage({
			count: count, // 上传图片最多6个可以自己调
			success: (res) => {
				fileList.value = [...fileList.value, ...res.tempFilePaths];
			}
		})
	}

	// 删除图片
	function delImage(id) {
		fileList.value.splice(id, 1);
	}


	//  如果需要上传后台 仅供参考
	async function upload() {
		for (let i = 0; i < fileList.length; i++) {
			let item = fileList[i];
			await this.requestMessage(item);
		}
	}

	// 处理图片 如果需要上传后台 仅供参考
	function requestMessage(item) {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: "你们后端接口",
				filePath: item,
				name: 'file',
				success: (res) => {
					let data = JSON.parse(res.data)
					// console.log(data);
					this.urlStr = this.urlStr += data.data.fullurl + ','
					// 后端要求上传图片  https://图片 ， https:// 图片，https: // 图片 
					resolve(); // 返回处理后数据
				}
			})
		})
	}

	function formSubmit() {

	}

	function formReset() {

	}
</script>

<style lang="scss">
	.textbomcenter {
		text-align: center;
		// top: 20rpx;
		left: 0;
		right: 0;
		position: static;
		bottom: 15rpx;
		text-decoration: underline;
		font-weight: 400;
		color: cornflowerblue;
	}

	.goods-box {
		display: flex;
		flex-wrap: wrap;

		// 图片列表
		.imgList {
			position: relative;
			width: '98%';
			// height: 95%;
			margin: 0 50rpx 30rpx 0;
		}

		// 删除图片
		.del {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			right: 0rpx;
			z-index: 999;
		}
	}
</style>