<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="会员编号" name="perCode" v-if="baseFormData.perCode">
							<uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
								v-model="baseFormData.perCode" placeholder="请输入会员编号" />
						</uni-forms-item>
						<uni-forms-item label="会员有效期" name="validityDate" v-if="baseFormData.validityDate">
							<uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
								v-model="baseFormData.validityDate" 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">
				<checkbox-group @change="onAgreeChange">
					<label class="agree-label">
						<checkbox :checked="agree" color="#C40F18" value="1" />
						<text class="agree-text">我已阅读并同意</text>
						<text class="notice-link" @click.stop="showNotice(1)">《注册须知》</text>
						<text class="notice-link" @click.stop="showNotice(2)">《入会须知》</text>
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="fixedBottom"><button class="btn-red" @click="goSubmit">确 定</button></view>
	</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 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：临时会员；）
		perCode:'',
		validityDate:''
	})
	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 onAgreeChange(e) {
		const values = e.detail.value
		agree.value = values.includes('1')
	}

	// 查看须知 - 跳转到须知页面
	function showNotice(type) {
		const pageMap = {
			1: '/pages/index/notice-registration',
			2: '/pages/index/notice-membership-vip'
		}
		const url = pageMap[type]
		if (url) {
			uni.navigateTo({url})
		}
	}

	//身份证识别
	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
				baseFormData.value.perCode = res.data.perCode ||''
				baseFormData.value.validityDate = res.data.validityDate?.slice(0,10) //去掉时分秒
				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 ||1
				})
			}
		}
		// 	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 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)
					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/home`
								})
							}
						})

					})
				}
			}
		});
	}

	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">
	/* 字段名左对齐 */
	.uni-forms-item .uni-forms-item__label {
		text-align: left !important;
		justify-content: flex-start !important;
		padding-left: 0 !important;
		width: auto !important;
	}

	/* 内容右对齐 */
	.uni-forms-item .uni-forms-item__content {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		text-align: right !important;
		flex-wrap: nowrap !important;
	}

	/* 输入框内容右对齐 */
	.uni-forms-item .uni-easyinput .uni-easyinput__content-input,
	.uni-forms-item .uni-easyinput input,
	.uni-forms-item input,
	.uni-forms-item .uni-data-select .uni-select__input-box,
	.uni-forms-item .uni-data-picker .uni-data-picker__input-box {
		text-align: right !important;
	}

	/* 文本内容右对齐 */
	.uni-forms-item .uni-forms-item__content text,
	.uni-forms-item .uni-forms-item__content>text {
		display: inline-block !important;
		white-space: nowrap !important;
	}
</style>

<style lang="scss" scoped>
	:deep(.uni-popup__mask) {
		overflow: hidden !important;
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	:deep(.uni-popup) {
		overflow: hidden !important;
	}

	: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;
		height: 70vh;
		overflow-y: auto;
		font-family: 华文仿宋;
		height: 80vh;
		overflow: auto;
		padding: 30rpx;

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

	.agreeline {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.agree-label {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		font-size: 24rpx;
	}

	.agree-text {
		color: #666;
		margin-left: 10rpx;
	}

	.notice-link {
		color: #007AFF;
	}

	.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;
	}

	:deep(.fixUniFormItemStyle .uni-data-picker__input-box) {
		justify-content: flex-start !important;
		text-align: left !important;
	}

	/* 让地区选择器的文本左对齐 */
	:deep(.fixUniFormItemStyle .uni-data-picker__text) {
		text-align: left !important;
	}
</style>