<template>
	<view class="fixedbody">
		<view>
			<view class="wBox">
				<uni-forms ref="baseForm" :modelValue="baseFormData" label-width="80">
					<uni-forms-item label="照片" required>
						<view class="avatarUrl">
							<button type="balanced" v-if="personId=='0'" open-type="chooseAvatar"
								@chooseavatar="onChooseavatar">
								<image mode="aspectFill" :src="baseFormData.picUrl" class="refreshIcon"></image>
							</button>
							<image mode="aspectFill" v-else :src="baseFormData.picUrl" class="refreshIcon"></image>
						</view>
					</uni-forms-item>
					<uni-forms-item label="姓名" required name="realName">
						<uni-easyinput :disabled="personId!='0'" v-model="baseFormData.realName" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="性别" required name="sex">
						<uni-data-checkbox v-model="baseFormData.sex" :disabled="personId!='0'" :localdata="sexs" />
					</uni-forms-item>
					<uni-forms-item label="证件类型" required name="idcType">
						<uni-data-select v-model="baseFormData.idcType" :disabled="personId!='0'"
							:localdata="idcTypeList">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="证件号码" required name="idcCode">
						<uni-easyinput @blur="giveBirthDay" v-model="baseFormData.idcCode" placeholder="请输入证件号码"
							:disabled="personId!='0'" />
					</uni-forms-item>

					<uni-forms-item label="出生日期" required name="birth">
						<uni-datetime-picker type="date" :disabled="personId!='0'" :clear-icon="false"
							v-model="baseFormData.birth" />
					</uni-forms-item>
					<uni-forms-item label="联系方式" required name="phone">
						<uni-easyinput v-model="baseFormData.phone" :disabled="personId!='0'" placeholder="请输入联系方式" />
					</uni-forms-item>
					<uni-forms-item label="国籍" required name="countryId">
						<uni-data-select v-model="baseFormData.countryId" :disabled="personId!='0'"
							:localdata="countryList"></uni-data-select>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="wBox" v-if="participantsInfoArr&&participantsInfoArr.length>0"
				style="margin: 30rpx auto 200px;">
				<uni-forms ref="supplementForm" :modelValue="participantsInfoArr" label-width="80">
					<uni-forms-item :label="s.name" :required="s.status == 0" v-for="(s,index) in participantsInfoArr"
						:key="index">
					<uni-easyinput type="text" v-model="s.value" v-if="s.type == '0'" />
						<uni-easyinput type="number" v-model="s.value"
							v-if="s.type == '1'" />
						<uni-data-select v-model="s.value" v-if="s.type == '4'"
							:localdata="s.option"></uni-data-select>
						<view @click="changeIndex(index)">
							<!-- 文件 2-->
							<uni-file-picker v-if="s.type == '2'" limit="1" file-mediatype="all" file-extname="doc,docx,pdf,txt"
								v-model="s.value" @select="selectFile"
								@progress="fileProgress" @delete="delSupplementFile(index)"/>
							<text v-if="s.type == '2'" style="font-size: 24rpx;color: #999;">仅支持上传doc,docx,pdf,txt</text>
							<!-- 图片 3-->
							<uni-file-picker v-if="s.type == '3'" v-model="upSupplement3Value"
								return-type="object" limit="1" @select="upSupplement3"
								@delete="delSupplementImg(index)" />
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<view class="fixedBottom" v-if="personId!='0'">
			<button class="btn btn1" @click="goBack" type="default">完成</button></view>
		<view class="fixedBottom" v-else>
			<button class="btn btnKx" type="default" @click="goPrev">上一步</button>
			<button class="btn btn1" @click="goNext" type="default">下一步</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app';
	import * as match from '@/common/match.js';
	import {
		sexs,
		idcTypeList
	} from '@/static/js/data';
	const app = getApp();
	const data = reactive({
		baseFormData: {},
		supplementData: {},
		countryList: [],
		rules: {},
		hasCptPersonInfo: false,
		participantsInfoArr: [],
		personId: '0',
		noPhotoCanSign: null,
		imageStyles: {
			width: '500rpx',
			height: '300rpx',
			border: {
				radius: '2px'
			}
		},
		currIndex: null,
		upSupplement3Value: {}
	});
	const {
		baseFormData,
		supplementData,
		countryList,
		rules,
		hasCptPersonInfo,
		personId,
		participantsInfoArr,
		noPhotoCanSign,
		imageStyles,
		currIndex,upSupplement3Value
	} = toRefs(data);
	let matchId = '';
	let extraId = '';
	const currUser = uni.getStorageSync('currUser');
	onLoad(option => {
		getCountryList();
		console.log(option.participantsInfo)
		if (option.matchId) {
			matchId = option.matchId;
			if (option.personId) {
				uni.setNavigationBarTitle({
					title: '完善信息'
				});
				extraId = option.extraId
				// 获取运动员信息
				personId.value = option.personId
				getThisMan(personId.value)
			} else {
				getData(matchId)
			}
		} else {
			getData(0)
		}
		noPhotoCanSign.value = app.globalData.noPhotoCanSign
		// 获取赛事字段模板
		if (option.participantsInfo != '') {
			participantsInfoArr.value = JSON.parse(option.participantsInfo);
			for (const p of participantsInfoArr.value) {
				p.value = null
				if (p.type == "4") {
					for (const s of p.option) {
						s.value = s.name
						s.text = s.name
					}
				}
			}
			console.log(participantsInfoArr.value)
		}
	});

	function giveBirthDay() {
		// 判断身份证正确性/赋值生日
		if (baseFormData.value.idcType == 0) {
			if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(baseFormData.value.idcCode))) {
				uni.showToast({
					title: '请输入正确的身份证号码',
					duration: 2000,
					icon: 'none'
				})
			} else {
				let tmpStr = "";
				if (baseFormData.value.idcCode.length == 15) {
					tmpStr = baseFormData.value.idcCode.substring(6, 12);
					tmpStr = "19" + tmpStr;
					tmpStr = tmpStr.substring(0, 4) + "-" + tmpStr.substring(4, 6) + "-" + tmpStr.substring(6)

				} else {
					tmpStr = baseFormData.value.idcCode.substring(6, 14);
					tmpStr = tmpStr.substring(0, 4) + "-" + tmpStr.substring(4, 6) + "-" + tmpStr.substring(6)

				}

				baseFormData.value.birth = tmpStr
				console.log(baseFormData.value.birth)
			}
		}
	}

	function changeIndex(index) {
		currIndex.value = index
		console.log(currIndex.value)
	}

	function getThisMan(id) {
		match.getPersonInfoById(id).then(res => {
			baseFormData.value = res.data;
			if (!baseFormData.value.phone) {
				baseFormData.value.phone = currUser.realTelno
			}
			if (baseFormData.value.idcFrontImg) {
				baseFormData.value.idcFrontImgObj = {
					name: "正面",
					extname: "jpg",
					url: baseFormData.value.idcFrontImg
				}
			}
			if (baseFormData.value.idcBackImg) {
				baseFormData.value.idcBackImgObj = {
					name: "反面",
					extname: "jpg",
					url: baseFormData.value.idcBackImg
				}
			}
		});
		if(extraId==0){return}
		match.getSupplementInfo(extraId).then(res => {
			if (res.data.personInfo) {
				baseFormData.value.personInfo = res.data.personInfo || {}
				hasCptPersonInfo.value = true;
				if(baseFormData.value.personInfo){
					participantsInfoArr.value = JSON.parse(baseFormData.value.personInfo)
					for (var n  of participantsInfoArr.value) {
						if (n.type == '4') {
							for (const s of n.option) {
								s.value = s.name
								s.text = s.name
							}
						}
						if(n.type == '3'&&n.value){
								upSupplement3Value.value = {
									url: n.value,
									name: '图片',
									extname: 'png'
								}
						}	
					}
				}
			}
		});
	}

	function getData(id) {
		if (id != 0) {
			match.getMyPersonInfoWithcptId(id).then(res => {
				baseFormData.value = res.data;
				if (!baseFormData.value.phone) {
					baseFormData.value.phone = currUser.realTelno
				}
				if (baseFormData.value.cptPersonInfo?.personInfo&&JSON.parse(baseFormData.value.cptPersonInfo.personInfo).length>0) {
					hasCptPersonInfo.value = true;
					// 补充字段信息
					participantsInfoArr.value = JSON.parse(baseFormData.value.cptPersonInfo.personInfo);
					for (var n  of participantsInfoArr.value) {
						if (n.type == '4') {
							for (const s of n.option) {
								s.value = s.name
								s.text = s.name
							}
						}
						if(n.type == '3'&&n.value){
								upSupplement3Value.value = {
									url: n.value,
									name: '图片',
									extname: 'png'
								}
						}	
					}
				}
				if (baseFormData.value.idcFrontImg) {
					baseFormData.value.idcFrontImgObj = {
						name: "正面",
						extname: "jpg",
						url: baseFormData.value.idcFrontImg,
					}
				}
				if (baseFormData.value.idcBackImg) {
					baseFormData.value.idcBackImgObj = {
						name: "反面",
						extname: "jpg",
						url: baseFormData.value.idcBackImg,
					}
				}
			});
		} else {
			match.getMyPersonInfo().then(res => {
				baseFormData.value = res.data;
				if (!baseFormData.value.phone) {
					baseFormData.value.phone = currUser.realTelno
				}
				if (baseFormData.value.idcFrontImg) {
					baseFormData.value.idcFrontImgObj = {
						name: "正面",
						extname: "jpg",
						url: baseFormData.value.idcFrontImg,
					}
				}
				if (baseFormData.value.idcBackImg) {
					baseFormData.value.idcBackImgObj = {
						name: "反面",
						extname: "jpg",
						url: baseFormData.value.idcBackImg,
					}
				}
			});
		}

	}

	function getCountryList() {
		match.countryList().then(res => {
			countryList.value = res.data
			for (const c of countryList.value) {
				c.value = c.id
				c.text = c.name
			}
		})
	}

	function upIdCardImgFront(e) {
		match.uploadImg(e).then(data => {
			baseFormData.value.idcFrontImg = data.data;
		});
	}

	function upIdCardImgBack(e) {
		match.uploadImg(e).then(data => {
			baseFormData.value.idcBackImg = data.data;
		});
	}
	let selectFileValue = {}

	function selectFile(e) {
		let file = e.tempFiles[0]
		match.uploadFile2(e).then(data => {
			selectFileValue = {
				url: data.data.fileUrl,
				name: file.name,
				extname: file.extname
			}
			participantsInfoArr.value[currIndex.value].value = selectFileValue
		});
	}
	function fileProgress(e) {
		console.log('progress:'+ e)
	}

	function upSupplement3(e) {
		console.log(e)
		let file = e.tempFiles[0]
		match.uploadImg(e).then(data => {
			upSupplement3Value.value = {
				url: data.data,
				name: file.name,
				extname: file.extname
			};
			participantsInfoArr.value[currIndex.value].value = data.data
		});
	}

	function delSupplementImg(index) {
		upSupplement3Value.value = {}
	}

	function delSupplementFile(index) {
		upSupplement3Value.value = {}
	}
	function goPrev() {
		uni.navigateBack()
	}
	function goNext() {
		console.log(participantsInfoArr.value, baseFormData.value)
		// 验证基本信息必填
		if (baseFormData.value.picUrl == '') {
			uni.showToast({
				title: '请上传头像',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		if (baseFormData.value.realName == '') {
			uni.showToast({
				title: '请填写姓名',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		if (baseFormData.value.countryId == '') {
			uni.showToast({
				title: '请选择国籍',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		if (baseFormData.value.idcType == '') {
			uni.showToast({
				title: '请选择证件类型',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		if (baseFormData.value.idcCode == '') {
			uni.showToast({
				title: '请填写证件号码',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		// 验证身份证号
		if (baseFormData.value.idcType == 0 && !(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(baseFormData.value.idcCode))) {
			uni.showToast({
				title: '请输入正确的身份证号码',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		if (baseFormData.value.sex == '') {
			uni.showToast({
				title: '请选择性别',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		if (baseFormData.value.birth == '') {
			uni.showToast({
				title: '请选择出生日期',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		if (baseFormData.value.phone == '') {
			uni.showToast({
				title: '请输入联系方式',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		var pattern = /^1[3456789]\d{9}$/;
		if (!pattern.test(baseFormData.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		//验证真实照片
		if (baseFormData.value.idcFrontImg == null && noPhotoCanSign.value == '0') {
			uni.showToast({
				title: '请上传真实照片',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		if (baseFormData.value.idcBackImg == null && noPhotoCanSign.value == '0') {
			uni.showToast({
				title: '请上传真实照片',
				duration: 2000,
				icon: 'none'
			})
			return
		}
		// 验证补充信息必填
		for (let n in participantsInfoArr.value) {
			if (participantsInfoArr.value[n].status == 0 && !participantsInfoArr.value[n].value) {
				uni.showToast({
					title: '请完善必填字段',
					duration: 2000,
					icon: 'none'
				})
				return
			}
		}
		let obj = {}
		if (baseFormData.value.cptPersonInfo == null) {
			obj = {
				cptId: matchId,
				personId: baseFormData.value.id,
				personInfo: JSON.stringify(participantsInfoArr.value),
			}
		} else {
			obj = {
				cptId: matchId,
				id: baseFormData.value.cptPersonInfo.id,
				personId: baseFormData.value.id,
				personInfo: JSON.stringify(participantsInfoArr.value),
			}
		}
		// 给个人运动员身份
		baseFormData.value.label = '0'
		match.saveMyBaseInfo(baseFormData.value).then(res => {
			obj.personId = res.data
			match.saveSupplementInfo(obj).then(res2 => {
				if (app.globalData.coachOrLeaderFlag == '0') {
					// 不选教练 去选项目
					let path = `/pages_match/match/choose_project?matchId=${matchId}`;
					uni.navigateTo({
						url: path
					});
				} else {
					let path = `/pages_match/match/choose_coach?matchId=${matchId}&signType=0`;
					uni.navigateTo({
						url: path
					});
				}
			})
		})

		// Promise.all([
		// 	match.saveMyBaseInfo(baseFormData.value),
		// 	match.saveSupplementInfo(obj)
		// ]).then(() => {

		// })
	}

	function goBack() {
		// 验证补充信息必填
		console.log(participantsInfoArr.value)
		for (let n in participantsInfoArr.value) {
			if (participantsInfoArr.value[n].status == 0 && (!participantsInfoArr.value[n].value)) {
				uni.showToast({
					title: '请完善必填字段',
					duration: 2000,
					icon: 'none'
				})
				return
			}
		}

		let obj = {}

		if (extraId != '0') { //修改
			obj = {
				cptId: matchId,
				personId: baseFormData.value.id,
				id: extraId,
				personInfo: JSON.stringify(participantsInfoArr.value),
			}
		} else { //没填过
			obj = {
				cptId: matchId,
				personId: baseFormData.value.id,
				personInfo: JSON.stringify(participantsInfoArr.value),
			}
		}
		match.saveSupplementInfo(obj).then(res => {
			uni.navigateBack()
		})
	}

	function onChooseavatar(e) {
		match.uploadFile(e).then(data => {
			baseFormData.value.picUrl = data.data;
		});
	}
</script>

<style scope lang="scss">
	.wBox {
		background: #ffffff;
		width: 700rpx;
		margin: 30rpx auto 0;
		border-radius: 15px;
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
	}

	.avatarUrl {
		width: 200rpx;
		height: 200rpx;
	}

	.avatarUrl button {
		padding: 0;
		display: block;
		line-height: 1;
	}

	.refreshIcon {
		width: 200rpx;
		height: 200rpx;
	}

	.ttt {
		color: #2B3133;
		font-size: 30rpx;
		margin: 0 0 10rpx;

		text {
			font-size: 24rpx;
			color: #DC0032;
			margin-left: 10rpx;
		}
	}

	.idImgUrl {
		width: 500rpx;
		height: 300rpx;
		margin: 20rpx auto 40rpx;

		button {
			padding: 0;
			display: block;
			line-height: 1;
		}

		.idImg {
			width: 500rpx;
			height: 300rpx;
		}
	}
</style>