<template>
	<view class="fixedbody">
		<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" label-width="80">
			<uni-group mode="card" title="个人信息" top="20">
				<view class="wBox">
						<uni-forms-item label="照片" required name="picUrl">
							<view class="avatarUrl">
								<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
									<image mode="aspectFill" :src="baseFormData.picUrl" class="refreshIcon"></image>
								</button>
							</view>
						</uni-forms-item>
						<uni-forms-item label="姓名" required  name="realName">
							<uni-easyinput  v-model="baseFormData.realName" placeholder="请输入姓名" />
						</uni-forms-item>
							
						<!--<uni-forms-item label="身份标签" required>
							<uni-data-checkbox v-model="baseFormData.label" multiple :localdata="tagList" />
						</uni-forms-item>-->
 						<uni-forms-item label="证件类型" required  name="idcType">
 							    <uni-data-select
 							      v-model="baseFormData.idcType"
 							      :localdata="idcTypeList"
 							      @change="changeidcType"
 							    ></uni-data-select>
 						</uni-forms-item>
 						<uni-forms-item label="证件号码" required  name="idcCode">
 							<uni-easyinput v-model="baseFormData.idcCode" @blur="giveBirthDay" />
 						</uni-forms-item>
						<uni-forms-item label="性别" required name="sex">
							<uni-data-checkbox v-model="baseFormData.sex"  @change="changeSex" :localdata="sexs" />
						</uni-forms-item>
						<uni-forms-item label="出生日期" required name="birth">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="baseFormData.birth" @maskClick="maskClick" />
						</uni-forms-item>
						<uni-forms-item label="联系方式" name="phone">
							<uni-easyinput v-model="baseFormData.phone" placeholder="请输入联系方式" />
						</uni-forms-item>
						<uni-forms-item label="国籍" required  name="countryId">
							<uni-data-select
							  v-model="baseFormData.countryId"
							  :localdata="countryList"
							  @change="changeCountry"
							></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="民族" required name="nation">
							<uni-data-select v-model="baseFormData.nation" :localdata="nationList"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="所在地区">
								<uni-data-picker class="fixUniFormItemStyle"
									v-model="baseFormData.regionId"
									:localdata="regionsList"
									popup-title="请选择所在地区"
								></uni-data-picker>
							</uni-forms-item>
							<uni-forms-item label="详细地址"><uni-easyinput v-model="baseFormData.address" placeholder="请输入详细地址" /></uni-forms-item>
						
							<uni-forms-item label="紧急联系人"><uni-easyinput v-model="baseFormData.ecName" placeholder="请输入联系人" /></uni-forms-item>
							<uni-forms-item label="紧急联系方式"><uni-easyinput v-model="baseFormData.ecPhone" type="number" placeholder="请输入联系方式" /></uni-forms-item>
							<uni-forms-item label="与本人关系"><uni-easyinput v-model="baseFormData.ecRelationship" placeholder="请输入与本人关系" /></uni-forms-item>
						
						<view class="gapTitle" style="padding: 0; margin: 0 0 10rpx;">
							实名认证
							<text>正面为国徽面 反面为头像面</text>
						</view>
						
								<view class="ttt">
									头像面<text>请拍摄完整身份证</text>
								</view>
								<view class="idImgUrl">
									<uni-file-picker v-model="baseFormData.idcFrontImgObj" @delete="delimgFont" return-type="object" limit="1" @select="upIdCardImgFront" :image-styles="imageStyles"></uni-file-picker>
								</view>
						
								<view class="ttt">
									国徽面<text>请拍摄完整身份证</text>
								</view>
								<view class="idImgUrl">
									<uni-file-picker limit="1" v-model="baseFormData.idcBackImgObj" @delete="delimgBack" return-type="object" @select="upIdCardImgBack" :image-styles="imageStyles"></uni-file-picker>
								</view>
							
						
				</view>
			</uni-group>
		
			<uni-group mode="card" title="所属团体信息" top="20">
				<view class="wBox">
					<!-- <button class="poKxBtn" type="primary" plain="true">+加入机构</button> -->
					<view class="matchItem" v-for="(g,index) in groupList" :key="index">
						<view class="leftImg">
							<image class="roundImg" :src="g.imgUrl" mode="aspectFill"></image>
						</view>
						<view class="rightWen">
							<view class="name">{{g.name}}</view>
							<view class="pp">地区：
								<uni-data-picker readonly v-if="g.regionId" :clear-icon='false'
									v-model="g.regionId"
									:localdata="regionsList"
								></uni-data-picker>
								<text v-else>暂无</text>
							</view>
							<view class="pp">类型：
								<text v-if="g.type==0">学校 </text>
								<text v-if="g.type==1">场馆 </text>
								<text v-if="g.type==2">俱乐部 </text>
								<text v-if="g.type==3">机构 </text>
							</view>
						</view>
						<view class="bottomFunc">
							<view class="textButtom" @click="exitGroup(g)">退出参赛队</view>
						</view>
					</view>
					
					<view class="nodata" v-if="groupList.length==0">
						<image mode="aspectFit" src="/static/nodata.png"></image>
					</view>
				</view>
			</uni-group>
		
			<uni-group mode="card" title="人员管理" top="20" style="display: none;">
				<view class="wBox">
					<button class="poKxBtn" type="primary" plain="true" @click="goEditCoach(0,0)">+添加人员</button>
					<uni-segmented-control :current="current" :values="kindList" @clickItem="onClickItem" styleType="button" activeColor="#39DBA7"></uni-segmented-control>
					<view class="matchItem" v-for="p in memberList" :key="p.id">
						<view class="leftImg">
							<image class="roundImg" :src="p.picUrl" mode="aspectFill"></image>
						</view>
						<view class="rightWen">
							<view class="name">{{p.realName}}
								<view class="tag-view" v-for="(l,index) in p.labelArr" :key="index">
									<uni-tag v-if="l == '2'" :inverted="true" text="领队" type="warning" />
									<uni-tag :inverted="true" v-if="l == '1'" text="教练" type="primary" />
									<uni-tag :inverted="true" v-if="l == '0'" text="运动员" type="success" />
									<uni-tag :inverted="true" v-if="l == '3'" text="其他" type="error" />
								</view>
							</view>
							<view class="pp">
								证件类型：
								<text v-if="p.idcType == 0">身份证</text>
								<text v-else-if="p.idcType == 1">护照</text>
								<text v-else>其他</text>
							</view>
							<view class="pp">证件号：{{p.idcCode}}</view>
							<view class="pp">联系方式：{{p.phone}}</view>
						</view>
						<view class="bottomFunc">
							<view class="textButtom" @click="goEditCoach(p.id, groupId)">编辑</view>
							<text class="greenline">|</text>
							<view class="textButtom" @click="del(p)">删除</view>
						</view>
					</view>
					<view class="nodata" v-if="memberList.length==0">
						<image mode="aspectFit" src="/static/nodata.png"></image>
					</view>
				</view>
			</uni-group>
		
		</uni-forms>
		<view class="fixedBottom"><button class="btn btn1" @click="goNext" type="default">保存</button></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad ,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
