<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" :localdata="idcTypeList"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="证件照" required name="picUrl" v-show="current === 1">
							<view class="upCard">
								<uni-file-picker :class="baseFormData.card?'':'op0'" v-model="baseFormData.cardObj"
									@delete="delimgFont" return-type="object" limit="1" @select="upIdCardImgFront"
									:image-styles="imageStylesZJ"></uni-file-picker>
								<image v-if="!baseFormData.card" class="sfz" src="@/static/login/sfz.png">
								</image>
							</view>
						</uni-forms-item>
						<uni-forms-item label="姓名" required name="name" v-show="current === 1">
							<uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
								v-model="baseFormData.name" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="证件号码" required name="idcCode">
							<uni-easyinput :styles="inputstyle" :clearable='false' :placeholderStyle="placeholderStyle"
								v-model="baseFormData.idcCode" @blur="giveBirthDay" placeholder="请输入证件号码" />
						</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" 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 name="photo">
							<uni-file-picker v-model="baseFormData.photoObj" @delete="delPhoto" return-type="object"
								limit="1" @select="upPhoto" :image-styles="imageStylesTx"></uni-file-picker>
						</uni-forms-item>



					</view>



				</uni-forms>

			</view>
			<view class="agreeline">
				<image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image>
				<image @click="changeAgree(agree)" v-else src="@/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">
				______欢迎您申请成为中国跆拳道协会（以下简称中国跆协）会员，请确保本次申请是经过您本人或监护人授权同意后的自愿行为，请您务必仔细阅读本入会须知。
				<br />
				一、中国跆协会员分为个人会员和单位会员。
				<br />
				二、成为本协会会员条件：遵守中国跆协章程和协会各项规章制度及相关决议，按期交纳会费，积极支持和参与中国跆拳道事业发展的社会各届人士或地方跆拳道协会、俱乐部、培训机构等，均可自愿申请成为中国跆协会员。
				<br />
				三、个人会员为在中国工作和生活的跆拳道爱好者，16 周岁以下应有监护人协助申请，会员须为中国公民。
				<br />
				四、会员入会需向所在区域内中国跆协单位会员提出入会申请，并按程序报中国跆协批准，按规定交纳会费。
				<br />
				五、会员享有《中国跆拳道协会会员管理办法》规定的会员权利。
				<br />
				六、会员应履行《中国跆拳道协会会员管理办法》规定的会员义务。
				<br />
				七、凡中国跆协会员，须按照《中国跆拳道协会会员会费标准（2021 版）》按时交纳年度会费。
				<br />
				八、会员行为违反《中国跆拳道协会会员管理办法》中规定的，按照相关处罚规定进行处理。
				<br />
				九、会员有退会的自由。会员自愿退会应至少提前 3 个月以书面形式通知本协会，并在此之前，妥善解决与本协会及其他会员之间的财务等问题，方可退会。
				<br />
				十、其它会员相关内容请查看《中国跆拳道协会会员管理办法》。

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

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import * as api from '@/common/api.js'
	const current = ref(0)
	const popup = ref(null)
	const agree = ref(false)
	const perId = ref()
	const regionsList = ref([])
	const baseFormData = ref({
		sex: '0',
		idcType: '0',
		perType: '1', // （1：个人会员；2：教练；3：考官；4：裁判；5：临时会员；）
	})
	const items = ref(['手动录入', '自动录入'])
	const idcTypeList = ref([{
			value: '0',
			text: "身份证"
		},
		{
			value: '1',
			text: "港澳台通信身份证"
		},
		{
			value: '2',
			text: "中国护照"
		},
		{
			value: '3',
			text: "外国护照"
		}
	])
	const sexs = ref([{
		text: '女',
		value: '0'
	}, {
		text: '男',
		value: '1'
	}])
	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'
	});

	onMounted(() => {
		getRegionsList()
	})

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

	function onClickItem(e) {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex
		}
	}

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

	//身份证识别
	function upIdCardImgFront(e) {
		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 => {
			baseFormData.value.idcUrl = res.data.url
			baseFormData.value.sex = res.data.sex
			baseFormData.value.birth = res.data.birth
			baseFormData.value.idcCode = res.data.code
			baseFormData.value.cityId = res.data.cityId
			baseFormData.value.address = res.data.address
			baseFormData.value.photo = res.data.photo
			baseFormData.value.name = res.data.name
			baseFormData.value.picUUid = res.data.picUUid
		})
		// api.uploadImg(e).then(data => {
		// 	baseFormData.value.card = data.data;
		// });
	}

	function upPhoto(e) {
		api.uploadImg(e).then(data => {
			baseFormData.value.photo = data.data;
		});
	}

	function delimgFont(n) {
		baseFormData.value.card = '';
	}

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

	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 changeSex(e) {
		console.log("性别:", e.detail.value)
	}

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

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

	function goSubmit() {
		if (!agree.value) {
			uni.showToast({
				icon: 'none',
				title: '请阅知入会须知',
				duration: 2000
			});
			return
		}
		// 验证必填项
		//信息确认弹出
		uni.showModal({
			content: '确认信息正确',
			success: function(res) {
				if (res.confirm) {
					delete baseFormData.value
					api.addPersonToMyDept(baseFormData.value).then(res => {
						if (res.data == 0) {
							let msg = '该成员，实名认证未通过，注册失败！'
							resultDialog.value = true
							return
						}
						if (res.data * 1 < 0) {
							// 会员调入弹出
							perId.value = res.data.slice(1)
							getUserInfo()
							return
						}

						let msg = '操作成功，您可以去列表中查看'
						form.value = { perType: 1, idcType: '0' }

					}).catch(() => {
						let msg = '您已注册该会员，请不要重复注册！'
						
					})
				}
			}
		});

	}

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

<style lang="scss" scoped>
	: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: 500rpx;
			height: 316rpx;
		}
	}

	.op0 {
		opacity: 0;
	}


	:deep(.item-text-overflow) {
		text-align: left;
	}

	:deep(.selected-list) {
		justify-content: flex-end;
	}
</style>