<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="realName" v-show="current === 0">
							<uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
								v-model="baseFormData.realName" placeholder="请输入姓名" />
						</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="picUrl" v-show="current === 1">
							<view class="upCard">
								<uni-file-picker :class="baseFormData.idcFrontImg?'':'op0'"
									v-model="baseFormData.idcFrontImgObj" @delete="delimgFont" return-type="object"
									limit="1" @select="upIdCardImgFront"
									:image-styles="imageStylesZJ"></uni-file-picker>
								<image v-if="!baseFormData.idcFrontImg" class="sfz" src="@/static/login/sfz.png">
								</image>
							</view>
						</uni-forms-item>
						<uni-forms-item label="姓名" required name="realName" v-show="current === 1">
							<uni-easyinput :styles="inputstyle" :placeholderStyle="placeholderStyle"
								v-model="baseFormData.realName" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="证件号码" required name="idcCode">
							<uni-easyinput :styles="inputstyle" :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.regionId"
								: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="picUrl">
							<uni-file-picker v-model="baseFormData.idcFrontImgObj" @delete="delimgFont"
								return-type="object" limit="1" @select="upIdCardImgFront"
								: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 v-else src="@/static/login/xz2@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 {
		ref
	} from 'vue'
	const current = ref(0)
	const popup = ref(null)
	const agree = ref(true)
	const regionsList = ref([])
	const baseFormData = ref({
		sex: '0'
	})
	const baseFormData2 = ref({})
	const items = ref(['手动录入', '自动录入'])
	const idcTypeList = ref([{
			value: '0',
			text: "身份证"
		},
		{
			value: '1',
			text: "护照"
		},
		{
			value: '2',
			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'
	});

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

	function changeAgree(item) {
		item = !item
	}

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

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

	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 changeidcType(e) {
		console.log("证件:", e)
		if (e) {
			baseFormData.value.idcTypeStr = idcTypeList[e].text
		}
	}

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

	function closepopup() {
		popup.value.close()
	}

	function goSubmit() {
		if(!agree.value){
				uni.showToast({
					title: '请阅知入会须知',
					duration: 2000
				});
		}
	}
</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;
	}
</style>