import * as match from '@/common/match.js'
import { tagList, sexs , idcTypeList,nationList } from '@/static/js/data'
const baseFormData = ref({
	countryId:240
});
const rules = ref({
	realName:{
		rules:[{required: true,errorMessage: '请填写真实姓名'}]
	}
});
const imageStyles=ref({
				width:'500rpx',
				height:'300rpx',
				border:{radius:'2px'}
				});
const countryList = ref([]);
const regionsList = ref([]);
const groupList = ref([]);
const memberList = ref([]);
const current = ref(0);
const kindList = ref(['教练', '领队', '其他']);
onLoad(()=>{
	getCountryList()
	getRegionsList()
})
onShow(()=>{
	getData()
})
onPullDownRefresh(() => {
	getData()
})
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 getRegionsList() {
	match.regionsList().then(res => {
		regionsList.value = res.data
	});
}
function getData(){
	match.getMyPersonInfo().then(res => {
		baseFormData.value = res.data
		groupList.value = baseFormData.value.groups||[]
		current.value = 0
		memberList.value = baseFormData.value.coaches||[]
		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,
			}
		}
			getLabel(memberList.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
				const res = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
				if (baseFormData.value.idcCode && res.test(baseFormData.value.idcCode)) {
				  const genderCode = baseFormData.value.idcCode.charAt(16)
				  if (parseInt(genderCode) % 2 == 0) {
				    baseFormData.value.sex = '0'
				  } else {
				    baseFormData.value.sex = '1'
				  }
				}
			}
		}
	}
