<template>
	<view>
		<uni-segmented-control class="whitebg" :current="current" :values="items" @clickItem="onClickItem"
			styleType="text" activeColor="#C40F18"></uni-segmented-control>
		<view class="hasfixedbottom">
			<view>
				<uni-forms ref="baseForm" :border="true" :modelValue="baseFormData" label-width="80">
					<view class="nolineform">
						<uni-forms-item label="姓名" required name="name" v-show="current === 0">
							<uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
								v-model="baseFormData.name" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="证件类型" required name="idcType">
							<uni-data-select v-model="baseFormData.idcType" style="width: 360rpx;"
								@change="changeIdcType" :clear="false" :disabled="current === 0"
								:localdata="idcTypeList"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="证件照" required v-show="current === 1">
							<view class="upCard">
								<uni-file-picker v-model="cardObj" @delete="delimgFont" return-type="object" limit="1"
									@select="upIdCardImgFront" :image-styles="imageStylesZJ">
									<image v-if="!baseFormData.card" class="sfz"
										:src="config.baseUrl_api+'/fs/static/login/sfz.png'">
									</image>
								</uni-file-picker>
							</view>
						</uni-forms-item>
						<uni-forms-item label="姓名" required name="name" v-show="current === 1">
							<text v-if="disabledName">{{baseFormData.name}}</text>
							<uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
								v-model="baseFormData.name" v-else placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="证件号码" required name="idcCode" v-show="current === 0">
							<uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
								v-model="baseFormData.idcCode" @blur="giveBirthDay" placeholder="请输入证件号码" />
						</uni-forms-item>
						<uni-forms-item label="证件号码" required name="idcCode" v-show="current === 1">
							<text>{{baseFormData.idcCode}}</text>
						</uni-forms-item>
						<uni-forms-item label="性别" required name="sex">
							<text v-if="baseFormData.sex=='0'">男</text>
							<text v-else-if="baseFormData.sex=='1'">女</text>
							<!-- <uni-data-checkbox v-model="baseFormData.sex" @change="changeSex" :localdata="sexs" /> -->
						</uni-forms-item>
						<uni-forms-item label="出生日期" required name="birth">
							{{baseFormData.birth?.slice(0,10)}}
							<!-- 							<uni-datetime-picker type="date" placeholder="YYYY-MM-DD" :border='false'
								:clear-icon="false" v-model="baseFormData.birth" /> -->
						</uni-forms-item>
						<uni-forms-item label="联系方式" name="phone">
							<uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
								v-model="baseFormData.phone" placeholder="请输入联系方式" />
						</uni-forms-item>


						<uni-forms-item label="所在地区">
							<uni-data-picker class="fixUniFormItemStyle" v-model="baseFormData.cityId"
								:localdata="regionsList" popup-title="请选择所在地区"></uni-data-picker>
						</uni-forms-item>
						<uni-forms-item label="详细地址"><uni-easyinput :styles="inputstyle"
								:placeholderStyle="placeholderStyle" v-model="baseFormData.address"
								placeholder="请输入详细地址" /></uni-forms-item>

						<uni-forms-item label="头像" required>
							<uni-file-picker v-model="photoArr" @delete="delPhoto" return-type="object" limit="1"
								@select="upPhoto" :del-ico="false" :image-styles="imageStylesTx"></uni-file-picker>
							<image mode="aspectFill" v-if="baseFormData.photo2" style="height:200rpx;width:200rpx;" :src="config.baseUrl_api + baseFormData.photo2"/>
						</uni-forms-item>
					</view>



				</uni-forms>

			</view>
			<view class="agreeline">
				<image @click="changeAgree(agree)" v-if="agree"
					:src="config.baseUrl_api+'/fs/static/login/xz_dwn@2x.png'"></image>
				<image @click="changeAgree(agree)" v-else :src="config.baseUrl_api+'/fs/static/login/xz@2x.png'">
				</image>
				<view>我已阅读<text @click="openpopup">《入会须知》</text></view>
			</view>
		</view>
		<view class="fixedBottom"><button class="btn-red" @click="goSubmit">确 定</button></view>

		<!-- 会员须知 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" animation>
			<view class="tt">入会须知</view>
			<view class="popBody">
				_{{baseFormData.name}}_欢迎您申请成为中国跆拳道协会（以下简称中国跆协）会员，请确保本次申请是经过您本人或监护人授权同意后的自愿行为，请您务必仔细阅读本入会须知。
				<br />
				一、中国跆协会员分为个人会员和单位会员。
				<br />
				二、成为本协会会员条件：遵守中国跆协章程和协会各项规章制度及相关决议，按期交纳会费，积极支持和参与中国跆拳道事业发展的社会各届人士或地方跆拳道协会、俱乐部、培训机构等，均可自愿申请成为中国跆协会员。<br />
				三、个人会员为在中国工作和生活的跆拳道爱好者，16 周岁以下应有监护人协助申请，会员须为中国公民。<br />
				四、会员入会需向所在区域内中国跆协单位会员提出入会申请，并按程序报中国跆协批准，按规定交纳会费。<br />
				五、会员享有《中国跆拳道协会会员管理办法》规定的会员权利。
				<br />
				六、会员应履行《中国跆拳道协会会员管理办法》规定的会员义务。
				<br />
				七、凡中国跆协会员，须按照《中国跆拳道协会会员会费标准（2021 版）》按时交纳年度会费。<br />
				八、会员行为违反《中国跆拳道协会会员管理办法》中规定的，按照相关处罚规定进行处理。<br />
				九、其它会员相关内容请查看《中国跆拳道协会章程》《中国跆拳道协会会员管理办法》。<br />

				<button @click="closepopup" class="btn-red">我已阅读</button>
			</view>
		</uni-popup>

		<uni-popup ref="infoConfirm" type="center">
			<view class="tt">确认信息</view>
			<view class="popBody">
				<view>

				</view>

				<button @click="closepopup" class="btn-red">已确认</button>
			</view>
		</uni-popup>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import * as api from '@/common/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import config from '@/config.js'
	import * as  aes2 from '@/common/utils.js'
	const current = ref(0)
	const popup = ref(null)
	const infoConfirm = ref(null)
	const agree = ref(false)
	const perId = ref()
	const photoArr = ref({})
	const regionsList = ref([])
	const cardObj = ref({})
	const disabledName = ref(true)
	const baseFormData = ref({
		photo: '',
		sex: '',
		idcType: '0',
		perType: '1', // （1：个人会员；2：教练；3：考官；4：裁判；5：临时会员；）
	})
	const items = ref(['身份证添加', '证件照录入'])
	const idcTypeList = ref([{
			value: '0',
			text: "身份证"
		},
		{
			value: '1',
			text: "来往大陆(内地)通行证"
		},
		{
			value: '3',
			text: "护照"
		}, {
			value: '4',
			text: '户口本'
		}, {
			value: '5',
			text: '香港身份证'
		}
	])
	const sexs = ref([{
		text: '女',
		value: '1'
	}, {
		text: '男',
		value: '0'
	}])
	const placeholderStyle = ref('text-align: right;font-size:30rpx')
	const inputstyle = ref({
		borderColor: '#fff',
		fontSize: '30rpx'
	})
	const imageStylesTx = ref({
		width: '210rpx',
		height: '280rpx',
		background: {
			color: '#F4F6FA'
		},
		border: {
			radius: '2px'
		}
	});

	const imageStylesZJ = ref({
		width: '500rpx',
		height: '316rpx'
	});
	onLoad((option) => {
		if (option.tab == '1') {
			current.value = 1
			baseFormData.value.sourceFlag = 1
			baseFormData.value.idcType = option.idcType || 0
			if (baseFormData.value.idcType == '3') {
				disabledName.value = false
			} else {
				disabledName.value = true
			}
		}
		// console.log(current.value,option.tab)
		getRegionsList()
	})

	function getRegionsList() {
		api.regionsList().then(res => {
			regionsList.value = res.data
		})
	}

	function onClickItem(e) {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex
		}
		cardObj.value = {}
		photoArr.value = {}
		if (current.value == 0) {
			baseFormData.value = {
				photo: '',
				idcType: '0',
				perType: '1'
			}
		} else {
			baseFormData.value = {
				photo: '',
				idcType: '0',
				perType: '1',
				sourceFlag: 1
			}
		}
	}


	function changeAgree(item) {
		agree.value = !item
	}

	//身份证识别
	function upIdCardImgFront(e) {
		let file = e.tempFiles[0]
		if (!file) {
			return
		}
		uni.showLoading({
			title: '加载中'
		});
		baseFormData.value.card = e.tempFiles;
		// console.log(e)
		// const formData = new FormData()
		// formData.append('pic', e.tempFiles[0].file)
		api.carUrl(e.tempFilePaths[0], baseFormData.value.idcType).then(res => {
			console.log(res)
			if (res.data) {
				baseFormData.value.sex = res.data.sex
				baseFormData.value.birth = res.data.birth
				baseFormData.value.idcCode = res.data.code
				baseFormData.value.name = res.data.name
				baseFormData.value.uuid = res.data.uuid
				baseFormData.value.cityId = res.data.cityId
				baseFormData.value.address = res.data.address
				photoArr.value = {}
				getExtractInfo({
					idcCode: baseFormData.value.idcCode,
					idcType: baseFormData.value.idcType,
					perType: baseFormData.value.perType
				})

			} else {
				uni.hideLoading()
				uni.showModal({
					content: res.msg,
					success: function(modalRes) {

					}
				})
			}

		})
	}

	function upPhoto(e) {
		const tempFilePaths = e.tempFilePaths;
		const imgUrl = tempFilePaths[0]
		if (!imgUrl) {
			return
		}
		wx.cropImage({
			src: imgUrl,
			cropScale: '4:5',
			success: function(resp) {
				uni.showLoading({
					title: '加载中'
				});
				api.uploadImgCorpPhoto(resp.tempFilePath).then(data => {
					console.log(data)
					baseFormData.value.photo = data.data.fang;
					baseFormData.value.photo2 = data.data.yuan;
					photoArr.value = {
						url: config.baseUrl_api+baseFormData.value.photo,
						name: '头像',
						extname: 'jpg'
					}
				});
			},
			fail: function(err) {
				photoArr.value = {}
			}
		})


	}


	function delimgFont(n) {
		photoArr.value = {}
		cardObj.value = {}
		baseFormData.value = {
			photo: '',
			idcType: baseFormData.value.idcType,
			perType: '1',
			sourceFlag: 1
		};
	}


	function delPhoto(n) {
		photoArr.value = {};
		baseFormData.value.photo = '';
		baseFormData.value.photo2 = '';
	}


	function getExtractInfo(obj) {
		photoArr.value = {}
		// baseFormData.value = {
		// 	photo: '',
		// 	idcType: baseFormData.value.idcType,
		// 	idcCode: baseFormData.value.idcCode,
		// 	perType: '1'
		// };
		uni.showLoading({
			title: '加载中'
		})
		api.extractInfoFromChinaIdCard(obj).then(res => {
			if (res.data.perCode) {
				// if(baseFormData.value.idcType != 3){
				disabledName.value = true
				// }
				perId.value = res.data.perId
				baseFormData.value.sex = res.data.sex
				baseFormData.value.birth = res.data.birth
				baseFormData.value.name = res.data.name
				baseFormData.value.phone = res.data.phone
				baseFormData.value.cityId = res.data.cityId
				baseFormData.value.address = res.data.address
				if (res.data.photo) {
					console.log(res.data.photo)
					if (res.data.photo.indexOf('http') == -1) {
						baseFormData.value.photo = res.data.photo
						let obj = {
							url: config.baseUrl_api + res.data.photo,
							name: '头像',
							extname: 'jpg'
						}
						photoArr.value = obj
					} else {
						baseFormData.value.photo = res.data.photo
						let obj = {
							url: res.data.photo,
							name: '头像',
							extname: 'jpg'
						}
						photoArr.value = obj
					}

				}
				// baseFormData.value.name = res.data.name
				baseFormData.value.perId = res.data.perId
				console.log(res.data.photo, baseFormData.value.photo)
				uni.hideLoading()
			} else {
				uni.hideLoading()
				// 新会员
				if (res.data.sex) {
					baseFormData.value.sex = res.data.sex
					baseFormData.value.birth = res.data.birth
				}
				if (baseFormData.value.idcType != 3 && current.value == 1) {
					disabledName.value = true
				} else {
					disabledName.value = false
				}
				return
			}
		})
	}


	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 {
				getExtractInfo({
					idcCode: baseFormData.value.idcCode,
					idcType: baseFormData.value.idcType,
					perType: baseFormData.value.perType
				})
			}
		}
	// 	if (baseFormData.value.idcType == 1 || baseFormData.value.idcType == 3) {
	// 		//转换为大写并判断位数12
	// 		baseFormData.value.idcCode = baseFormData.value.idcCode.toUpperCase()
	// 		// var regex = /^[a-zA-Z]/
	// 		if (baseFormData.value.idcCode.length > 12) {
	// 			uni.showToast({
	// 				icon: 'none',
	// 				title: '请输入正确的证件号',
	// 				duration: 2000
	// 			})
	// 			return
	// 		}
	// 	}
	}


	function openpopup() {
		popup.value.open()
	}


	function closepopup() {
		agree.value = true
		popup.value.close()
	}


	function changeIdcType(e) {
		console.log(e)
		// 切换证件照类型把当前页面数据清空
		cardObj.value = {}
		photoArr.value = {}
		baseFormData.value = {
			photo: '',
			idcType: e,
			perType: '1',
			sourceFlag: 1
		}
	}


	function goSubmit() {
		if (!agree.value) {
			uni.showToast({
				icon: 'none',
				title: '请阅知入会须知',
				duration: 2000
			});
			return
		}
		// 验证必填项
		if (!baseFormData.value.name) {
			uni.showToast({
				title: `请输入姓名`,
				icon: 'none'
			})
			return
		}
		if (!baseFormData.value.idcCode) {
			uni.showToast({
				title: `请输入证件号码`,
				icon: 'none'
			})
			return
		}
		console.log(baseFormData.value.photo)
		if (baseFormData.value.photo == '' || baseFormData.value.photo == undefined || !baseFormData.value.photo) {
			uni.showToast({
				title: `请上传头像`,
				icon: 'none'
			})
			return
		}
		//信息确认弹出
		uni.showModal({
			content: '请确认信息正确',
			success: function(res) {
				if (res.confirm) {
					if(baseFormData.value.idcType=='4'){
						baseFormData.value.idcType='0'
					}
					delete baseFormData.value.card

					const time = new Date().valueOf() + ''
					baseFormData.value.t = time + Math.floor(Math.random() * 10)
					baseFormData.value.signT = aes2.AESEncrypt(baseFormData.value.idcType + time)
          console.log(baseFormData.value)
					api.addPersonToMyDept(baseFormData.value).then(Response => {
						if (Response.data == 0) {
							let msg = '该成员，实名认证未通过，注册失败！'
							uni.showModal({
								content: msg,
								title: '提示',
								success: function() {}
							})
							return
						}
						if (Response.data * 1 < 0) {
							// 会员调入弹出
							uni.showModal({
								content: '该会员已存在其他道馆，如需添加，请发起会员调动',
								title: '提示',
								success: function() {}
							})
							return
						}
						// let msg = '保存成功'
						uni.showModal({
							content: '保存成功',
							title: '提示',
							confirmText:'继续添加',
							cancelColor:'返回首页',
							success: function(res) {
								uni.redirectTo({
									url: `/personalVip/addVip?tab=${current.value}&idcType=${baseFormData.value.idcType}`
								});
							},
							fail:function(){
								uni.reLaunch({
									url:`/pages/index/index`
								})
							}
						})

					})
				}
			}
		});
	}
	function getUserInfo() {
		api.getInfo(perId.value).then(res => {
			baseFormData.value = res.data
			if (baseFormData.areaAssName) baseFormData.ancestorNameList = baseFormData.value.ancestorNameList.join(
				',').replaceAll(',',
				'/')
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-forms-item__content) {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	:deep(.segmented-control) {
		height: 100rpx;
	}

	:deep(.segmented-control__text) {
		line-height: 2;
		font-size: 30rpx;
	}

	.tt {
		text-align: center;
		font-size: 30rpx;
		padding: 40rpx 0 0;
	}

	.popBody {
		font-size: 28rpx;
		line-height: 1.5;
		font-family: 华文仿宋;
		height: 80vh;
		overflow: auto;
		padding: 30rpx;

		.btn-red {
			margin: 50rpx 0 30rpx;
		}
	}

	.agreeline {
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		font-size: 30rpx;

		text {
			color: #014A9F;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}

	.upCard {
		position: relative;
		width: 500rpx;
		height: 316rpx;

		.uni-file-picker {
			position: absolute;
			z-index: 1;
		}

		.sfz {
			width: 476rpx;
			position: absolute;
			top: 0;
			left: 0;
			height: 293rpx;
		}
	}

	.op0 {
		opacity: 0;
	}


	:deep(.item-text-overflow) {
		text-align: left;
	}
</style>