<template>
	<div>
		<van-nav-bar title="组建新祠堂" left-text="返回" left-arrow @click-left="onClickLeft" />
		<van-form @failed="onFailed" @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="nickname" label="祠堂名称" placeholder="请输入祠堂名称" />
			</van-cell-group>
			<br />
			<van-cell-group inset>
				<!-- 输入任意文本 -->
				<van-field v-model="nickname" label="家族姓氏" placeholder="请输入家族姓氏" />
				<van-field type="textarea"  v-model="nickname" label="详细地址" placeholder="请输入详细地址" ></van-field>
				<van-field v-model="nickname" label="祖先姓名" placeholder="请输入祖先姓名" />
				<van-field type="textarea"  v-model="nickname" label="祠堂简介" placeholder="请输入祠堂简介" ></van-field>
				<br />
				<label style="font-size: 13px;">&nbsp;&nbsp;&nbsp;&nbsp;相片：</label><van-uploader v-model="fileList"
					multiple :max-count="2" :max-size="500 * 1024" @oversize="onOversize" />
				<!-- 输入手机号，调起手机号键盘 -->
				<!-- <van-field v-model="tel" type="tel" label="手机号" /> -->
				<!-- 允许输入正整数，调起纯数字键盘 -->
				<!-- <van-field v-model="digit" type="digit" label="整数" /> -->
				<!-- 允许输入数字，调起带符号的纯数字键盘 -->
				<!-- <van-field v-model="number" type="number" label="数字" /> -->
				<!-- 输入密码 -->
				<!-- <van-field v-model="password" type="password" label="密码" /> -->
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					提交
				</van-button>
			</div>
		</van-form>
	</div>
	<!-- 	<view>
		<page-head title="组建新祠堂"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="nickname" placeholder="请输入祠堂名称" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">家族姓氏：</view>
					<input class="uni-input" name="nickname" placeholder="请输入家族姓氏" />
					<view class="title">家族籍贯：</view>
					<input class="uni-input" name="nickname" placeholder="请输入家族籍贯" />
					<view class="title">详细地址：</view>
					<input class="uni-input" name="nickname" placeholder="请输入详细地址" />
					<view class="title">祖先姓名：</view>
					<input class="uni-input" name="nickname" placeholder="请输入祖先姓名" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">祠堂简介：</view>
					<textarea auto-height placeholder="请输入祠堂简介" />
				</view>
				<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 < 6">
							<uni-icons class="imgList" type="images" size="90" @click="addImage()"></uni-icons>
						</view>
					</view>
				</view>
				<view class="uni-btn-v">
					<button type="primary" form-type="submit" loading="true">保存</button>
				</view>
			</form>
		</view>
	</view> -->
</template>

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

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

	const onClickLeft = () => history.back();
	
	const onOversize = (file) => {
		console.log(file);
		showToast('文件大小不能超过 500kb');
	};

	// 预览图片功能
	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">

</style>