function goNext() {
	// 验证手机号
	// var pattern = /^1[345789]\d{9}$/;    
	// if (!pattern.test(baseFormData.value.phone)) {  
	// 	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.nation == null) {
		uni.showToast({
			title: '请填写民族',
			duration: 2000,
			icon: 'none'
		})
		return
	}
	match.saveMyBaseInfo(baseFormData.value).then(res=>{
		uni.showToast({
			title: '保存成功',
			duration: 2000
		});
	})
}
function onChooseavatar(e) {
	match.uploadFile(e).then(data=>{
		baseFormData.value.picUrl = data.data
	})
}
function upIdCardImgFront(e) {
	match.uploadImg(e).then(data => {
		baseFormData.value.idcFrontImg = data.data;
	});
}
function upIdCardImgBack(e) {
	match.uploadImg(e).then(data => {
		baseFormData.value.idcFrontImg = data.data;
	});
}
function delimgFont(n){
	baseFormData.value.idcFrontImg = '';
}
function delimgBack(n){
	baseFormData.value.idcBackImg = '';
}
function getLabel(list) {
	if (list.length > 0) {
		for (const m of list) {
			m.labelArr = m.label.split(',');
		}
	}
}
function onClickItem(e) {
	console.log(current.value);
	if (current.value != e.currentIndex) {
		current.value = e.currentIndex;
		switch (current.value) {
			case 0: {
				memberList.value = baseFormData.value.coaches;
				getLabel(memberList.value);
				break;
			}
			case 1: {
				memberList.value = baseFormData.value.leaders;
				getLabel(memberList.value);
				break;
			}
			case 2: {
				memberList.value = baseFormData.value.others;
				getLabel(memberList.value);
				break;
			}
		}
	}
}
function maskClick(e){
	console.log('maskClick事件:', e);
} 
function changeSex(e){
	console.log("性别:",e.detail.value)
} 
function changeCountry(e){
	console.log(e);
	if (e!= 240) {
	  baseFormData.value.nation = '其他'
	}
} 
function changeidcType(e){
	console.log("证件:",e)
	if(e){
		baseFormData.value.idcTypeStr = idcTypeList[e].text
	}
} 
function exitGroup(g){
	uni.showModal({
		title: '提示',
		content: `确定退出${g.name}吗？`,
		success: function (res) {
			if (res.confirm) {
				match.leaveGroup(g.id).then(response => {
					uni.showToast({
						title: '已退出',
						duration: 2000
					});
				})
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
function goEditCoach(id, groupId) {
	uni.navigateTo({
		url: `/pages_match/match/add_coach?id=${id || 0}&groupId=${groupId || 0}`
	});
}
function del(p){
	uni.showModal({
		title: '提示',
		content: `确定删除${p.realName}吗？`,
		success: function (res) {
			if (res.confirm) {
				match.delPerson(p.id).then(response => {
					uni.showToast({
						title: '已删除',
						duration: 2000
					});
					getData()
				})
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
</script>

<style scope lang="scss">
.wBox {    position: relative;
	background: #ffffff;
	border-radius: 15px;
	box-sizing: border-box;
}
 :deep(.fixedbody .uni-group.uni-group--card){overflow:visible;}
 :deep(.uni-tag){
 	padding: 4rpx 6rpx!important;font-size: 20rpx!important;
 }
.avatarUrl{width: 200rpx;height:200rpx;}
.avatarUrl button{padding: 0;display: block;line-height: 1;}
.refreshIcon{width: 200rpx;height:200rpx;}
.matchItem{background: #FBFCFD; margin: 30rpx 0 90rpx;padding:20rpx;border: #eee solid 1rpx;
	.bottomFunc{background: #FBFCFD;border: #eee solid 1rpx;}
}
.poKxBtn{position: absolute;    top: -100rpx;
    right: 0;
    font-size: 24rpx;
    line-height: 2;
}
.pp{display: flex;
	.uni-data-tree{font-size: 24rpx;
		.selected-list{padding: 0;}
		.input-value{line-height:normal;padding: 0;}
	}
}
.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>